/**
 * ============================================================================
 * UNRELIABLECODE ENTERPRISE PROFESSIONAL THEME
 * ----------------------------------------------------------------------------
 * A clean, modern, enterprise-grade developer UI theme.
 * - Liquid glass distortion & SVG displacement filters completely disabled.
 * - Optical specular fake rims and wavy artifacts removed.
 * - Replaced "AI-styled" neon glow clouds with crisp, solid surfaces,
 *   subtle borders, refined elevation, and high-contrast typography.
 * - Enabled by default across all pages.
 * ============================================================================
 */

/* 1. ROOT DESIGN TOKENS FOR PROFESSIONAL THEME */
:root[data-theme="professional"],
html[data-theme="professional"],
:root:not([data-theme="dark"]) {
    /* Base canvas and surfaces - Solid, deep slate / zinc enterprise colors */
    --bg:                 #0b0f19;
    --bg-primary:         #111827;
    --bg-secondary:       #1e293b;
    --surface-1:          #111827;
    --surface-2:          #1a2234;
    --surface-3:          #243048;
    --surface-sunk:       #070a12;
    --surface-elevated:   #1a2234;

    /* Crisp, clean borders - Real solid lines instead of transparent with neon glow */
    --border:             rgba(255, 255, 255, 0.09);
    --border-strong:      rgba(255, 255, 255, 0.16);
    --border-subtle:      rgba(255, 255, 255, 0.05);
    --border-tertiary:    rgba(255, 255, 255, 0.05);
    --border-color:       rgba(255, 255, 255, 0.09);
    --border-primary:     rgba(255, 255, 255, 0.09);
    --border-secondary:   rgba(255, 255, 255, 0.06);
    --border-glow:        none;

    /* Refined professional tech blue accent */
    --accent:             #2563eb;
    --accent-hover:       #3b82f6;
    --accent-active:      #1d4ed8;
    --accent-soft:        rgba(37, 99, 235, 0.12);
    --accent-ring:        rgba(37, 99, 235, 0.35);
    --accent-gradient:    linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --accent-gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(29, 78, 216, 0.1) 100%);
    --accent-glow:        none;
    --accent-glow-strong: none;

    /* Aliases & Semantic Palette */
    --primary:            var(--accent);
    --primary-hover:      var(--accent-hover);
    --secondary:          #475569;
    --info:               #0284c7;
    --cyan:               #0284c7;
    --cyan-soft:          rgba(2, 132, 199, 0.12);
    --cyan-glow:          none;
    --purple:             #7c3aed;
    --purple-soft:        rgba(124, 58, 237, 0.12);
    --purple-glow:        none;
    --indigo:             #4f46e5;
    --indigo-soft:        rgba(79, 70, 229, 0.12);
    --success:            #10b981;
    --success-soft:       rgba(16, 185, 129, 0.12);
    --success-glow:       none;
    --warning:            #f59e0b;
    --warning-soft:       rgba(245, 158, 11, 0.12);
    --warning-glow:       none;
    --danger:             #ef4444;
    --danger-soft:        rgba(239, 68, 68, 0.12);
    --danger-glow:        none;

    /* Liquid Glass Optics - COMPLETELY DISABLED */
    --glass-blur:         none;
    --glass-blur-heavy:   none;
    --glass-blur-subtle:  none;
    --glass-distortion:   none;
    --glass-specular-top: none;
    --glass-specular-bot: none;
    --glass-shine:        none;
    --glass-tint:         var(--surface-1);
    --glass-tint-dark:    var(--surface-1);
    --glass-tint-layer:   var(--surface-1);
    --glass-tint-image:   none;
    --glass-rim:          var(--border);

    /* Professional High-Legibility Typography */
    --text-primary:       #f8fafc;
    --text-secondary:     #94a3b8;
    --text-tertiary:      #64748b;
    --text-quaternary:    #475569;
    --text-on-accent:     #ffffff;

    /* Refined Corner Radii */
    --radius-xs:          4px;
    --radius-sm:          6px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          14px;
    --radius-2xl:         18px;
    --radius-full:        9999px;

    /* Clean Subtle Elevation Shadows (No exaggerated 96px/120px blue clouds) */
    --shadow-liquid:             0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.35);
    --shadow-liquid-glass:       0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.35);
    --shadow-liquid-glass-hover: 0 6px 16px -2px rgba(0, 0, 0, 0.45);
    --shadow-sm:                 0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --shadow-md:                 0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --shadow-lg:                 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --shadow-xl:                 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.5);

    /* Clean Spring & Transition Curves */
    --ease-spring:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-liquid:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-elastic:       cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast:             0.15s ease;
    --t-base:             0.2s ease;
    --t-slow:             0.3s ease;
    --t-spring:           0.2s ease;
}


/* 2. BODY & PAGE CANVAS STYLING */
html[data-theme="professional"],
:root:not([data-theme="dark"]) {
    background-color: #0b0f19;
    background-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.07), transparent 70%),
        linear-gradient(180deg, #0b0f19 0%, #080c14 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 100%;
}

html[data-theme="professional"] body,
:root:not([data-theme="dark"]) body {
    background-color: transparent !important;
    background-image: none !important;
    background-attachment: scroll !important;
    color: var(--text-primary, #f8fafc) !important;
}


/* Hide distracting swirling particle/portal canvases under the professional theme */
html[data-theme="professional"] #reactbits-bg,
html[data-theme="professional"] #solar-system-bg,
html[data-theme="professional"] #blackhole-bg,
html[data-theme="professional"] #portal-bg,
html[data-theme="professional"] #ambient-fx-canvas,
html[data-theme="professional"] .bg-theme-picker,
html[data-theme="professional"] .perf-advisory,
:root:not([data-theme="dark"]) #reactbits-bg,
:root:not([data-theme="dark"]) #solar-system-bg,
:root:not([data-theme="dark"]) #blackhole-bg,
:root:not([data-theme="dark"]) #portal-bg,
:root:not([data-theme="dark"]) #ambient-fx-canvas,
:root:not([data-theme="dark"]) .bg-theme-picker,
:root:not([data-theme="dark"]) .perf-advisory {
    display: none !important;
}

/* 3. COMPLETELY DISABLE LIQUID GLASS SVG FILTERS & WARPING ACROSS ALL ELEMENTS */
html[data-theme="professional"] *,
html[data-theme="professional"] *::before,
html[data-theme="professional"] *::after,
:root:not([data-theme="dark"]) *,
:root:not([data-theme="dark"]) *::before,
:root:not([data-theme="dark"]) *::after {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Remove refractive and speculative pseudo-element layers */
html[data-theme="professional"] .liquid-glass::before,
html[data-theme="professional"] .liquid-glass::after,
html[data-theme="professional"] .liquidGlass::before,
html[data-theme="professional"] .liquidGlass::after,
html[data-theme="professional"] .liquidGlass-wrapper::before,
html[data-theme="professional"] .liquidGlass-wrapper::after,
html[data-theme="professional"] [data-liquid-glass]::before,
html[data-theme="professional"] [data-liquid-glass]::after,
html[data-theme="professional"] .card::before,
html[data-theme="professional"] .card::after,
html[data-theme="professional"] .post-card::before,
html[data-theme="professional"] .post-card::after,
html[data-theme="professional"] .comment-content::before,
html[data-theme="professional"] .comment-content::after,
html[data-theme="professional"] .widget-card::before,
html[data-theme="professional"] .widget-card::after,
html[data-theme="professional"] .admin-card::before,
html[data-theme="professional"] .admin-card::after,
html[data-theme="professional"] .ticket-card::before,
html[data-theme="professional"] .ticket-card::after,
html[data-theme="professional"] .podium-card::before,
html[data-theme="professional"] .podium-card::after,
html[data-theme="professional"] .rank-info-bar::before,
html[data-theme="professional"] .rank-info-bar::after,
html[data-theme="professional"] .leaderboard-list-card::before,
html[data-theme="professional"] .leaderboard-list-card::after,
html[data-theme="professional"] .uc-topbar::before,
html[data-theme="professional"] .uc-topbar::after,
html[data-theme="professional"] .uc-category-card::before,
html[data-theme="professional"] .uc-category-card::after,
html[data-theme="professional"] .uc-post-card::before,
html[data-theme="professional"] .uc-post-card::after,
html[data-theme="professional"] .uc-quick-reply::before,
html[data-theme="professional"] .uc-quick-reply::after,
html[data-theme="professional"] .chat-container::before,
html[data-theme="professional"] .chat-container::after,
html[data-theme="professional"] .quick-hub-card::before,
html[data-theme="professional"] .quick-hub-card::after,
html[data-theme="professional"] .tl-widget-card::before,
html[data-theme="professional"] .tl-widget-card::after,
html[data-theme="professional"] .sb-kpi-card::before,
html[data-theme="professional"] .sb-kpi-card::after,
html[data-theme="professional"] .sb-card::before,
html[data-theme="professional"] .sb-card::after,
html[data-theme="professional"] #sb-sidebar::before,
html[data-theme="professional"] #sb-sidebar::after,
html[data-theme="professional"] #sb-topbar::before,
html[data-theme="professional"] #sb-topbar::after,
html[data-theme="professional"] .plan-card::before,
html[data-theme="professional"] .plan-card::after,
html[data-theme="professional"] .blog-card::before,
html[data-theme="professional"] .blog-card::after,
html[data-theme="professional"] .friend-card::before,
html[data-theme="professional"] .friend-card::after,
html[data-theme="professional"] .glow-border::before,
html[data-theme="professional"] .glow-border::after,
html[data-theme="professional"] .spotlight-card::before,
html[data-theme="professional"] .spotlight-card::after,
html[data-theme="professional"] .landing-glass-card::before,
html[data-theme="professional"] .landing-glass-card::after,
html[data-theme="professional"] .landing-auth-card::before,
html[data-theme="professional"] .landing-auth-card::after,
html[data-theme="professional"] .auth-card::before,
html[data-theme="professional"] .auth-card::after,
html[data-theme="professional"] .auth-fluid-station::before,
html[data-theme="professional"] .auth-fluid-station::after,
html[data-theme="professional"] .user-session-station::before,
html[data-theme="professional"] .user-session-station::after,
html[data-theme="professional"] .landing-downloads-container::before,
html[data-theme="professional"] .landing-downloads-container::after,
html[data-theme="professional"] .trifecta-card::before,
html[data-theme="professional"] .trifecta-card::after,
html[data-theme="professional"] .terminal-showcase-box::before,
html[data-theme="professional"] .terminal-showcase-box::after,
html[data-theme="professional"] .safe-ad-sandbox-box::before,
html[data-theme="professional"] .safe-ad-sandbox-box::after,
html[data-theme="professional"] .landing-link-card::before,
html[data-theme="professional"] .landing-link-card::after,
html[data-theme="professional"] .courses-hero::before,
html[data-theme="professional"] .courses-hero::after,
html[data-theme="professional"] .course-card::before,
html[data-theme="professional"] .course-card::after,
html[data-theme="professional"] .stat-card::before,
html[data-theme="professional"] .stat-card::after,
html[data-theme="professional"] .enrolled-course-card::before,
html[data-theme="professional"] .enrolled-course-card::after,
html[data-theme="professional"] .shorts-container::before,
html[data-theme="professional"] .shorts-container::after,
html[data-theme="professional"] .short-comments-panel::before,
html[data-theme="professional"] .short-comments-panel::after,
html[data-theme="professional"] .vid-card::before,
html[data-theme="professional"] .vid-card::after,
html[data-theme="professional"] .tl-empty::before,
html[data-theme="professional"] .tl-empty::after,
html[data-theme="professional"] .lesson-card::before,
html[data-theme="professional"] .lesson-card::after,
html[data-theme="professional"] .challenge-card::before,
html[data-theme="professional"] .challenge-card::after,
html[data-theme="professional"] .lab-card::before,
html[data-theme="professional"] .lab-card::after,
html[data-theme="professional"] .profile-header::before,
html[data-theme="professional"] .profile-header::after,
html[data-theme="professional"] .profile-stats-bar::before,
html[data-theme="professional"] .profile-stats-bar::after,
html[data-theme="professional"] .feed-filter-bar::before,
html[data-theme="professional"] .feed-filter-bar::after,
html[data-theme="professional"] .create-post-card::before,
html[data-theme="professional"] .create-post-card::after,
html[data-theme="professional"] .forum-card::before,
html[data-theme="professional"] .forum-card::after,
html[data-theme="professional"] .vps-card::before,
html[data-theme="professional"] .vps-card::after,
html[data-theme="professional"] .list-group::before,
html[data-theme="professional"] .list-group::after,
html[data-theme="professional"] .modal-content::before,
html[data-theme="professional"] .modal-content::after,
:root:not([data-theme="dark"]) .liquid-glass::before,
:root:not([data-theme="dark"]) .liquid-glass::after,
:root:not([data-theme="dark"]) .card::before,
:root:not([data-theme="dark"]) .card::after,
:root:not([data-theme="dark"]) .post-card::before,
:root:not([data-theme="dark"]) .post-card::after,
:root:not([data-theme="dark"]) .widget-card::before,
:root:not([data-theme="dark"]) .widget-card::after,
:root:not([data-theme="dark"]) .sb-card::before,
:root:not([data-theme="dark"]) .sb-card::after,
:root:not([data-theme="dark"]) #sb-sidebar::before,
:root:not([data-theme="dark"]) #sb-sidebar::after {
    display: none !important;
    content: none !important;
}

/* 4. SOLID, CRISP PROFESSIONAL SURFACES & CARDS */
html[data-theme="professional"] .liquid-glass,
html[data-theme="professional"] .liquidGlass,
html[data-theme="professional"] .liquidGlass-wrapper,
html[data-theme="professional"] [data-liquid-glass],
html[data-theme="professional"] .card,
html[data-theme="professional"] .post-card,
html[data-theme="professional"] .comment-content,
html[data-theme="professional"] .widget-card,
html[data-theme="professional"] .admin-card,
html[data-theme="professional"] .ticket-card,
html[data-theme="professional"] .podium-card,
html[data-theme="professional"] .rank-info-bar,
html[data-theme="professional"] .leaderboard-list-card,
html[data-theme="professional"] .uc-topbar,
html[data-theme="professional"] .uc-category-card,
html[data-theme="professional"] .uc-post-card,
html[data-theme="professional"] .uc-quick-reply,
html[data-theme="professional"] .quick-hub-card,
html[data-theme="professional"] .tl-widget-card,
html[data-theme="professional"] .sb-kpi-card,
html[data-theme="professional"] .sb-card,
html[data-theme="professional"] .plan-card,
html[data-theme="professional"] .blog-card,
html[data-theme="professional"] .friend-card,
html[data-theme="professional"] .glow-border,
html[data-theme="professional"] .spotlight-card,
html[data-theme="professional"] .landing-glass-card,
html[data-theme="professional"] .landing-auth-card,
html[data-theme="professional"] .auth-card,
html[data-theme="professional"] .auth-fluid-station,
html[data-theme="professional"] .user-session-station,
html[data-theme="professional"] .landing-downloads-container,
html[data-theme="professional"] .trifecta-card,
html[data-theme="professional"] .terminal-showcase-box,
html[data-theme="professional"] .safe-ad-sandbox-box,
html[data-theme="professional"] .landing-link-card,
html[data-theme="professional"] .courses-hero,
html[data-theme="professional"] .course-card,
html[data-theme="professional"] .stat-card,
html[data-theme="professional"] .enrolled-course-card,
html[data-theme="professional"] .shorts-container,
html[data-theme="professional"] .short-comments-panel,
html[data-theme="professional"] .vid-card,
html[data-theme="professional"] .tl-empty,
html[data-theme="professional"] .lesson-card,
html[data-theme="professional"] .challenge-card,
html[data-theme="professional"] .lab-card,
html[data-theme="professional"] .profile-header,
html[data-theme="professional"] .profile-stats-bar,
html[data-theme="professional"] .feed-filter-bar,
html[data-theme="professional"] .create-post-card,
html[data-theme="professional"] .forum-card,
html[data-theme="professional"] .vps-card,
html[data-theme="professional"] .chat-container,
html[data-theme="professional"] .modal-content,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .post-card,
:root:not([data-theme="dark"]) .widget-card,
:root:not([data-theme="dark"]) .sb-card,
:root:not([data-theme="dark"]) .sb-kpi-card {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* Subtle, professional hover state without heavy neon bloom */
html[data-theme="professional"] .card:hover,
html[data-theme="professional"] .post-card:hover,
html[data-theme="professional"] .widget-card:hover,
html[data-theme="professional"] .admin-card:hover,
html[data-theme="professional"] .ticket-card:hover,
html[data-theme="professional"] .sb-kpi-card:hover,
html[data-theme="professional"] .sb-card:hover,
html[data-theme="professional"] .plan-card:hover,
html[data-theme="professional"] .blog-card:hover,
html[data-theme="professional"] .friend-card:hover,
html[data-theme="professional"] .forum-card:hover,
html[data-theme="professional"] .vps-card:hover,
html[data-theme="professional"] .course-card:hover,
html[data-theme="professional"] .landing-glass-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.45) !important;
}

/* 5. NAVIGATION & TOPBAR */
html[data-theme="professional"] #navBar,
html[data-theme="professional"] .navbar,
html[data-theme="professional"] .site-navbar,
html[data-theme="professional"] #sb-topbar,
:root:not([data-theme="dark"]) #navBar,
:root:not([data-theme="dark"]) #sb-topbar {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="professional"] .nav-link,
:root:not([data-theme="dark"]) .nav-link {
    color: #94a3b8 !important;
    border-radius: var(--radius-sm, 6px);
    transition: color 0.15s ease, background-color 0.15s ease;
}

html[data-theme="professional"] .nav-link:hover,
:root:not([data-theme="dark"]) .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="professional"] .nav-link.active,
:root:not([data-theme="dark"]) .nav-link.active {
    color: #38bdf8 !important;
    background-color: rgba(56, 189, 248, 0.1) !important;
    font-weight: 650;
}

/* 6. SIDEBARS & ADMIN SHELL */
html[data-theme="professional"] #sb-sidebar,
:root:not([data-theme="dark"]) #sb-sidebar {
    background: #0f172a !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-theme="professional"] .sb-nav-link {
    color: #94a3b8 !important;
    border-radius: var(--radius-sm, 6px);
    transition: color 0.15s ease, background 0.15s ease;
}

html[data-theme="professional"] .sb-nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="professional"] .sb-nav-link.active {
    color: #60a5fa !important;
    background: rgba(37, 99, 235, 0.12) !important;
    font-weight: 600;
}

html[data-theme="professional"] .sb-sidebar-brand {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="professional"] .sb-sidebar-brand-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    box-shadow: none !important;
    border-radius: var(--radius-md, 8px) !important;
}

/* 7. BUTTONS */
html[data-theme="professional"] .btn-primary,
:root:not([data-theme="dark"]) .btn-primary {
    background: #2563eb !important;
    border: 1px solid #3b82f6 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25) !important;
    text-shadow: none !important;
    border-radius: var(--radius-md, 8px) !important;
    font-weight: 600 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

html[data-theme="professional"] .btn-primary:hover,
:root:not([data-theme="dark"]) .btn-primary:hover {
    background: #1d4ed8 !important;
    border-color: #2563eb !important;
    transform: none !important;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="professional"] .btn-secondary,
html[data-theme="professional"] .btn-glass,
html[data-theme="professional"] .github-btn,
:root:not([data-theme="dark"]) .btn-secondary,
:root:not([data-theme="dark"]) .btn-glass {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) !important;
    text-shadow: none !important;
    border-radius: var(--radius-md, 8px) !important;
    font-weight: 550 !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

html[data-theme="professional"] .btn-secondary:hover,
html[data-theme="professional"] .btn-glass:hover,
html[data-theme="professional"] .github-btn:hover {
    background: #334155 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    transform: none !important;
}

html[data-theme="professional"] .btn-ghost,
:root:not([data-theme="dark"]) .btn-ghost {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #94a3b8 !important;
}

html[data-theme="professional"] .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
}

/* 8. FORMS & INPUTS */
html[data-theme="professional"] .form-control,
html[data-theme="professional"] .form-input,
html[data-theme="professional"] .form-select,
html[data-theme="professional"] input[type="text"],
html[data-theme="professional"] input[type="email"],
html[data-theme="professional"] input[type="password"],
html[data-theme="professional"] input[type="search"],
html[data-theme="professional"] input[type="number"],
html[data-theme="professional"] textarea,
html[data-theme="professional"] select,
:root:not([data-theme="dark"]) .form-control,
:root:not([data-theme="dark"]) .form-input {
    background: #090d16 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
    border-radius: var(--radius-md, 8px) !important;
    box-shadow: none !important;
}

html[data-theme="professional"] .form-control:focus,
html[data-theme="professional"] .form-input:focus,
html[data-theme="professional"] .form-select:focus,
html[data-theme="professional"] input:focus,
html[data-theme="professional"] textarea:focus,
html[data-theme="professional"] select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}

html[data-theme="professional"] .dropdown-menu,
html[data-theme="professional"] .sb-dropdown-menu,
html[data-theme="professional"] .lang-dropdown-menu,
html[data-theme="professional"] .re-menu,
html[data-theme="professional"] .mobile-drawer {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: var(--radius-xl, 12px) !important;
}

html[data-theme="professional"] .dropdown-menu.active,
html[data-theme="professional"] .dropdown-menu.show,
html[data-theme="professional"] .quickhub-menu.active,
html[data-theme="professional"] .theme-dropdown-menu.active,
html[data-theme="professional"] .theme-dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10005 !important;
}

/* Ensure quickhub is hidden when not active - override glass system inheritance */
html[data-theme="professional"] .quickhub-menu:not(.active) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html[data-theme="professional"] .dropdown-item {
    color: #94a3b8 !important;
    border-radius: var(--radius-sm, 6px);
}

html[data-theme="professional"] .dropdown-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* 10. MODALS & POPUPS */
html[data-theme="professional"] .modal-content,
html[data-theme="professional"] .sb-modal,
html[data-theme="professional"] .swal2-popup {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.75) !important;
    border-radius: var(--radius-xl, 14px) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 11. TABLES */
html[data-theme="professional"] table,
html[data-theme="professional"] .table,
html[data-theme="professional"] .sb-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

html[data-theme="professional"] th {
    background: #0f172a !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 16px !important;
}

html[data-theme="professional"] td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #f1f5f9 !important;
    padding: 12px 16px !important;
}

html[data-theme="professional"] tr:hover td {
    background: rgba(255, 255, 255, 0.025) !important;
}

/* 12. CHAT SERVICE & BUBBLES */
html[data-theme="professional"] .chat-container,
html[data-theme="professional"] .chat-sidebar,
html[data-theme="professional"] .chat-main,
html[data-theme="professional"] .chat-input-bar {
    background: #111827 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="professional"] .chat-bubble.incoming {
    background: #1e293b !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="professional"] .chat-bubble.outgoing {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    border-radius: var(--radius-lg, 12px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* 13. CODE & PRE BLOCKS */
html[data-theme="professional"] pre,
html[data-theme="professional"] code:not(pre code) {
    font-family: var(--font-mono, monospace) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: #0d1117 !important;
    border-radius: var(--radius-md, 8px) !important;
}

/* 14. FOOTER & MOBILE TAB BAR */
html[data-theme="professional"] .site-footer,
html[data-theme="professional"] .sb-footer {
    background: #080c14 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="professional"] .mobile-tab-bar {
    background: #0f172a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 15. THEME SWITCHER CONTROLS IN NAVBAR */
.nav-theme-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-theme-btn {
    height: 38px;
    padding: 0 11px;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #f8fafc);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-theme-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: translateY(-1px);
}

.theme-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl, 14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    z-index: 1200;
    padding: 8px;
    background: #111827;
}

.theme-dropdown-menu.active,
.theme-dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.theme-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    border: none;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.theme-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.theme-menu-item.active {
    background: rgba(37, 99, 235, 0.16);
    color: #60a5fa;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.theme-menu-item .theme-item-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 16. GLOBAL REINFORCEMENTS FOR TARGET WORKSPACES & PLATFORMS */
html[data-theme="professional"] .unified-communications,
html[data-theme="professional"] .relay-shell,
html[data-theme="professional"] .server-directory,
html[data-theme="professional"] .group-server,
html[data-theme="professional"] .uc-workspace,
html[data-theme="professional"] .drive-shell,
html[data-theme="professional"] .vps-payment-shell,
html[data-theme="professional"] .ranking-layout,
html[data-theme="professional"] .ticket-center,
html[data-theme="professional"] .redeem-center,
html[data-theme="professional"] .wallet-grid,
html[data-theme="professional"] .game-backend-container,
html[data-theme="professional"] .static-portal {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="professional"] [class*="liquid"],
html[data-theme="professional"] [class*="glass"],
html[data-theme="professional"] [class*="vault"],
html[data-theme="professional"] [class*="relay"],
html[data-theme="professional"] [class*="vps"],
html[data-theme="professional"] [class*="uc-"] {
    filter: none !important;
    -webkit-filter: none !important;
}