/* =====================================================================
   TraceHub 2026 — Modern SaaS Design System
   Layered on top of Bootstrap 5 + 1dts-theme.css (do not remove those).
   Provides: design tokens, dark mode, refreshed components, motion utils.
   ===================================================================== */

/* ---------- 1. Design tokens (light) ---------- */
:root {
    /* Brand */
    --th-indigo-50:  #eef2ff;
    --th-indigo-100: #e0e7ff;
    --th-indigo-200: #c7d2fe;
    --th-indigo-300: #a5b4fc;
    --th-indigo-400: #818cf8;
    --th-indigo-500: #6366f1;
    --th-indigo-600: #4f46e5;
    --th-indigo-700: #4338ca;
    --th-indigo-800: #3730a3;
    --th-indigo-900: #312e81;

    --th-teal-50:  #ecfeff;
    --th-teal-100: #cffafe;
    --th-teal-300: #67e8f9;
    --th-teal-500: #06b6d4;
    --th-teal-600: #0891b2;
    --th-teal-700: #0e7490;

    --th-purple-50:  #faf5ff;
    --th-purple-100: #f3e8ff;
    --th-purple-300: #d8b4fe;
    --th-purple-500: #a855f7;
    --th-purple-600: #9333ea;

    --th-emerald-500: #10b981;
    --th-amber-500:   #f59e0b;
    --th-rose-500:    #f43f5e;

    /* Semantic — light */
    --th-bg:           #f8f9fc;
    --th-bg-subtle:    #f1f3f9;
    --th-surface:      #ffffff;
    --th-surface-2:    #fbfcfe;
    --th-surface-3:    #f4f6fb;
    --th-overlay:      rgba(255, 255, 255, 0.72);
    --th-border:       rgba(15, 23, 42, 0.08);
    --th-border-strong:rgba(15, 23, 42, 0.14);
    --th-divider:      rgba(15, 23, 42, 0.06);

    --th-text:         #0f172a;
    --th-text-2:       #334155;
    --th-text-3:       #64748b;
    --th-text-muted:   #94a3b8;
    --th-text-inverse: #ffffff;

    --th-primary:        var(--th-indigo-600);
    --th-primary-hover:  var(--th-indigo-700);
    --th-primary-soft:   var(--th-indigo-50);
    --th-primary-on:     #ffffff;

    --th-accent:         var(--th-teal-500);
    --th-accent-soft:    var(--th-teal-50);
    --th-highlight:      var(--th-purple-500);
    --th-highlight-soft: var(--th-purple-50);

    --th-success: var(--th-emerald-500);
    --th-warning: var(--th-amber-500);
    --th-danger:  var(--th-rose-500);
    --th-info:    var(--th-teal-500);

    /* Effects */
    --th-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --th-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --th-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --th-shadow-lg: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
    --th-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.05);
    --th-shadow-glow: 0 0 0 4px rgba(99, 102, 241, 0.18);
    --th-ring: 0 0 0 3px rgba(99, 102, 241, 0.28);

    /* Gradients */
    --th-gradient-primary:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    --th-gradient-primary-2: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    --th-gradient-accent:    linear-gradient(135deg, #06b6d4 0%, #818cf8 100%);
    --th-gradient-warm:      linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    --th-gradient-success:   linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --th-gradient-surface:   linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);

    /* Geometry */
    --th-radius-xs: 6px;
    --th-radius-sm: 8px;
    --th-radius-md: 12px;
    --th-radius-lg: 16px;
    --th-radius-xl: 20px;
    --th-radius-2xl: 28px;
    --th-radius-pill: 9999px;

    /* Spacing (8px scale) */
    --th-space-1: 4px;
    --th-space-2: 8px;
    --th-space-3: 12px;
    --th-space-4: 16px;
    --th-space-5: 20px;
    --th-space-6: 24px;
    --th-space-7: 32px;
    --th-space-8: 40px;
    --th-space-9: 48px;
    --th-space-10: 64px;
    --th-space-11: 80px;
    --th-space-12: 96px;

    /* Motion */
    --th-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --th-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --th-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --th-dur-1: 150ms;
    --th-dur-2: 200ms;
    --th-dur-3: 280ms;
    --th-dur-4: 400ms;
    --th-dur-5: 600ms;

    /* Layout */
    --th-nav-height: 72px;
    --th-container: 1240px;

    /* Bootstrap variable rebrand */
    --bs-primary: var(--th-primary);
    --bs-link-color: var(--th-primary);
    --bs-link-hover-color: var(--th-primary-hover);
    --bs-body-color: var(--th-text);
    --bs-body-bg: var(--th-bg);
    --bs-border-color: var(--th-border);
}

/* ---------- 2. Dark mode tokens ---------- */
[data-theme="dark"] {
    --th-bg:           #0b0f1e;
    --th-bg-subtle:    #0a0d1a;
    --th-surface:      #131830;
    --th-surface-2:    #181d3a;
    --th-surface-3:    #1f254a;
    --th-overlay:      rgba(15, 19, 41, 0.72);
    --th-border:       rgba(148, 163, 217, 0.12);
    --th-border-strong:rgba(148, 163, 217, 0.22);
    --th-divider:      rgba(148, 163, 217, 0.08);

    --th-text:         #e8eaf5;
    --th-text-2:       #c5c9dc;
    --th-text-3:       #9aa0bd;
    --th-text-muted:   #6d7396;
    --th-text-inverse: #0f172a;

    --th-primary:        #818cf8;
    --th-primary-hover:  #a5b4fc;
    --th-primary-soft:   rgba(99, 102, 241, 0.16);
    --th-accent-soft:    rgba(6, 182, 212, 0.16);
    --th-highlight-soft: rgba(168, 85, 247, 0.18);

    --th-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --th-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --th-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --th-shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
    --th-shadow-xl: 0 28px 60px rgba(0, 0, 0, 0.65), 0 10px 20px rgba(0, 0, 0, 0.4);
    --th-shadow-glow: 0 0 0 4px rgba(129, 140, 248, 0.22);

    --th-gradient-surface: linear-gradient(180deg, #181d3a 0%, #131830 100%);

    --bs-body-bg: var(--th-bg);
    --bs-body-color: var(--th-text);
    --bs-border-color: var(--th-border);
}

/* Prefer system setting until user picks one */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
    }
}

[data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* ---------- 3. Global resets / typography ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv02';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--th-bg);
    color: var(--th-text);
    transition: background-color var(--th-dur-3) var(--th-ease), color var(--th-dur-3) var(--th-ease);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    color: var(--th-text);
    letter-spacing: -0.02em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.15; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.2; }
h3 { font-size: 1.5rem; line-height: 1.3; }
h4 { font-size: 1.25rem; line-height: 1.35; }

p { color: var(--th-text-2); line-height: 1.65; }

a { color: var(--th-primary); transition: color var(--th-dur-1) var(--th-ease); }
a:hover { color: var(--th-primary-hover); }

::selection { background: var(--th-indigo-200); color: var(--th-indigo-900); }
[data-theme="dark"] ::selection { background: rgba(129, 140, 248, 0.4); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--th-border-strong);
    border-radius: var(--th-radius-pill);
    border: 2px solid var(--th-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--th-text-muted); }

/* ---------- 4. Navbar refresh ---------- */
body .navbar.sticky-top,
body .navbar.th-fixed-nav {
    background: var(--th-overlay) !important;
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--th-border);
    box-shadow: none;
    padding: var(--th-space-3) 0;
    transition: background-color var(--th-dur-3) var(--th-ease), border-color var(--th-dur-3) var(--th-ease), box-shadow var(--th-dur-3) var(--th-ease);
}
/* Truly fixed navbar that stays visible on scroll */
body .navbar.th-fixed-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1030;
}
/* Compensate body padding so content doesn't slip under the nav */
body { padding-top: var(--th-nav-height); }
/* Slight shadow when user has scrolled down — adds depth without being heavy */
body.th-scrolled .navbar.th-fixed-nav {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    border-bottom-color: transparent;
}
[data-theme="dark"] body.th-scrolled .navbar.th-fixed-nav {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
body .navbar .navbar-brand .brand-logo { height: 44px; }
body .navbar .brand-text { color: var(--th-text); font-weight: 700; letter-spacing: -0.02em; }
body .navbar .brand-text span { color: var(--th-primary); }

body .navbar .nav-link {
    color: var(--th-text-2) !important;
    font-weight: 500;
    font-size: 0.925rem;
    padding: 0.5rem 0.85rem !important;
    border-radius: var(--th-radius-sm);
    transition: color var(--th-dur-1) var(--th-ease), background-color var(--th-dur-1) var(--th-ease);
}
body .navbar .nav-link:hover {
    color: var(--th-primary) !important;
    background: var(--th-primary-soft);
}
body .navbar .nav-link.active {
    color: var(--th-primary) !important;
    background: var(--th-primary-soft);
}

body .dropdown-menu {
    border: 1px solid var(--th-border);
    background: var(--th-surface);
    box-shadow: var(--th-shadow-xl);
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-2);
    min-width: 240px;
    animation: thDropIn var(--th-dur-2) var(--th-ease-out);
}
@keyframes thDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
body .dropdown-item {
    color: var(--th-text-2);
    border-radius: var(--th-radius-sm);
    padding: 0.55rem 0.75rem;
    font-weight: 500;
    transition: background-color var(--th-dur-1) var(--th-ease), color var(--th-dur-1) var(--th-ease);
}
body .dropdown-item:hover, body .dropdown-item:focus {
    background: var(--th-primary-soft);
    color: var(--th-primary);
}
body .dropdown-item.active, body .dropdown-item:active {
    background: var(--th-primary);
    color: #fff;
}
body .dropdown-divider { border-color: var(--th-divider); margin: var(--th-space-2) 0; }
body .dropdown-header {
    color: var(--th-text-muted);
    font-weight: 700;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding: var(--th-space-2) var(--th-space-3) var(--th-space-1);
}

/* Theme toggle button */
.th-theme-toggle {
    width: 38px; height: 38px;
    border-radius: var(--th-radius-pill);
    background: var(--th-surface-3);
    border: 1px solid var(--th-border);
    color: var(--th-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all var(--th-dur-2) var(--th-ease);
    position: relative;
    overflow: hidden;
}
.th-theme-toggle:hover {
    color: var(--th-primary);
    background: var(--th-primary-soft);
    transform: scale(1.05);
}
.th-theme-toggle .th-icon-sun,
.th-theme-toggle .th-icon-moon {
    position: absolute;
    inset: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: opacity var(--th-dur-2) var(--th-ease), transform var(--th-dur-3) var(--th-ease-spring);
}
.th-theme-toggle .th-icon-moon { opacity: 1; transform: rotate(0); }
.th-theme-toggle .th-icon-sun { opacity: 0; transform: rotate(-90deg); }
[data-theme="dark"] .th-theme-toggle .th-icon-moon { opacity: 0; transform: rotate(90deg); }
[data-theme="dark"] .th-theme-toggle .th-icon-sun  { opacity: 1; transform: rotate(0); }

/* ---------- 5. Buttons ---------- */
body .btn {
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 0.625rem 1.1rem;
    border-radius: var(--th-radius-md);
    border: 1px solid transparent;
    transition: transform var(--th-dur-1) var(--th-ease), box-shadow var(--th-dur-2) var(--th-ease),
                background var(--th-dur-2) var(--th-ease), color var(--th-dur-2) var(--th-ease),
                border-color var(--th-dur-2) var(--th-ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
body .btn:focus-visible { box-shadow: var(--th-ring); outline: none; }
body .btn:active { transform: translateY(0); }

body .btn-primary {
    background: var(--th-gradient-primary-2);
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px rgba(79, 70, 229, 0.28);
}
body .btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 10px 22px rgba(79, 70, 229, 0.34);
}

body .btn-outline-primary {
    border: 1px solid var(--th-border-strong);
    color: var(--th-primary);
    background: var(--th-surface);
}
body .btn-outline-primary:hover {
    background: var(--th-primary);
    border-color: var(--th-primary);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--th-shadow-md);
}

body .btn-secondary {
    background: var(--th-surface-3);
    color: var(--th-text);
    border: 1px solid var(--th-border);
}
body .btn-secondary:hover {
    background: var(--th-surface-2);
    color: var(--th-text);
    border-color: var(--th-border-strong);
    transform: translateY(-1px);
}

body .btn-outline-secondary {
    color: var(--th-text-2);
    border: 1px solid var(--th-border-strong);
    background: var(--th-surface);
}
body .btn-outline-secondary:hover {
    background: var(--th-surface-3);
    color: var(--th-text);
    border-color: var(--th-border-strong);
}

body .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.28);
}
body .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}
body .btn-danger {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: #fff;
}
body .btn-info { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }

body .btn-light {
    background: var(--th-surface);
    color: var(--th-text);
    border: 1px solid var(--th-border);
}
body .btn-light:hover { background: var(--th-surface-3); color: var(--th-text); }

body .btn-link { color: var(--th-primary); text-decoration: none; padding: 0.25rem 0.5rem; }
body .btn-link:hover { color: var(--th-primary-hover); text-decoration: underline; }

.btn-ghost {
    background: transparent;
    color: var(--th-text-2);
    border: 1px solid transparent;
}
.btn-ghost:hover {
    background: var(--th-surface-3);
    color: var(--th-text);
}

.btn-glow {
    position: relative;
    isolation: isolate;
}
.btn-glow::after {
    content: '';
    position: absolute;
    inset: -4px;
    background: var(--th-gradient-primary);
    border-radius: inherit;
    filter: blur(14px);
    opacity: 0;
    z-index: -1;
    transition: opacity var(--th-dur-3) var(--th-ease);
}
.btn-glow:hover::after { opacity: 0.55; }

/* ---------- 6. Cards & surfaces ---------- */
body .card {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    box-shadow: var(--th-shadow-sm);
    transition: transform var(--th-dur-3) var(--th-ease), box-shadow var(--th-dur-3) var(--th-ease),
                border-color var(--th-dur-2) var(--th-ease), background-color var(--th-dur-3) var(--th-ease);
}
body .card:hover { box-shadow: var(--th-shadow-md); }

body .card-header {
    background: transparent;
    border-bottom: 1px solid var(--th-divider);
    padding: var(--th-space-5) var(--th-space-6);
    font-weight: 600;
    color: var(--th-text);
}
body .card-body { padding: var(--th-space-6); }

.th-surface { background: var(--th-surface); border: 1px solid var(--th-border); border-radius: var(--th-radius-lg); }
.th-surface-2 { background: var(--th-surface-2); }
.th-surface-3 { background: var(--th-surface-3); }

/* Lift hover utility */
.th-lift { transition: transform var(--th-dur-3) var(--th-ease-out), box-shadow var(--th-dur-3) var(--th-ease); }
.th-lift:hover { transform: translateY(-4px); box-shadow: var(--th-shadow-lg); }

/* Glass card */
.th-glass {
    background: var(--th-overlay);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
}

/* Gradient border card */
.th-card-gradient {
    position: relative;
    background: var(--th-surface);
    border-radius: var(--th-radius-lg);
    padding: 1px;
    background-image: linear-gradient(var(--th-surface), var(--th-surface)),
                      var(--th-gradient-primary);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Forms */
body .form-control, body .form-select {
    background: var(--th-surface);
    border: 1px solid var(--th-border-strong);
    color: var(--th-text);
    border-radius: var(--th-radius-md);
    padding: 0.6rem 0.85rem;
    transition: border-color var(--th-dur-2) var(--th-ease), box-shadow var(--th-dur-2) var(--th-ease);
}
body .form-control::placeholder { color: var(--th-text-muted); }
body .form-control:focus, body .form-select:focus {
    border-color: var(--th-primary);
    box-shadow: var(--th-ring);
    background: var(--th-surface);
    color: var(--th-text);
}
body .form-label { color: var(--th-text-2); font-weight: 600; font-size: 0.875rem; }

body .input-group-text {
    background: var(--th-surface-3);
    border: 1px solid var(--th-border-strong);
    color: var(--th-text-3);
}

/* Tables */
body .table {
    color: var(--th-text);
    --bs-table-bg: transparent;
}
body .table thead th {
    background: var(--th-surface-3);
    color: var(--th-text-3);
    border: none;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: var(--th-space-4);
}
body .table tbody td {
    border-bottom: 1px solid var(--th-divider);
    padding: var(--th-space-4);
    color: var(--th-text-2);
}
body .table tbody tr:hover { background: var(--th-primary-soft); }

/* ---------- 7. Badges & chips ---------- */
body .badge {
    font-weight: 600;
    padding: 0.35em 0.7em;
    border-radius: var(--th-radius-pill);
    letter-spacing: 0.01em;
}
body .badge.bg-primary  { background: var(--th-primary-soft) !important; color: var(--th-primary) !important; }
body .badge.bg-secondary { background: var(--th-surface-3) !important; color: var(--th-text-2) !important; }
body .badge.bg-success  { background: rgba(16, 185, 129, 0.14) !important; color: #047857 !important; }
body .badge.bg-warning  { background: rgba(245, 158, 11, 0.14) !important; color: #b45309 !important; }
body .badge.bg-danger   { background: rgba(244, 63, 94, 0.12) !important; color: #be123c !important; }
body .badge.bg-info     { background: var(--th-accent-soft) !important; color: var(--th-teal-700) !important; }
body .badge.bg-dark     { background: var(--th-text) !important; color: var(--th-surface) !important; }
body .badge.bg-light    { background: var(--th-surface-3) !important; color: var(--th-text-2) !important; }

[data-theme="dark"] body .badge.bg-success { color: #6ee7b7 !important; }
[data-theme="dark"] body .badge.bg-warning { color: #fbbf24 !important; }
[data-theme="dark"] body .badge.bg-danger  { color: #fda4af !important; }
[data-theme="dark"] body .badge.bg-info    { color: #67e8f9 !important; }

.th-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    background: var(--th-surface-3);
    border: 1px solid var(--th-border);
    color: var(--th-text-2);
    border-radius: var(--th-radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all var(--th-dur-2) var(--th-ease);
    text-decoration: none;
}
.th-chip:hover {
    background: var(--th-primary-soft);
    color: var(--th-primary);
    border-color: var(--th-indigo-200);
}
.th-chip.active,
.th-chip[aria-pressed="true"] {
    background: var(--th-primary);
    color: #fff;
    border-color: var(--th-primary);
}
.th-chip-lg { padding: 0.5rem 1rem; font-size: 0.9rem; }

.th-kbd {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    background: var(--th-surface-3);
    border: 1px solid var(--th-border-strong);
    border-bottom-width: 2px;
    padding: 0.1rem 0.4rem;
    border-radius: var(--th-radius-xs);
    color: var(--th-text-2);
}

/* ---------- 8. Alerts ---------- */
body .alert {
    border: 1px solid var(--th-border);
    border-left-width: 4px;
    border-radius: var(--th-radius-md);
    background: var(--th-surface);
    color: var(--th-text-2);
    padding: var(--th-space-4) var(--th-space-5);
}
body .alert-primary { border-left-color: var(--th-primary); background: var(--th-primary-soft); color: var(--th-indigo-700); }
body .alert-success { border-left-color: var(--th-success); background: rgba(16, 185, 129, 0.08); color: #065f46; }
body .alert-warning { border-left-color: var(--th-warning); background: rgba(245, 158, 11, 0.08); color: #92400e; }
body .alert-danger  { border-left-color: var(--th-danger);  background: rgba(244, 63, 94, 0.08); color: #9f1239; }
body .alert-info    { border-left-color: var(--th-info);    background: var(--th-accent-soft); color: var(--th-teal-700); }

[data-theme="dark"] body .alert-primary { color: #c7d2fe; }
[data-theme="dark"] body .alert-success { color: #6ee7b7; }
[data-theme="dark"] body .alert-warning { color: #fcd34d; }
[data-theme="dark"] body .alert-danger  { color: #fda4af; }
[data-theme="dark"] body .alert-info    { color: #67e8f9; }

/* ---------- 9. Hero / gradient mesh backgrounds ---------- */
.th-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    background: var(--th-bg);
}
.th-hero::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(60% 50% at 15% 20%, rgba(99, 102, 241, 0.22) 0%, transparent 60%),
        radial-gradient(50% 40% at 85% 0%,  rgba(6, 182, 212, 0.20) 0%, transparent 60%),
        radial-gradient(45% 45% at 75% 85%, rgba(168, 85, 247, 0.18) 0%, transparent 60%);
    z-index: -1;
    filter: blur(40px);
    animation: thMeshFloat 18s ease-in-out infinite alternate;
}
[data-theme="dark"] .th-hero::before {
    background:
        radial-gradient(60% 50% at 15% 20%, rgba(99, 102, 241, 0.35) 0%, transparent 60%),
        radial-gradient(50% 40% at 85% 0%,  rgba(6, 182, 212, 0.28) 0%, transparent 60%),
        radial-gradient(45% 45% at 75% 85%, rgba(168, 85, 247, 0.28) 0%, transparent 60%);
}
.th-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--th-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--th-border) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 75%);
    opacity: 0.55;
    z-index: -1;
}

@keyframes thMeshFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -3%, 0) scale(1.04); }
    100% { transform: translate3d(-2%, 3%, 0) scale(1); }
}

.th-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-pill);
    color: var(--th-text-2);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: var(--th-shadow-sm);
}
.th-eyebrow .th-eyebrow-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--th-gradient-primary);
    box-shadow: 0 0 0 4px var(--th-primary-soft);
}

.th-hero-title {
    font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--th-text);
    margin-bottom: 1rem;
}
.th-hero-title .th-grad {
    background: var(--th-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.th-hero-subtitle {
    font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
    line-height: 1.65;
    color: var(--th-text-2);
    max-width: 38rem;
    margin-bottom: 2rem;
}

/* ---------- 10. Section helpers ---------- */
.th-section { padding: clamp(3rem, 5vw, 5rem) 0; }
.th-section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--th-primary);
    margin-bottom: var(--th-space-3);
}
.th-section-title {
    font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--th-text);
    margin-bottom: var(--th-space-3);
}
.th-section-lede {
    font-size: 1.05rem;
    color: var(--th-text-3);
    max-width: 38rem;
    line-height: 1.65;
}

/* ---------- 11. Tool / feature cards ---------- */
.th-tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-6);
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    color: inherit;
    transition: transform var(--th-dur-3) var(--th-ease-out),
                box-shadow var(--th-dur-3) var(--th-ease),
                border-color var(--th-dur-2) var(--th-ease);
}
.th-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--th-shadow-lg);
    border-color: var(--th-border-strong);
    color: inherit;
}
.th-tool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--th-gradient-primary);
    opacity: 0;
    transform: scaleX(0.4);
    transform-origin: center;
    transition: opacity var(--th-dur-3) var(--th-ease), transform var(--th-dur-3) var(--th-ease);
}
.th-tool-card:hover::before { opacity: 1; transform: scaleX(1); }

.th-tool-icon {
    width: 48px; height: 48px;
    border-radius: var(--th-radius-md);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--th-primary-soft);
    color: var(--th-primary);
    font-size: 1.25rem;
    margin-bottom: var(--th-space-4);
    transition: transform var(--th-dur-3) var(--th-ease-spring), background var(--th-dur-2) var(--th-ease);
}
.th-tool-card:hover .th-tool-icon {
    transform: scale(1.08) rotate(-4deg);
}
.th-tool-icon.is-teal { background: var(--th-accent-soft); color: var(--th-teal-600); }
.th-tool-icon.is-purple { background: var(--th-highlight-soft); color: var(--th-purple-600); }
.th-tool-icon.is-amber { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.th-tool-icon.is-emerald { background: rgba(16, 185, 129, 0.14); color: #047857; }
.th-tool-icon.is-rose { background: rgba(244, 63, 94, 0.12); color: #be123c; }
[data-theme="dark"] .th-tool-icon.is-amber { color: #fcd34d; }
[data-theme="dark"] .th-tool-icon.is-emerald { color: #6ee7b7; }
[data-theme="dark"] .th-tool-icon.is-rose { color: #fda4af; }

.th-tool-card h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--th-text);
    margin-bottom: var(--th-space-2);
    letter-spacing: -0.015em;
}
.th-tool-card p {
    color: var(--th-text-3);
    font-size: 0.9rem;
    margin-bottom: var(--th-space-4);
    line-height: 1.55;
}
.th-tool-card .th-tool-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--th-primary);
    margin-top: auto;
}
.th-tool-card:hover .th-tool-cta i { transform: translateX(3px); }
.th-tool-card .th-tool-cta i { transition: transform var(--th-dur-2) var(--th-ease); }

/* ---------- 12. Stats / pill chips ---------- */
.th-stat {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-5);
}
.th-stat-value {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--th-text);
    line-height: 1;
}
.th-stat-label {
    font-size: 0.8125rem;
    color: var(--th-text-3);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: var(--th-space-2);
}

/* ---------- 13. News card (carousel) ---------- */
.th-news-card {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    overflow: hidden;
    height: 100%;
    transition: transform var(--th-dur-3) var(--th-ease-out), box-shadow var(--th-dur-3) var(--th-ease), border-color var(--th-dur-2) var(--th-ease);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.th-news-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--th-shadow-lg);
    border-color: var(--th-border-strong);
    color: inherit;
}
.th-news-media {
    position: relative;
    height: 168px;
    background: linear-gradient(135deg, var(--th-primary-soft), var(--th-accent-soft));
    overflow: hidden;
}
.th-news-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform var(--th-dur-5) var(--th-ease-out);
}
.th-news-card:hover .th-news-media img { transform: scale(1.06); }
.th-news-media .th-news-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.55));
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.th-news-body { padding: var(--th-space-5); display: flex; flex-direction: column; flex: 1; }
.th-news-body h6 { color: var(--th-text); font-size: 1rem; font-weight: 600; line-height: 1.4; margin-bottom: var(--th-space-3); }
.th-news-meta { display: flex; align-items: center; justify-content: space-between; color: var(--th-text-muted); font-size: 0.8125rem; margin-top: auto; }

/* ---------- 14. Forum / thread list ---------- */
.th-thread-list { display: flex; flex-direction: column; gap: var(--th-space-3); }
.th-thread {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-md);
    padding: var(--th-space-5);
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: var(--th-space-5);
    transition: border-color var(--th-dur-2) var(--th-ease), box-shadow var(--th-dur-2) var(--th-ease), transform var(--th-dur-2) var(--th-ease);
}
.th-thread:hover { border-color: var(--th-border-strong); box-shadow: var(--th-shadow-sm); }
.th-thread-stats { display: flex; flex-direction: column; gap: var(--th-space-2); align-items: stretch; }
.th-stat-pill {
    text-align: center;
    padding: var(--th-space-2);
    border-radius: var(--th-radius-sm);
    background: var(--th-surface-3);
    color: var(--th-text-2);
    font-size: 0.75rem;
}
.th-stat-pill strong {
    display: block;
    font-size: 1rem;
    color: var(--th-text);
    line-height: 1;
    margin-bottom: 2px;
}
.th-stat-pill.is-answered { background: rgba(16, 185, 129, 0.10); color: #047857; }
.th-stat-pill.is-answered strong { color: #047857; }
.th-stat-pill.is-needed { background: rgba(245, 158, 11, 0.10); color: #b45309; }
.th-stat-pill.is-needed strong { color: #b45309; }
[data-theme="dark"] .th-stat-pill.is-answered { color: #6ee7b7; }
[data-theme="dark"] .th-stat-pill.is-answered strong { color: #6ee7b7; }
[data-theme="dark"] .th-stat-pill.is-needed { color: #fcd34d; }
[data-theme="dark"] .th-stat-pill.is-needed strong { color: #fcd34d; }

.th-thread-title {
    font-size: 1.075rem;
    font-weight: 600;
    color: var(--th-text);
    line-height: 1.45;
    margin-bottom: var(--th-space-2);
}
.th-thread-title a { color: inherit; text-decoration: none; }
.th-thread-title a:hover { color: var(--th-primary); }
.th-thread-excerpt {
    color: var(--th-text-3);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: var(--th-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.th-thread-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--th-space-3);
}
.th-thread-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.th-thread-meta { font-size: 0.8125rem; color: var(--th-text-muted); display: inline-flex; align-items: center; gap: 0.5rem; }
.th-thread-avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--th-gradient-primary);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}

@media (max-width: 640px) {
    .th-thread { grid-template-columns: 1fr; }
    .th-thread-stats { flex-direction: row; }
}

/* ---------- 15. Marketplace / company cards ---------- */
.th-mkt-card {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-5);
    height: 100%;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--th-space-3);
    transition: transform var(--th-dur-3) var(--th-ease-out), box-shadow var(--th-dur-3) var(--th-ease), border-color var(--th-dur-2) var(--th-ease);
}
.th-mkt-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--th-shadow-lg);
    border-color: var(--th-border-strong);
    color: inherit;
}
.th-mkt-head { display: flex; align-items: flex-start; gap: var(--th-space-3); }
.th-mkt-logo {
    width: 56px; height: 56px;
    border-radius: var(--th-radius-md);
    object-fit: cover;
    background: var(--th-surface-3);
    border: 1px solid var(--th-border);
    flex-shrink: 0;
}
.th-mkt-logo-fallback {
    width: 56px; height: 56px;
    border-radius: var(--th-radius-md);
    background: var(--th-gradient-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1.4rem;
    flex-shrink: 0;
    letter-spacing: -0.02em;
}
.th-mkt-name { color: var(--th-text); font-weight: 700; font-size: 1.025rem; margin-bottom: 2px; }
.th-mkt-type { color: var(--th-text-muted); font-size: 0.8125rem; }
.th-mkt-desc {
    color: var(--th-text-3);
    font-size: 0.875rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}
.th-mkt-foot { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; padding-top: var(--th-space-3); border-top: 1px solid var(--th-divider); }

/* ---------- 16. Verified / featured badges ---------- */
.th-badge-verified {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--th-accent-soft);
    color: var(--th-teal-700);
    border-radius: var(--th-radius-pill);
    font-size: 0.75rem; font-weight: 600;
}
.th-badge-featured {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(244,63,94,0.15));
    color: #b45309;
    border-radius: var(--th-radius-pill);
    font-size: 0.75rem; font-weight: 600;
}
[data-theme="dark"] .th-badge-verified { color: #67e8f9; }
[data-theme="dark"] .th-badge-featured { color: #fbbf24; }

/* ---------- 17. Search bar (Stripe-style) ---------- */
.th-search-hero {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-xl);
    padding: var(--th-space-3);
    box-shadow: var(--th-shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--th-space-3);
    max-width: 720px;
}
.th-search-hero .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 1.05rem;
    padding: 0.5rem 0.5rem;
}
.th-search-hero .form-control:focus { box-shadow: none; }
.th-search-hero .th-search-icon {
    width: 38px; height: 38px;
    background: var(--th-primary-soft);
    color: var(--th-primary);
    border-radius: var(--th-radius-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

/* ---------- 18. Sidebar (tools dashboard) ---------- */
.th-sidebar {
    background: var(--th-surface);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    padding: var(--th-space-5);
    position: sticky;
    top: calc(var(--th-nav-height) + 16px);
}
.th-sidebar-section { margin-bottom: var(--th-space-5); }
.th-sidebar-section:last-child { margin-bottom: 0; }
.th-sidebar-heading {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--th-text-muted);
    font-weight: 700;
    padding: 0 var(--th-space-3);
    margin-bottom: var(--th-space-2);
}
.th-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: var(--th-radius-sm);
    color: var(--th-text-2);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--th-dur-1) var(--th-ease), color var(--th-dur-1) var(--th-ease);
}
.th-sidebar-link i { width: 18px; text-align: center; color: var(--th-text-muted); transition: color var(--th-dur-1) var(--th-ease); }
.th-sidebar-link:hover {
    background: var(--th-primary-soft);
    color: var(--th-primary);
}
.th-sidebar-link:hover i { color: var(--th-primary); }
.th-sidebar-link.active {
    background: var(--th-primary-soft);
    color: var(--th-primary);
    font-weight: 600;
}
.th-sidebar-link.active i { color: var(--th-primary); }

/* ---------- 19. Footer refresh ---------- */
body .footer {
    background: var(--th-text);
    color: rgba(255,255,255,0.7);
    margin-top: 0;
    border-top: 1px solid var(--th-border);
    padding: var(--th-space-10) 0 var(--th-space-6);
}
[data-theme="dark"] body .footer { background: #060816; }
body .footer h5 { color: #fff; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--th-space-5); }
body .footer a { color: rgba(255,255,255,0.65); transition: color var(--th-dur-1) var(--th-ease); }
body .footer a:hover { color: #fff; }
body .footer .footer-brand { color: #fff !important; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
body .footer .social-links a {
    background: rgba(255,255,255,0.06);
    transition: background var(--th-dur-2) var(--th-ease), color var(--th-dur-2) var(--th-ease), transform var(--th-dur-2) var(--th-ease);
}
body .footer .social-links a:hover {
    background: var(--th-primary);
    color: #fff;
    transform: translateY(-2px);
}
body .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.45);
}

/* ---------- 20. Loading skeletons ---------- */
.th-skeleton {
    background: linear-gradient(90deg, var(--th-surface-3) 25%, var(--th-border) 50%, var(--th-surface-3) 75%);
    background-size: 200% 100%;
    border-radius: var(--th-radius-sm);
    animation: thSkeleton 1.6s var(--th-ease) infinite;
}
@keyframes thSkeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---------- 21. Pagination ---------- */
body .pagination .page-link {
    background: transparent;
    color: var(--th-text-2);
    border: 1px solid transparent;
    border-radius: var(--th-radius-sm);
    margin: 0 2px;
    padding: 0.5rem 0.85rem;
    font-weight: 500;
}
body .pagination .page-link:hover { background: var(--th-primary-soft); color: var(--th-primary); }
body .pagination .page-item.active .page-link {
    background: var(--th-primary);
    color: #fff;
    border-color: var(--th-primary);
    box-shadow: var(--th-shadow-md);
}

/* ---------- 22. Modal ---------- */
body .modal-content {
    background: var(--th-surface);
    color: var(--th-text);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-lg);
    box-shadow: var(--th-shadow-xl);
}
body .modal-header { border-bottom: 1px solid var(--th-divider); }
body .modal-footer { border-top: 1px solid var(--th-divider); }
body .modal-backdrop.show { opacity: 0.55; }

/* ---------- 23. List groups ---------- */
body .list-group {
    border-radius: var(--th-radius-md);
    overflow: hidden;
    border-color: var(--th-border);
}
body .list-group-item {
    background: var(--th-surface);
    color: var(--th-text);
    border-color: var(--th-divider);
    padding: var(--th-space-4);
}
body .list-group-item-action:hover { background: var(--th-surface-3); }

/* ---------- 24. Carousel controls — premium glass pill ---------- */
.th-carousel-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 6px;
    background: var(--th-overlay);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid var(--th-border);
    border-radius: var(--th-radius-pill);
    box-shadow: var(--th-shadow-md);
}
.th-carousel-controls button {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--th-text-2);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    transition: background var(--th-dur-1) var(--th-ease), color var(--th-dur-1) var(--th-ease), transform var(--th-dur-1) var(--th-ease);
}
.th-carousel-controls button:hover {
    background: var(--th-primary-soft);
    color: var(--th-primary);
    transform: scale(1.05);
}
.th-carousel-controls button:active { transform: scale(0.94); }
.th-carousel-controls button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--th-primary);
}

.th-carousel-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
}
.th-carousel-dots .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--th-border-strong);
    border: none;
    padding: 0;
    transition: width var(--th-dur-3) var(--th-ease-spring),
                background var(--th-dur-2) var(--th-ease),
                opacity var(--th-dur-2) var(--th-ease);
    opacity: 0.55;
    cursor: pointer;
}
.th-carousel-dots .dot:hover { opacity: 0.85; }
.th-carousel-dots .dot.active {
    width: 24px;
    border-radius: 999px;
    background: var(--th-gradient-primary-2);
    opacity: 1;
}
[data-theme="dark"] .th-carousel-dots .dot { background: rgba(148, 163, 217, 0.32); }
[data-theme="dark"] .th-carousel-dots .dot.active { background: var(--th-gradient-primary-2); }

/* ---------- 25. AOS animation fallback (no-JS) ---------- */
[data-aos] { transition-property: transform, opacity; }

/* ---------- 26. Misc utilities ---------- */
.th-text-grad {
    background: var(--th-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.th-divider { height: 1px; background: var(--th-divider); border: none; margin: var(--th-space-7) 0; }
.th-bg-grid {
    background-image:
        linear-gradient(var(--th-divider) 1px, transparent 1px),
        linear-gradient(90deg, var(--th-divider) 1px, transparent 1px);
    background-size: 32px 32px;
}
.th-noise {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
    background-size: 200px 200px;
    opacity: 0.025;
    pointer-events: none;
    position: absolute; inset: 0;
}

.th-fade-in { animation: thFadeIn var(--th-dur-4) var(--th-ease-out) both; }
.th-fade-up { animation: thFadeUp var(--th-dur-5) var(--th-ease-out) both; }
@keyframes thFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes thFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.th-stagger > * { animation: thFadeUp var(--th-dur-5) var(--th-ease-out) both; }
.th-stagger > *:nth-child(1) { animation-delay: 0ms; }
.th-stagger > *:nth-child(2) { animation-delay: 60ms; }
.th-stagger > *:nth-child(3) { animation-delay: 120ms; }
.th-stagger > *:nth-child(4) { animation-delay: 180ms; }
.th-stagger > *:nth-child(5) { animation-delay: 240ms; }
.th-stagger > *:nth-child(6) { animation-delay: 300ms; }
.th-stagger > *:nth-child(7) { animation-delay: 360ms; }
.th-stagger > *:nth-child(8) { animation-delay: 420ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .th-hero::before { animation: none !important; }
}

/* ---------- 27. Dark-mode surface tweaks for legacy bits ---------- */
[data-theme="dark"] body { background: var(--th-bg); color: var(--th-text); }
[data-theme="dark"] body .bg-white { background: var(--th-surface) !important; color: var(--th-text); }
[data-theme="dark"] body .bg-light { background: var(--th-surface-2) !important; color: var(--th-text); }
[data-theme="dark"] body .bg-light.border-bottom,
[data-theme="dark"] body .bg-white.border-bottom { border-color: var(--th-border) !important; }
[data-theme="dark"] body .text-dark { color: var(--th-text) !important; }
[data-theme="dark"] body .text-muted { color: var(--th-text-3) !important; }
[data-theme="dark"] body .border, [data-theme="dark"] body .border-top, [data-theme="dark"] body .border-bottom, [data-theme="dark"] body .border-start, [data-theme="dark"] body .border-end { border-color: var(--th-border) !important; }
[data-theme="dark"] body .navbar { border-bottom-color: var(--th-border); }
[data-theme="dark"] body .navbar.bg-white { background: var(--th-overlay) !important; }
[data-theme="dark"] body .text-primary { color: var(--th-primary) !important; }
[data-theme="dark"] body .shadow, [data-theme="dark"] body .shadow-sm, [data-theme="dark"] body .shadow-lg { box-shadow: var(--th-shadow-md) !important; }
[data-theme="dark"] body .table tbody tr:hover { background: var(--th-primary-soft); }
/* Inactive nav-tabs / nav-pills text needs higher contrast against the
   plexus background — was --th-text-3 (#9aa0bd) which got washed out
   on the dark navy plus aurora glow combination. Bumped to --th-text-2. */
[data-theme="dark"] body .nav-tabs .nav-link,
[data-theme="dark"] body .nav-pills .nav-link {
    color: var(--th-text-2);
    font-weight: 500;
}
[data-theme="dark"] body .nav-tabs .nav-link:hover,
[data-theme="dark"] body .nav-pills .nav-link:hover {
    color: var(--th-text);
    background: var(--th-primary-soft);
}
[data-theme="dark"] body .nav-tabs .nav-link.active { color: var(--th-primary); background: var(--th-surface); border-color: var(--th-border) var(--th-border) var(--th-surface); }
[data-theme="dark"] body .nav-pills .nav-link.active { color: #fff; }
[data-theme="dark"] body .nav-tabs { border-bottom-color: var(--th-border); }
[data-theme="dark"] body .accordion-button, [data-theme="dark"] body .accordion-item { background: var(--th-surface); color: var(--th-text); border-color: var(--th-border); }
[data-theme="dark"] body .accordion-button:not(.collapsed) { background: var(--th-primary-soft); color: var(--th-primary); }
[data-theme="dark"] body input::placeholder, [data-theme="dark"] body textarea::placeholder { color: var(--th-text-muted) !important; }

/* News slider container background */
[data-theme="dark"] body section.py-3.bg-light { background: var(--th-surface-2) !important; border-color: var(--th-border) !important; }
[data-theme="dark"] body section.py-3.bg-light .card { background: var(--th-surface); border-color: var(--th-border); }

/* Country / status pages */
[data-theme="dark"] body .form-check-label { color: var(--th-text-2); }

/* ---------- 28. RTL micro-adjustments ---------- */
[dir="rtl"] .th-tool-card .th-tool-cta i { transform: scaleX(-1); }
[dir="rtl"] .th-tool-card:hover .th-tool-cta i { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .th-thread { grid-template-columns: 1fr 84px; }
[dir="rtl"] .th-search-hero .th-search-icon { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .th-news-media .th-news-overlay { direction: rtl; }
[dir="rtl"] .th-hero::after { mask-image: radial-gradient(ellipse 60% 50% at 50% 40%, black 0%, transparent 75%); }

/* ---------- 29. Compact spacing on small screens for new components ---------- */
@media (max-width: 768px) {
    .th-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .th-section { padding: 2.5rem 0; }
    .th-tool-card, .th-mkt-card, .th-news-body { padding: var(--th-space-4); }
    .th-sidebar { position: static; }
    .th-search-hero { padding: var(--th-space-2); }
}

/* =====================================================================
   30. AGGRESSIVE DARK-MODE OVERRIDES
   (every widget/component the legacy app left hard-coded white)
   ===================================================================== */

/* --- 30.1 Tracy / AgentChat (CSS vars defined inline in the view) --- */
[data-theme="dark"] .tracy-page,
[data-theme="dark"] body:has(.tracy-page) {
    --tracy-surface: var(--th-surface);
    --tracy-bg: var(--th-bg-subtle);
    --tracy-border: var(--th-border);
    --tracy-text: var(--th-text);
    --tracy-text-muted: var(--th-text-3);
    --tracy-assistant-bg: var(--th-surface-2);
}
[data-theme="dark"] body { background: var(--th-bg); }
[data-theme="dark"] .tracy-shell { box-shadow: var(--th-shadow-lg); }
[data-theme="dark"] .tracy-body::-webkit-scrollbar-thumb { background: var(--th-border-strong) !important; }
[data-theme="dark"] .tracy-suggestions button {
    background: var(--th-surface-2) !important;
    color: var(--th-primary) !important;
    border-color: var(--th-border-strong) !important;
}
[data-theme="dark"] .tracy-suggestions button:hover {
    background: var(--th-primary-soft) !important;
}
[data-theme="dark"] .tracy-composer { background: var(--th-surface) !important; }
[data-theme="dark"] .tracy-composer-row {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border-strong) !important;
}
[data-theme="dark"] .tracy-composer-row:focus-within {
    background: var(--th-surface) !important;
}
[data-theme="dark"] .tracy-composer-row textarea::placeholder { color: var(--th-text-muted) !important; }
[data-theme="dark"] .tracy-empty .big-avatar { border-color: var(--th-border-strong); }
[data-theme="dark"] .tracy-msg.assistant .tracy-msg-avatar { border-color: var(--th-border-strong); }
[data-theme="dark"] .tracy-bubble code {
    background: rgba(255,255,255,0.06);
    color: var(--th-text);
}
[data-theme="dark"] .tracy-typing span { background: var(--th-text-3); }

/* --- 30.2 Quill rich text editor (snow theme) --- */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
    border-color: var(--th-border-strong) !important;
    background: var(--th-surface);
    color: var(--th-text);
}
.ql-toolbar.ql-snow { background: var(--th-surface-3); }
.ql-editor {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    min-height: 200px;
}
.ql-editor.ql-blank::before { color: var(--th-text-muted) !important; font-style: normal; }

.ql-snow .ql-stroke { stroke: var(--th-text-2) !important; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--th-text-2) !important; }
.ql-snow .ql-picker { color: var(--th-text-2) !important; }
.ql-snow .ql-picker-options { background: var(--th-surface) !important; border-color: var(--th-border) !important; box-shadow: var(--th-shadow-md); }
.ql-snow .ql-picker-item:hover, .ql-snow .ql-picker-label:hover { color: var(--th-primary) !important; }
.ql-snow .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--th-primary) !important; }
.ql-snow .ql-picker-item:hover .ql-fill,
.ql-snow .ql-picker-label:hover .ql-fill { fill: var(--th-primary) !important; }
.ql-snow .ql-active .ql-stroke,
.ql-snow button:hover .ql-stroke { stroke: var(--th-primary) !important; }
.ql-snow .ql-active .ql-fill,
.ql-snow button:hover .ql-fill { fill: var(--th-primary) !important; }
.ql-snow .ql-tooltip {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
    box-shadow: var(--th-shadow-lg);
}
.ql-snow .ql-tooltip input[type=text] {
    background: var(--th-surface-2) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border-strong) !important;
}

/* --- 30.3 Toastr notifications --- */
[data-theme="dark"] .toast {
    background-color: var(--th-surface) !important;
    color: var(--th-text);
    box-shadow: var(--th-shadow-lg) !important;
}
[data-theme="dark"] #toast-container > .toast-success { background-color: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7; }
[data-theme="dark"] #toast-container > .toast-error   { background-color: rgba(244, 63, 94, 0.18) !important; color: #fda4af; }
[data-theme="dark"] #toast-container > .toast-info    { background-color: var(--th-primary-soft) !important; color: var(--th-primary); }
[data-theme="dark"] #toast-container > .toast-warning { background-color: rgba(245, 158, 11, 0.18) !important; color: #fcd34d; }

/* --- 30.4 Select2 (used in admin country picker) --- */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background: var(--th-surface) !important;
    border-color: var(--th-border-strong) !important;
    color: var(--th-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--th-text) !important; }
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--th-surface-2) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}
[data-theme="dark"] .select2-container--default .select2-results__option { color: var(--th-text); background: var(--th-surface); }
[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--th-primary) !important;
    color: #fff !important;
}
[data-theme="dark"] .select2-dropdown { background: var(--th-surface) !important; border-color: var(--th-border) !important; }

/* --- 30.5 Bootstrap bg-white / bg-light tones --- */
[data-theme="dark"] body .bg-white,
[data-theme="dark"] body .bg-body,
[data-theme="dark"] body .bg-body-tertiary { background-color: var(--th-surface) !important; color: var(--th-text); }
[data-theme="dark"] body .bg-light { background-color: var(--th-surface-2) !important; color: var(--th-text); }
[data-theme="dark"] body .text-bg-light { background-color: var(--th-surface-2) !important; color: var(--th-text) !important; }
[data-theme="dark"] body .border-light { border-color: var(--th-border) !important; }

/* Form helpers */
[data-theme="dark"] body .input-group-text {
    background: var(--th-surface-2) !important;
    color: var(--th-text-3) !important;
    border-color: var(--th-border-strong) !important;
}
[data-theme="dark"] body .form-check-input {
    background-color: var(--th-surface-2);
    border-color: var(--th-border-strong);
}
[data-theme="dark"] body .form-check-input:checked {
    background-color: var(--th-primary);
    border-color: var(--th-primary);
}

/* Tables and stripes */
[data-theme="dark"] body .table { color: var(--th-text); --bs-table-bg: transparent; }
[data-theme="dark"] body .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--th-text);
    border-bottom-color: var(--th-divider);
}
[data-theme="dark"] body .table thead th {
    background-color: var(--th-surface-2) !important;
    color: var(--th-text-3) !important;
}
[data-theme="dark"] body .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--th-surface-2) !important; }
[data-theme="dark"] body .table-hover > tbody > tr:hover > * { background-color: var(--th-primary-soft) !important; }

/* Cards / list groups inside containers */
[data-theme="dark"] body .card-img-top { background: var(--th-surface-2); }
[data-theme="dark"] body .card-footer { background-color: transparent; border-top-color: var(--th-divider); }
[data-theme="dark"] body .breadcrumb { background: transparent; }
[data-theme="dark"] body .breadcrumb-item, [data-theme="dark"] body .breadcrumb-item.active { color: var(--th-text-3); }

/* Tabs (used on the new unified pages) */
body .nav-tabs {
    border-bottom: 1px solid var(--th-border);
    gap: 0.25rem;
}
body .nav-tabs .nav-link {
    background: transparent;
    border: none;
    color: var(--th-text-2);
    padding: 0.7rem 1.1rem;
    font-weight: 600;
    border-radius: var(--th-radius-sm) var(--th-radius-sm) 0 0;
    transition: all var(--th-dur-2) var(--th-ease);
    position: relative;
}
/* Dark mode: bump inactive nav-tabs / nav-pills to FULL text colour so they
   read clearly against the dark plexus background. !important to win over
   any later Bootstrap utility overrides. */
[data-theme="dark"] body .nav-tabs .nav-link:not(.active),
[data-theme="dark"] body .nav-pills .nav-link:not(.active) {
    color: var(--th-text) !important;
    opacity: 0.85;
}
[data-theme="dark"] body .nav-tabs .nav-link:not(.active):hover,
[data-theme="dark"] body .nav-pills .nav-link:not(.active):hover {
    color: #fff !important;
    opacity: 1;
}
body .nav-tabs .nav-link:hover { color: var(--th-text); background: var(--th-primary-soft); }
body .nav-tabs .nav-link.active {
    color: var(--th-primary);
    background: transparent;
    border: none;
}
body .nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--th-gradient-primary);
    border-radius: 2px;
}
[dir="rtl"] body .nav-tabs .nav-link.active::after { left: 0; right: 0; }

/* Pills */
body .nav-pills .nav-link {
    color: var(--th-text-2);
    border-radius: var(--th-radius-pill);
    padding: 0.5rem 0.9rem;
    font-weight: 600;
}
body .nav-pills .nav-link.active { background: var(--th-primary); color: #fff; }

/* --- 30.6 Custom CSS file widgets that ignore the theme --- */
/* aggregation-builder.css */
[data-theme="dark"] .packaging-item, [data-theme="dark"] .level-section, [data-theme="dark"] .aggregation-zone {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text);
}

/* market-insights.css tooltips */
[data-theme="dark"] .market-insights-tooltip,
[data-theme="dark"] .market-insights-tooltip .tooltip-header,
[data-theme="dark"] .market-insights-tooltip .tooltip-section.tt-status {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

/* chat-widget.css (support chat) */
[data-theme="dark"] .chat-widget,
[data-theme="dark"] .chat-window,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-input-area {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] .support-widget-window,
[data-theme="dark"] .support-widget-window * {
    color-scheme: dark;
}
[data-theme="dark"] .support-widget-window {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] .support-option {
    background: var(--th-surface-2) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] .support-option:hover { background: var(--th-primary-soft) !important; }

/* finger-guide.css (Driver.js popover) */
[data-theme="dark"] .driver-popover {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] .driver-popover-title { color: var(--th-text) !important; }
[data-theme="dark"] .driver-popover-description { color: var(--th-text-2) !important; }
[data-theme="dark"] .driver-popover-arrow-side-top { border-top-color: var(--th-surface) !important; }
[data-theme="dark"] .driver-popover-arrow-side-bottom { border-bottom-color: var(--th-surface) !important; }
[data-theme="dark"] .driver-popover-arrow-side-left { border-left-color: var(--th-surface) !important; }
[data-theme="dark"] .driver-popover-arrow-side-right { border-right-color: var(--th-surface) !important; }

/* --- 30.7 Login / Register / Account pages (bg-light backgrounds) --- */
[data-theme="dark"] body .auth-page,
[data-theme="dark"] body main { background: var(--th-bg); }

/* --- 30.8 Modal close button visibility in dark mode --- */
[data-theme="dark"] body .btn-close {
    filter: invert(1) grayscale(100%) brightness(2);
}
[data-theme="dark"] body .btn-close.btn-close-white { filter: none; }

/* --- 30.9 Accordion --- */
[data-theme="dark"] body .accordion-button::after {
    filter: invert(1) brightness(2);
}
[data-theme="dark"] body .accordion-button:not(.collapsed)::after { filter: none; }

/* --- 30.10 Code blocks (always readable, never invert) --- */
[data-theme="dark"] body pre, [data-theme="dark"] body code {
    background: var(--th-surface-2);
    color: #f8fafc;
    border: 1px solid var(--th-border);
}

/* --- 30.11 Sponsor badges / verified pills --- */
[data-theme="dark"] body .th-badge-featured {
    background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(244,63,94,0.18));
    color: #fcd34d;
}
[data-theme="dark"] body .th-badge-verified {
    background: rgba(6, 182, 212, 0.16);
    color: #67e8f9;
}

/* --- 30.12 Important Announcement modal (gradient header) --- */
[data-theme="dark"] body .important-announcement-modal .modal-body { background: var(--th-surface); color: var(--th-text); }
[data-theme="dark"] body .important-announcement-modal .modal-footer { background: var(--th-surface); border-top-color: var(--th-divider); }

/* --- 30.13 Carousel arrows (keep readable on dark) --- */
[data-theme="dark"] body .carousel-control-prev-icon,
[data-theme="dark"] body .carousel-control-next-icon { filter: brightness(1.4); }

/* --- 30.14 Misc legacy: text colors set directly --- */
[data-theme="dark"] body [style*="color: #fff"],
[data-theme="dark"] body [style*="color:#fff"],
[data-theme="dark"] body [style*="color: white"],
[data-theme="dark"] body [style*="color:white"] { /* allow inline white when explicit (e.g. on gradient surfaces) */ }
[data-theme="dark"] body [style*="background: #fff"]:not(.th-no-dark-override),
[data-theme="dark"] body [style*="background:#fff"]:not(.th-no-dark-override),
[data-theme="dark"] body [style*="background: white"]:not(.th-no-dark-override),
[data-theme="dark"] body [style*="background:white"]:not(.th-no-dark-override) {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
}

/* --- 30.15 Theme toggle button in dark mode --- */
[data-theme="dark"] .th-theme-toggle {
    background: var(--th-surface-2);
    border-color: var(--th-border-strong);
    color: var(--th-text-2);
}
[data-theme="dark"] .th-theme-toggle:hover {
    background: var(--th-primary-soft);
    color: var(--th-primary);
}

/* =====================================================================
   31. SECOND-PASS BLEED FIXES
   (every concrete element the runtime detector flagged in dark mode)
   ===================================================================== */

/* --- 31.1 Quill toolbar/container — beat CDN + inline styles with !important --- */
[data-theme="dark"] .ql-toolbar.ql-snow,
[data-theme="dark"] .ql-container.ql-snow {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border-strong) !important;
}
[data-theme="dark"] .ql-toolbar.ql-snow { background: var(--th-surface-3) !important; }
[data-theme="dark"] .ql-editor { background: var(--th-surface) !important; color: var(--th-text) !important; }
/* The view <div id="quillEditor"> wrapper sometimes has inline bg too */
[data-theme="dark"] div[id$="Editor"][id*="Editor"]:not([id*="-"]):not([data-th-real-editor]) {
    background: var(--th-surface) !important;
}
/* Legacy direct overrides for the wrappers we know about */
[data-theme="dark"] #quillEditor,
[data-theme="dark"] #answerEditor,
[data-theme="dark"] #answerArEditor,
[data-theme="dark"] #techSpecsEditor,
[data-theme="dark"] #contentEditor,
[data-theme="dark"] #descriptionEditor {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
}

/* --- 31.2 Bootstrap pagination links (.page-link still showed white in dark) --- */
body .pagination .page-link {
    background-color: transparent;
    border-color: var(--th-border);
    color: var(--th-text-2);
}
[data-theme="dark"] body .pagination .page-link {
    background-color: var(--th-surface-2) !important;
    border-color: var(--th-border) !important;
    color: var(--th-text-2) !important;
}
[data-theme="dark"] body .pagination .page-link:hover {
    background-color: var(--th-primary-soft) !important;
    color: var(--th-primary) !important;
}
[data-theme="dark"] body .pagination .page-item.active .page-link {
    background-color: var(--th-primary) !important;
    color: #fff !important;
    border-color: var(--th-primary) !important;
}
[data-theme="dark"] body .pagination .page-item.disabled .page-link {
    background-color: var(--th-surface-2) !important;
    color: var(--th-text-muted) !important;
}

/* --- 31.3 Status indicators (.status-operational etc.) — legacy hardcoded greens/etc. --- */
[data-theme="dark"] body .status-indicator { background-color: var(--th-surface-2) !important; }
[data-theme="dark"] body .status-operational {
    background-color: rgba(16, 185, 129, 0.16) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] body .status-degraded {
    background-color: rgba(245, 158, 11, 0.16) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] body .status-outage {
    background-color: rgba(244, 63, 94, 0.16) !important;
    color: #fda4af !important;
}

/* --- 31.4 Pricing CTA box --- */
[data-theme="dark"] body .pricing-cta {
    background-color: var(--th-surface-2) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

/* --- 31.5 Map container (Leaflet) and view-toggle buttons --- */
[data-theme="dark"] #regulationMapContainer,
[data-theme="dark"] .leaflet-container {
    background: var(--th-surface-2) !important;
}
/* Leaflet UI chrome: zoom controls + legend + attribution + popups */
[data-theme="dark"] .leaflet-control-zoom a,
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-bar a:hover {
    background-color: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-bottom-color: var(--th-border) !important;
}
[data-theme="dark"] .leaflet-bar { border: 1px solid var(--th-border) !important; box-shadow: var(--th-shadow-md); }
[data-theme="dark"] .leaflet-control-attribution,
[data-theme="dark"] .leaflet-control-attribution a,
[data-theme="dark"] .map-legend.leaflet-control,
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip,
[data-theme="dark"] .leaflet-tooltip {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] body #viewCardBtn,
[data-theme="dark"] body #viewMapBtn,
[data-theme="dark"] body .view-toggle-btn {
    background-color: var(--th-surface) !important;
    color: var(--th-text-2) !important;
    border-color: var(--th-border-strong) !important;
}
[data-theme="dark"] body #viewCardBtn.active,
[data-theme="dark"] body #viewMapBtn.active,
[data-theme="dark"] body .view-toggle-btn.active {
    background-color: var(--th-primary) !important;
    color: #fff !important;
    border-color: var(--th-primary) !important;
}

/* --- 31.6 Event Generator "Analyze Output" button (uses bg-light) --- */
[data-theme="dark"] body #analyzeOutput,
[data-theme="dark"] body button.bg-light,
[data-theme="dark"] body a.bg-light {
    background-color: var(--th-surface-2) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

/* --- 31.7 Tracy avatar + glossary hero-logo backgrounds (showed white edges) --- */
[data-theme="dark"] .tracy-avatar,
[data-theme="dark"] .tracy-empty .big-avatar,
[data-theme="dark"] .tracy-msg.assistant .tracy-msg-avatar {
    background-color: var(--th-surface-2) !important;
}
[data-theme="dark"] .hero-logo { background-color: transparent !important; }

/* --- 31.8 Legacy CSS files — chat-widget.css, support-chat-widget.css,
       glossary.css, market-insights.css, aggregation-builder.css.
       Each defines hardcoded `background: white;` for surfaces. Override globally. --- */
[data-theme="dark"] .chat-window,
[data-theme="dark"] .chat-messages,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-input,
[data-theme="dark"] .chat-input-area,
[data-theme="dark"] .chat-input textarea,
[data-theme="dark"] .chat-suggestion,
[data-theme="dark"] .chat-message.assistant {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] .chat-input textarea::placeholder { color: var(--th-text-muted) !important; }

[data-theme="dark"] .support-widget-window .support-header,
[data-theme="dark"] .support-widget-window .support-body,
[data-theme="dark"] .support-widget-window .support-footer,
[data-theme="dark"] .support-widget-window .support-message,
[data-theme="dark"] .support-widget-window .support-question-text,
[data-theme="dark"] .support-contact-form input,
[data-theme="dark"] .support-contact-form textarea,
[data-theme="dark"] .support-contact-form select {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

[data-theme="dark"] .glossary-page,
[data-theme="dark"] .glossary-page .gl-card,
[data-theme="dark"] .glossary-page .gl-term-card,
[data-theme="dark"] .glossary-page .gl-letter-section,
[data-theme="dark"] .glossary-page .gl-sidebar,
[data-theme="dark"] .glossary-page .hero,
[data-theme="dark"] .glossary-page .gl-filter,
[data-theme="dark"] .glossary-auth-banner-cta--ghost {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

[data-theme="dark"] .market-insights-card,
[data-theme="dark"] .market-insights-header,
[data-theme="dark"] .market-insights-card .stat-box,
[data-theme="dark"] .market-insights-card .compare-row {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

[data-theme="dark"] .packaging-item,
[data-theme="dark"] .level-section,
[data-theme="dark"] .aggregation-zone,
[data-theme="dark"] .stat-card {
    background: var(--th-surface) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

/* --- 31.9 Linear-gradient fade-to-white overlays (KnowledgeBase article, RegulationHub news) --- */
[data-theme="dark"] body [style*="linear-gradient(transparent, white)"] {
    background: linear-gradient(transparent, var(--th-bg)) !important;
}
[data-theme="dark"] body [style*="linear-gradient(transparent,white)"] {
    background: linear-gradient(transparent, var(--th-bg)) !important;
}

/* --- 31.10 Catch-all for any remaining inline `background: #fff` or white --- */
[data-theme="dark"] body [style*="background:#fff"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background: #fff"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background:white"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background: white"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background-color:#fff"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background-color: #fff"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background-color:white"]:not([class*="tracy-"]),
[data-theme="dark"] body [style*="background-color: white"]:not([class*="tracy-"]) {
    background-color: var(--th-surface) !important;
}

/* --- 31.11 Bootstrap-specific dark fixes that 30.5 missed --- */
[data-theme="dark"] body .border-end-0, [data-theme="dark"] body .border-start-0,
[data-theme="dark"] body .border-top-0, [data-theme="dark"] body .border-bottom-0 { border-color: var(--th-border) !important; }
[data-theme="dark"] body .text-black,
[data-theme="dark"] body .text-body { color: var(--th-text) !important; }
[data-theme="dark"] body .bg-body,
[data-theme="dark"] body .bg-body-tertiary,
[data-theme="dark"] body .bg-body-secondary { background-color: var(--th-surface) !important; }

/* --- 31.12 Bootstrap "list-group" items in dark --- */
[data-theme="dark"] body .list-group-item-light,
[data-theme="dark"] body .list-group-item-action.active {
    background-color: var(--th-primary-soft) !important;
    color: var(--th-primary) !important;
    border-color: var(--th-border) !important;
}

/* =====================================================================
   32. RICH-TEXT CONTENT readability in dark mode.
   Stored HTML from the Quill admin editor often carries inline color
   attributes that were written for light mode. Override every
   common text-level element inside known content containers so it
   stays readable no matter what the stored HTML says.
   ===================================================================== */
[data-theme="dark"] body .article-content,
[data-theme="dark"] body .rich-content,
[data-theme="dark"] body .post-body,
[data-theme="dark"] body .ql-editor,
[data-theme="dark"] body .article-content *,
[data-theme="dark"] body .rich-content *,
[data-theme="dark"] body .post-body *,
[data-theme="dark"] body .ql-editor * {
    color: var(--th-text) !important;
    background-color: transparent !important;
}
/* Headings / strong / emphasis: slightly brighter for hierarchy */
[data-theme="dark"] body .article-content h1,
[data-theme="dark"] body .article-content h2,
[data-theme="dark"] body .article-content h3,
[data-theme="dark"] body .article-content h4,
[data-theme="dark"] body .article-content h5,
[data-theme="dark"] body .article-content h6,
[data-theme="dark"] body .rich-content h1,
[data-theme="dark"] body .rich-content h2,
[data-theme="dark"] body .rich-content h3,
[data-theme="dark"] body .rich-content h4,
[data-theme="dark"] body .rich-content h5,
[data-theme="dark"] body .rich-content h6,
[data-theme="dark"] body .article-content strong,
[data-theme="dark"] body .article-content b,
[data-theme="dark"] body .rich-content strong,
[data-theme="dark"] body .rich-content b {
    color: #f1f3fa !important;
}
/* Links inside content keep brand primary */
[data-theme="dark"] body .article-content a,
[data-theme="dark"] body .rich-content a,
[data-theme="dark"] body .post-body a {
    color: var(--th-primary) !important;
    text-decoration: underline;
    text-decoration-color: rgba(129, 140, 248, 0.45);
}
[data-theme="dark"] body .article-content a:hover,
[data-theme="dark"] body .rich-content a:hover,
[data-theme="dark"] body .post-body a:hover {
    color: var(--th-primary-hover) !important;
    text-decoration-color: var(--th-primary-hover);
}
/* Code, pre and blockquote inside content */
[data-theme="dark"] body .article-content code,
[data-theme="dark"] body .rich-content code {
    background: var(--th-surface-2) !important;
    color: #fcd34d !important;
    border: 1px solid var(--th-border) !important;
}
[data-theme="dark"] body .article-content pre,
[data-theme="dark"] body .rich-content pre {
    background: var(--th-surface-2) !important;
    color: #f8fafc !important;
    border: 1px solid var(--th-border) !important;
}
[data-theme="dark"] body .article-content blockquote,
[data-theme="dark"] body .rich-content blockquote,
[data-theme="dark"] body .article-content .ql-blockquote,
[data-theme="dark"] body .rich-content .ql-blockquote {
    border-left: 3px solid var(--th-primary) !important;
    background: var(--th-surface-2) !important;
    color: var(--th-text-2) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0 var(--th-radius-sm) var(--th-radius-sm) 0;
}
/* Tables in rich content */
[data-theme="dark"] body .article-content table,
[data-theme="dark"] body .rich-content table {
    background: var(--th-surface) !important;
    border-color: var(--th-border) !important;
}
[data-theme="dark"] body .article-content th,
[data-theme="dark"] body .article-content td,
[data-theme="dark"] body .rich-content th,
[data-theme="dark"] body .rich-content td {
    border-color: var(--th-border) !important;
    color: var(--th-text) !important;
}
[data-theme="dark"] body .article-content th,
[data-theme="dark"] body .rich-content th {
    background: var(--th-surface-2) !important;
}
/* Lists */
[data-theme="dark"] body .article-content ul,
[data-theme="dark"] body .article-content ol,
[data-theme="dark"] body .rich-content ul,
[data-theme="dark"] body .rich-content ol {
    color: var(--th-text) !important;
}
/* Images inside content should not get the catch-all transparent bg
   (it's already not set for img; just be explicit) */
[data-theme="dark"] body .article-content img,
[data-theme="dark"] body .rich-content img { background: transparent !important; }
/* Hard-coded white/light backgrounds inside the stored HTML (Quill often
   keeps the text in dark + a white background block) */
[data-theme="dark"] body .article-content [style*="background"],
[data-theme="dark"] body .rich-content [style*="background"],
[data-theme="dark"] body .article-content [bgcolor],
[data-theme="dark"] body .rich-content [bgcolor] {
    background-color: transparent !important;
}
/* FAQ answers rendered inline (no wrapper class) — they live in admin/regulation
   country pages. Target the dt/dd or accordion-body containers. */
[data-theme="dark"] body .accordion-body p,
[data-theme="dark"] body .accordion-body li,
[data-theme="dark"] body .accordion-body span,
[data-theme="dark"] body .accordion-body strong,
[data-theme="dark"] body .accordion-body em {
    color: var(--th-text) !important;
}
[data-theme="dark"] body .accordion-body [style*="color"] { color: var(--th-text) !important; }

/* =====================================================================
   33. BACK BUTTON BAR — sits in normal flow above page content.
   No negative margin, no absolute positioning, never overlaps the
   page header or hero text.
   ===================================================================== */
.th-back-bar {
    position: relative;
    z-index: 5;
    padding: 1rem 0 0;
    background: transparent;
}
.th-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--th-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--th-overlay);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid var(--th-border);
    color: var(--th-text-2);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--th-dur-2) var(--th-ease),
                color var(--th-dur-2) var(--th-ease),
                border-color var(--th-dur-2) var(--th-ease),
                transform var(--th-dur-1) var(--th-ease),
                box-shadow var(--th-dur-2) var(--th-ease);
}
.th-back-btn:hover {
    background: var(--th-surface);
    color: var(--th-primary);
    border-color: var(--th-primary-soft);
    box-shadow: var(--th-shadow-sm);
    transform: translateY(-1px);
}
.th-back-btn i { font-size: 0.8rem; }

/* Hero sections that follow the back bar can pull their top padding
   in a bit so the visual rhythm stays tight. */
.th-back-bar + section.th-hero,
.th-back-bar + .th-hero { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

@media (max-width: 768px) {
    .th-back-bar { padding-top: 0.6rem; }
    .th-back-btn { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
}

/* =====================================================================
   35. AMBIENT PAGE BACKGROUND — for Learn / Regulations / Tools landings.
   Bold tri-color gradient mesh + visible plexus-style dot pattern.
   Strong enough to be clearly visible, calm enough to never compete
   with content.
   ===================================================================== */
.th-ambient-page::before {
    content: '';
    position: fixed;
    inset: -5%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(45% 40% at 14% 20%, rgba(99, 102, 241, 0.38) 0%, transparent 60%),
        radial-gradient(40% 35% at 88% 14%, rgba(6, 182, 212, 0.32) 0%, transparent 60%),
        radial-gradient(45% 40% at 75% 85%, rgba(168, 85, 247, 0.34) 0%, transparent 60%);
    filter: blur(40px);
    animation: thAmbientFloat 24s ease-in-out infinite alternate;
}
.th-ambient-page::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* plexus-style dot field with subtle connecting grid */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(129, 140, 248, 0.28) 1px, transparent 1.5px),
        linear-gradient(rgba(129, 140, 248, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129, 140, 248, 0.06) 1px, transparent 1px);
    background-size: 32px 32px, 64px 64px, 64px 64px;
    mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 40%, black 0%, transparent 75%);
    opacity: 0.5;
}
[data-theme="dark"] .th-ambient-page::before {
    background:
        radial-gradient(45% 40% at 14% 20%, rgba(99, 102, 241, 0.52) 0%, transparent 60%),
        radial-gradient(40% 35% at 88% 14%, rgba(6, 182, 212, 0.42) 0%, transparent 60%),
        radial-gradient(45% 40% at 75% 85%, rgba(168, 85, 247, 0.46) 0%, transparent 60%);
}
[data-theme="dark"] .th-ambient-page::after {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(165, 180, 252, 0.42) 1px, transparent 1.5px),
        linear-gradient(rgba(165, 180, 252, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 180, 252, 0.08) 1px, transparent 1px);
    opacity: 0.7;
}
@keyframes thAmbientFloat {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -2%, 0) scale(1.04); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .th-ambient-page::before { animation: none; }
}

/* =====================================================================
   36. PAGE HERO — modern hero pattern for non-home landing pages.
   Lighter than the home .th-hero (no own mesh), works on top of the
   ambient page background. Use:
     <section class="th-page-hero">
       <div class="container">
         <span class="th-eyebrow">...</span>
         <h1 class="th-page-hero-title">Title <span class="th-grad">word</span></h1>
         <p class="th-page-hero-lede">...</p>
       </div>
     </section>
   ===================================================================== */
.th-page-hero {
    position: relative;
    padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    background: transparent;
}
.th-page-hero-title {
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--th-text);
    margin-bottom: 1rem;
}
.th-page-hero-title .th-grad {
    background: var(--th-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.th-page-hero-lede {
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
    line-height: 1.65;
    color: var(--th-text-2);
    max-width: 42rem;
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .th-page-hero { padding-top: 1.75rem; padding-bottom: 1.5rem; }
}

/* =====================================================================
   34. HOME PLEXUS — premium animated neural-network background.
   Mounted ONLY on the home page via <div class="th-home-plexus-wrap">
   so it CANNOT appear on Community, Marketplace, Tools, Workspace,
   Admin or any other route.
   Spans the FULL home page via position:fixed, sitting behind every
   section. Section backgrounds become subtly translucent so the plexus
   is visible throughout the scroll.
   ===================================================================== */
.th-home-plexus-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* main wrapper must be positioned so the canvas can anchor properly */
main { position: relative; }

#th-plexus {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.42;
    transition: opacity var(--th-dur-3) var(--th-ease);
}
[data-theme="dark"] #th-plexus { opacity: 0.62; }

/* Soft ambient tri-color glow that breathes slowly across the whole viewport */
.th-home-plexus-wrap::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(40% 35% at 18% 26%, rgba(99, 102, 241, 0.16) 0%, transparent 60%),
        radial-gradient(35% 30% at 82% 14%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
        radial-gradient(35% 30% at 70% 78%, rgba(168, 85, 247, 0.12) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    animation: thPlexusGlow 22s ease-in-out infinite alternate;
}
[data-theme="dark"] .th-home-plexus-wrap::before {
    background:
        radial-gradient(40% 35% at 18% 26%, rgba(99, 102, 241, 0.28) 0%, transparent 60%),
        radial-gradient(35% 30% at 82% 14%, rgba(6, 182, 212, 0.22) 0%, transparent 60%),
        radial-gradient(35% 30% at 70% 78%, rgba(168, 85, 247, 0.24) 0%, transparent 60%);
}
@keyframes thPlexusGlow {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -2%, 0) scale(1.05); }
    100% { transform: translate3d(-2%, 2%, 0) scale(1); }
}

/* Kill the hero's own gradient mesh + grid on the home page so the only
   ambient color comes from the shared plexus glow — same look top→bottom.
   (Other pages with .th-hero still keep their own mesh, since the plexus
   wrap is absent there.) */
.th-home-plexus-wrap ~ section.th-hero::before { display: none !important; }
.th-home-plexus-wrap ~ section.th-hero::after  { display: none !important; }

/* Lift every following section above the plexus */
.th-home-plexus-wrap ~ section,
.th-home-plexus-wrap ~ * { position: relative; z-index: 1; }

/* Make EVERY home section see-through so the plexus shows behind them all.
   The hero has its own gradient mesh ::before; we keep that for ambience
   but kill its solid background. Same for any .th-section block. */
.th-home-plexus-wrap ~ section[style*="bg-subtle"],
.th-home-plexus-wrap ~ section.th-section,
.th-home-plexus-wrap ~ section.th-hero,
.th-home-plexus-wrap ~ section { background: transparent !important; }
/* The hero's grid pattern ::after was tied to var(--th-bg) — fade it so the
   plexus underneath is the dominant texture */
.th-home-plexus-wrap ~ section.th-hero::after { opacity: 0.18; }

/* Auth pages (Login, Register) also use the plexus background.
   The container itself isn't a <section> so we lift it explicitly. */
.th-home-plexus-wrap ~ .th-auth-page,
.th-home-plexus-wrap ~ * .th-auth-page {
    position: relative;
    z-index: 1;
}
/* Auth cards on top of the plexus: keep them solid + a soft glass border. */
.th-auth-page .card {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: var(--th-overlay) !important;
    border: 1px solid var(--th-border) !important;
    box-shadow: var(--th-shadow-xl) !important;
}

/* Body itself needs to allow the fixed canvas to show through any default bg */
body:has(.th-home-plexus-wrap) {
    background: var(--th-bg);
}

/* When user prefers reduced motion, drop animation but keep the static frame */
@media (prefers-reduced-motion: reduce) {
    .th-home-plexus-wrap::before { animation: none; }
    #th-plexus { opacity: 0.28; }
}

@media (max-width: 768px) {
    #th-plexus { opacity: 0.32; }
    [data-theme="dark"] #th-plexus { opacity: 0.5; }
}

/* =====================================================================
   37. CINEMATIC AURORA — moved inline into _Layout.cshtml so the rules
   live next to the conditional <body class="th-aurora-page"> markup.
   This block intentionally left empty (was conflicting with the body
   background-image via the `background:` shorthand reset).
   ===================================================================== */
.th-aurora-page > .th-aurora-layer {
    position: fixed;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Top spotlight only (no heavy bottom vignette — it was hiding the aurora). */
.th-aurora-page > .th-aurora-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 38% at 50% 0%, rgba(165, 180, 252, 0.22) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
:root:not([data-theme="dark"]) .th-aurora-page > .th-aurora-layer::before {
    background: radial-gradient(ellipse 70% 38% at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
}

/* Linear/Vercel-style grid, faded toward the edges. */
.th-aurora-page > .th-aurora-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(165, 180, 252, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(165, 180, 252, 0.08) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, black 25%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, black 25%, transparent 90%);
    pointer-events: none;
    z-index: 2;
}
:root:not([data-theme="dark"]) .th-aurora-page > .th-aurora-layer::after {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
}

/* Aurora blobs — large, soft, slow drift. Positioned to be clearly visible
   inside the viewport (not way off-screen). Higher opacity so they actually
   show through the deep navy base. */
.th-aurora-page .th-aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform, opacity;
    z-index: 1;
}
.th-aurora-page .th-aurora-blob--1 {
    top: 5%;
    left: 5%;
    width: clamp(380px, 38vw, 620px);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.85) 0%, rgba(99, 102, 241, 0) 70%);
    animation: thAuroraDrift1 34s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.th-aurora-page .th-aurora-blob--2 {
    top: 10%;
    right: 5%;
    width: clamp(340px, 34vw, 560px);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.75) 0%, rgba(139, 92, 246, 0) 70%);
    animation: thAuroraDrift2 40s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.th-aurora-page .th-aurora-blob--3 {
    bottom: 8%;
    left: 35%;
    width: clamp(400px, 44vw, 700px);
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.55) 0%, rgba(6, 182, 212, 0) 70%);
    animation: thAuroraDrift3 46s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}

/* Light-mode: gentler intensity. */
:root:not([data-theme="dark"]) .th-aurora-page .th-aurora-blob--1 {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.28) 0%, rgba(99, 102, 241, 0) 70%);
}
:root:not([data-theme="dark"]) .th-aurora-page .th-aurora-blob--2 {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0) 70%);
}
:root:not([data-theme="dark"]) .th-aurora-page .th-aurora-blob--3 {
    background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0) 70%);
}

/* Lift all top-level content above the fixed aurora layer. */
.th-aurora-page > main,
.th-aurora-page > header,
.th-aurora-page > footer { position: relative; z-index: 1; }

/* Section backgrounds become transparent so the aurora shows through.
   .th-page-hero / .th-hero / generic sections all sit on the aurora. */
.th-aurora-page section,
.th-aurora-page .th-page-hero,
.th-aurora-page .th-section { background: transparent !important; }
.th-aurora-page .th-page-hero::before,
.th-aurora-page .th-page-hero::after,
.th-aurora-page .th-hero::before,
.th-aurora-page .th-hero::after { display: none !important; }

@keyframes thAuroraDrift1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.95; }
    100% { transform: translate3d(5%, 7%, 0) scale(1.06); opacity: 1; }
}
@keyframes thAuroraDrift2 {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.92; }
    100% { transform: translate3d(-6%, 5%, 0) scale(1.05); opacity: 1; }
}
@keyframes thAuroraDrift3 {
    0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
    100% { transform: translate3d(4%, -4%, 0) scale(1.04); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .th-aurora-page .th-aurora-blob { animation: none !important; }
}

@media (max-width: 768px) {
    .th-aurora-page .th-aurora-blob { filter: blur(80px); }
    .th-aurora-page .th-aurora-blob--1,
    .th-aurora-page .th-aurora-blob--2,
    .th-aurora-page .th-aurora-blob--3 { width: clamp(260px, 78vw, 420px); }
}