/*
 * SetiAI - Global Theme Overrides
 * Applies Light and Liquid Glass themes by overriding default Tailwind classes and CSS Variables.
 */

html {
    background-color: #0a0a0a;
    color-scheme: dark;
}

html[data-theme="dark"] {
    background-color: #0a0a0a;
    color-scheme: dark;
}

/* ==================== LIGHT THEME ==================== */
html[data-theme="light"] {
    background-color: #f8fafc;
    color-scheme: light;
    --primary-bg: #f8fafc; /* slate-50 */
    --secondary-bg: #eef4fb;
    --accent-bg: #dde7f2;
    --primary-text: #0f172a; /* slate-900 */
    --secondary-text: #475569; /* slate-600 */
    --glass-bg: rgba(255, 255, 255, 0.76);
    --glass-border: rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at top left, rgba(125, 211, 252, 0.14), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #eef4fb 56%, #e2ebf5 100%) !important;
    color: var(--primary-text) !important;
}

html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
    display: none !important; /* Hide animated dark gradients/grids */
}

/* Light Theme: Override heavy dark classes */
html[data-theme="light"] .bg-gray-900,
html[data-theme="light"] .bg-black,
html[data-theme="light"] [class*="bg-[#0a0a0a]"] {
    background-color: #ffffff !important;
}

html[data-theme="light"] .bg-gray-800,
html[data-theme="light"] [class*="bg-gray-800/"],
html[data-theme="light"] [class*="bg-black/"] {
    background-color: #f1f5f9 !important;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] .text-gray-100,
html[data-theme="light"] .text-gray-200 {
    color: #0f172a !important;
}

html[data-theme="light"] [class*="bg-gradient-to-"],
html[data-theme="light"] [class*="bg-gradient-to-"].text-white,
html[data-theme="light"] [class*="bg-gradient-to-"] .text-white,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-success,
html[data-theme="light"] .btn-danger,
html[data-theme="light"] .public-nav-btn-primary,
html[data-theme="light"] .notification-badge,
html[data-theme="light"] .user-avatar,
html[data-theme="light"] .user-avatar-large,
html[data-theme="light"] .public-user-avatar,
html[data-theme="light"] .public-user-avatar-large,
html[data-theme="light"] .feature-icon,
html[data-theme="light"] .icon-lock {
    color: #ffffff !important;
}

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

html[data-theme="light"] .border-gray-800,
html[data-theme="light"] .border-gray-700,
html[data-theme="light"] .border-gray-600,
html[data-theme="light"] [class*="border-white/"] {
    border-color: #e2e8f0 !important;
}

html[data-theme="light"] .glass-panel,
html[data-theme="light"] .glass-panel-heavy,
html[data-theme="light"] .demo-card {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 18px 38px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .public-shell-section {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(241, 245, 249, 0.86)) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 24px 46px rgba(148, 163, 184, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="light"] .glass,
html[data-theme="light"] .glass-blue,
html[data-theme="light"] .glass-purple,
html[data-theme="light"] .glass-green,
html[data-theme="light"] .glass-amber,
html[data-theme="light"] .glass-red,
html[data-theme="light"] .glass-cyan,
html[data-theme="light"] .chart-container,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .team-card,
html[data-theme="light"] .group-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.88)) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 22px 42px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.76) !important;
}

html[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.92)) !important;
    border-right-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 16px 0 48px rgba(148, 163, 184, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="light"] .sidebar-nav-item {
    background: rgba(15, 23, 42, 0.03) !important;
    color: #334155 !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] .sidebar-nav-item:hover {
    background: rgba(37, 99, 235, 0.06) !important;
    color: #0f172a !important;
    border-color: rgba(59, 130, 246, 0.12) !important;
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="light"] .sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 0%, rgba(56, 189, 248, 0.05) 100%) !important;
    color: #1e40af !important;
    border-color: rgba(59, 130, 246, 0.14) !important;
    box-shadow: 0 12px 24px rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="light"] .sidebar-nav-item .sidebar-icon,
html[data-theme="light"] .sidebar-nav-item.active .sidebar-icon {
    color: inherit !important;
}

/* Base Form inputs in Light Theme */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .security-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .feature-item,
html[data-theme="light"] .session-item,
html[data-theme="light"] .glass-effect,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .agent-card,
html[data-theme="light"] .integration-card,
html[data-theme="light"] .glass,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .log-entry {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.9)) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 20px 38px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="light"] .form-input {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

html[data-theme="light"] .nav-item {
    color: #334155 !important;
}

html[data-theme="light"] .nav-item:hover {
    background: rgba(37, 99, 235, 0.06) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .nav-item.active {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 0%, rgba(56, 189, 248, 0.05) 100%) !important;
    color: #1e40af !important;
}

html[data-theme="light"] .metric-card,
html[data-theme="light"] .agent-card,
html[data-theme="light"] .sales-card,
html[data-theme="light"] .quick-action-btn,
html[data-theme="light"] .catalog-card {
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 20px 38px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .notification-btn,
html[data-theme="light"] .public-nav-btn-secondary {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #334155 !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 12px 28px rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="light"] .btn-primary {
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.18) !important;
}

html[data-theme="light"] .unified-navigation,
html[data-theme="light"] .public-unified-navigation {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 18px 36px rgba(148, 163, 184, 0.12) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
}

html[data-theme="light"] .public-nav-logo::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.98)) !important;
    box-shadow: 0 12px 28px rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="light"] .logo-white,
html[data-theme="light"] .public-user-name-large,
html[data-theme="light"] .user-name-large,
html[data-theme="light"] #notifications-dropdown h3 {
    color: #0f172a !important;
}

html[data-theme="light"] .public-nav-item,
html[data-theme="light"] .public-user-email,
html[data-theme="light"] .search-icon,
html[data-theme="light"] .search-result-item .result-path,
html[data-theme="light"] .menu-item,
html[data-theme="light"] .public-menu-item {
    color: #475569 !important;
}

html[data-theme="light"] .public-nav-item:hover,
html[data-theme="light"] .public-nav-item.active,
html[data-theme="light"] .menu-item:hover,
html[data-theme="light"] .public-menu-item:hover,
html[data-theme="light"] .search-result-item:hover {
    color: #0f172a !important;
}

html[data-theme="light"] .search-input,
html[data-theme="light"] .search-results,
html[data-theme="light"] .user-btn,
html[data-theme="light"] .public-user-btn,
html[data-theme="light"] .user-menu,
html[data-theme="light"] .public-user-menu {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 247, 251, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 18px 36px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .search-input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .menu-divider,
html[data-theme="light"] .public-menu-divider {
    background: rgba(148, 163, 184, 0.14) !important;
}

html[data-theme="light"] .store-btn,
html[data-theme="light"] .social-btn {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 14px 30px rgba(148, 163, 184, 0.12) !important;
    color: #334155 !important;
}

html[data-theme="light"] .footer-link,
html[data-theme="light"] footer h4,
html[data-theme="light"] footer .text-gray-400,
html[data-theme="light"] footer .text-gray-500 {
    color: #64748b !important;
}

html[data-theme="light"] .footer-link:hover {
    color: #0f172a !important;
}

html[data-theme="light"] [class*="bg-gray-700"],
html[data-theme="light"] [class*="bg-gray-700/"],
html[data-theme="light"] [class*="bg-gray-600"],
html[data-theme="light"] [class*="bg-gray-600/"] {
    background-color: rgba(241, 245, 249, 0.96) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: #0f172a !important;
}

html[data-theme="light"] [class*="hover:bg-gray-600"]:hover,
html[data-theme="light"] [class*="hover:bg-gray-700"]:hover {
    background-color: rgba(226, 232, 240, 0.98) !important;
    color: #0f172a !important;
}

html[data-theme="light"] input[class*="bg-gray-700"],
html[data-theme="light"] textarea[class*="bg-gray-700"],
html[data-theme="light"] select[class*="bg-gray-700"] {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

html[data-theme="light"] [class*="bg-black/40"][class*="backdrop-blur"],
html[data-theme="light"] [class*="bg-black/20"][class*="backdrop-blur"],
html[data-theme="light"] [class*="bg-black/40"][class*="rounded"],
html[data-theme="light"] [class*="bg-black/20"][class*="rounded"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 247, 251, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html[data-theme="light"] .demo-section,
html[data-theme="light"] .ai-card,
html[data-theme="light"] .pricing-card,
html[data-theme="light"] .pricing-card.featured,
html[data-theme="light"] .case-card,
html[data-theme="light"] .comparison-table,
html[data-theme="light"] .showcase-panel,
html[data-theme="light"] .showcase-list-card {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 247, 251, 0.98)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 24px 46px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="light"] .glass-effect {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 16px 34px rgba(148, 163, 184, 0.12) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .glass-effect:hover {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(59, 130, 246, 0.16) !important;
}

html[data-theme="light"] .showcase-panel textarea,
html[data-theme="light"] .showcase-panel input,
html[data-theme="light"] .showcase-panel select,
html[data-theme="light"] .showcase-panel .text-white,
html[data-theme="light"] .demo-section .text-white,
html[data-theme="light"] .ai-card .text-white,
html[data-theme="light"] .pricing-card .text-white,
html[data-theme="light"] .case-card .text-white {
    color: #0f172a !important;
}

html[data-theme="light"] .showcase-panel .text-gray-300,
html[data-theme="light"] .showcase-panel .text-gray-400,
html[data-theme="light"] .demo-section .text-gray-300,
html[data-theme="light"] .demo-section .text-gray-400,
html[data-theme="light"] .ai-card .text-gray-300,
html[data-theme="light"] .ai-card .text-gray-400,
html[data-theme="light"] .pricing-card .text-gray-400,
html[data-theme="light"] .case-card .text-gray-300,
html[data-theme="light"] .case-card .text-gray-400 {
    color: #475569 !important;
}

html[data-theme="light"] nav,
html[data-theme="light"] .mobile-menu {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 16px 34px rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="light"] .theme-menu,
html[data-theme="light"] #notifications-dropdown {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 24px 50px rgba(148, 163, 184, 0.18) !important;
    backdrop-filter: blur(26px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(160%) !important;
}

html[data-theme="light"] .theme-btn {
    color: #334155 !important;
}

html[data-theme="light"] .theme-btn:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: #0f172a !important;
}

html[data-theme="light"] .theme-btn.active {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #1e40af !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.14) !important;
}

html[data-theme="light"] footer.bg-black {
    background: linear-gradient(180deg, rgba(238, 244, 251, 0.92), rgba(226, 235, 245, 0.98)) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] footer .text-gray-500 {
    color: #64748b !important;
}

html[data-theme="light"] .setiai-page-endcap {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(241, 245, 249, 0.92)) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 24px 48px rgba(148, 163, 184, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html[data-theme="light"] .setiai-page-endcap--anchored {
    background:
        radial-gradient(circle at top center, rgba(59, 130, 246, 0.16), transparent 34%),
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 245, 249, 0.94)) !important;
    box-shadow:
        0 -12px 26px rgba(59, 130, 246, 0.06),
        0 24px 48px rgba(148, 163, 184, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="light"] .setiai-page-endcap-item {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] .setiai-closing-band {
    background:
        radial-gradient(circle at top center, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 251, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 20px 44px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html[data-theme="light"] .setiai-closing-band-note,
html[data-theme="light"] .setiai-closing-band-item {
    background: rgba(255, 255, 255, 0.74) !important;
    border-color: rgba(148, 163, 184, 0.16) !important;
    box-shadow: 0 14px 30px rgba(148, 163, 184, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="light"] .setiai-closing-band-eyebrow {
    color: #0f6fa7 !important;
}

html[data-theme="light"] .setiai-closing-band-title,
html[data-theme="light"] .setiai-closing-band-label,
html[data-theme="light"] .setiai-closing-band-value {
    color: #0f172a !important;
}

html[data-theme="light"] .setiai-closing-band-text,
html[data-theme="light"] .setiai-closing-band-note,
html[data-theme="light"] .setiai-closing-band-caption {
    color: #475569 !important;
}

html[data-theme="light"] .setiai-page-endcap-eyebrow {
    color: #0f6fa7 !important;
}

html[data-theme="light"] .setiai-page-endcap-title,
html[data-theme="light"] .setiai-page-endcap-item-title {
    color: #0f172a !important;
}

html[data-theme="light"] .setiai-page-endcap-text,
html[data-theme="light"] .setiai-page-endcap-item-text {
    color: #475569 !important;
}

html[data-theme="light"] .setiai-page-endcap-item-icon {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0284c7 !important;
}

html[data-theme="light"] .catalog-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(240, 247, 255, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow: 0 26px 52px rgba(148, 163, 184, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="light"] .catalog-kicker {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.16) !important;
    color: #0369a1 !important;
}

html[data-theme="light"] .catalog-title,
html[data-theme="light"] .insights-title,
html[data-theme="light"] .merge-execution-title {
    color: #0f172a !important;
}

html[data-theme="light"] .catalog-description,
html[data-theme="light"] .merge-execution-copy,
html[data-theme="light"] .catalog-empty {
    color: #475569 !important;
}

html[data-theme="light"] .catalog-summary-pill,
html[data-theme="light"] .catalog-search {
    background: rgba(255, 255, 255, 0.76) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 16px 30px rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="light"] .catalog-summary-value {
    color: #0f172a !important;
}

html[data-theme="light"] .catalog-summary-label {
    color: #64748b !important;
}

html[data-theme="light"] .catalog-tab {
    background: rgba(248, 250, 252, 0.94) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    color: #334155 !important;
    box-shadow: 0 10px 22px rgba(148, 163, 184, 0.08) !important;
}

html[data-theme="light"] .catalog-tab:hover,
html[data-theme="light"] .catalog-tab.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    color: #0f172a !important;
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="light"] .catalog-tab-count {
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0369a1 !important;
}

html[data-theme="light"] .catalog-tab-description,
html[data-theme="light"] .catalog-card-label,
html[data-theme="light"] .catalog-card-source {
    color: #64748b !important;
}

html[data-theme="light"] .catalog-search i,
html[data-theme="light"] .catalog-card-badge,
html[data-theme="light"] .catalog-card-cta {
    color: #0369a1 !important;
}

html[data-theme="light"] .catalog-search input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] .catalog-card,
html[data-theme="light"] .merge-execution-card,
html[data-theme="light"] .catalog-empty {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 248, 252, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 20px 40px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

html[data-theme="light"] .catalog-card::before {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.72), rgba(59, 130, 246, 0.72)) !important;
}

html[data-theme="light"] .catalog-card-title,
html[data-theme="light"] .catalog-card-subtitle,
html[data-theme="light"] .catalog-card-capability,
html[data-theme="light"] .contract-action-button,
html[data-theme="light"] .contract-action-link {
    color: #0f172a !important;
}

html[data-theme="light"] .catalog-card-subtitle,
html[data-theme="light"] .catalog-card-capability {
    color: #334155 !important;
}

html[data-theme="light"] .catalog-card-module,
html[data-theme="light"] .catalog-card-meta-pill {
    background: rgba(241, 245, 249, 0.88) !important;
    color: #334155 !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

html[data-theme="light"] .catalog-card-meta-pill i,
html[data-theme="light"] .catalog-card-capability i {
    color: #0284c7 !important;
}

html[data-theme="light"] .contract-action-button {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(59, 130, 246, 0.16) !important;
}

html[data-theme="light"] .contract-action-link {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.16) !important;
}

html[data-theme="light"] .insights-section,
html[data-theme="light"] .setiai-app-shell [class*="bg-white/5"][class*="backdrop-blur"],
html[data-theme="light"] .setiai-app-shell [class*="bg-black/20"],
html[data-theme="light"] .setiai-app-shell [class*="bg-black/40"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(243, 247, 251, 0.96)) !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 18px 36px rgba(148, 163, 184, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

html[data-theme="light"] .setiai-app-shell [class*="bg-white/10"][class*="backdrop-blur"],
html[data-theme="light"] .setiai-app-shell [class*="hover:bg-white/10"] {
    background-color: rgba(241, 245, 249, 0.92) !important;
}

html[data-theme="light"] .setiai-app-shell [class*="from-gray-900"],
html[data-theme="light"] .setiai-app-shell [class*="to-gray-800"],
html[data-theme="light"] .setiai-app-shell [class*="from-slate-900"],
html[data-theme="light"] .setiai-app-shell [class*="to-slate-800"] {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(241, 245, 249, 0.96)) !important;
}

html[data-theme="light"] .insights-header,
html[data-theme="light"] #assistantAIInsightsContainer {
    color: #0f172a !important;
}

html[data-theme="light"] .insight-card {
    background: linear-gradient(135deg, rgba(224, 242, 254, 0.88) 0%, rgba(239, 246, 255, 0.96) 100%) !important;
    border-color: rgba(56, 189, 248, 0.22) !important;
    box-shadow: 0 14px 28px rgba(148, 163, 184, 0.12) !important;
}

html[data-theme="light"] .metric-card:hover,
html[data-theme="light"] .agent-card:hover,
html[data-theme="light"] .sales-card:hover,
html[data-theme="light"] .integration-card:hover,
html[data-theme="light"] .catalog-card:hover,
html[data-theme="light"] .platform-item:hover,
html[data-theme="light"] .setiai-page-endcap-item:hover,
html[data-theme="light"] .setiai-closing-band-item:hover {
    box-shadow: 0 18px 34px rgba(148, 163, 184, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html[data-theme="light"] .setiai-app-shell [class*="text-slate-200"],
html[data-theme="light"] .setiai-app-shell [class*="text-slate-300"],
html[data-theme="light"] .setiai-app-shell [class*="text-sky-200"],
html[data-theme="light"] .setiai-app-shell [class*="text-sky-300"],
html[data-theme="light"] .setiai-app-shell [class*="text-white/60"],
html[data-theme="light"] .setiai-app-shell [class*="text-white/70"] {
    color: #475569 !important;
}

html[data-theme="light"] .setiai-app-shell [class*="bg-sky-500/10"],
html[data-theme="light"] .setiai-app-shell [class*="bg-sky-400/15"] {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.18) !important;
}


/* ==================== LIQUID GLASS THEME ==================== */
html[data-theme="liquid-glass"] {
    --primary-bg: #020617; /* Slate 950 */
    --glass-bg: rgba(255, 255, 255, 0.035);
    --glass-border: rgba(255, 255, 255, 0.18);
}

html[data-theme="liquid-glass"] body {
    background:
        radial-gradient(circle at 15% 18%, rgba(125, 211, 252, 0.18), transparent 24%),
        radial-gradient(circle at 85% 12%, rgba(59, 130, 246, 0.18), transparent 28%),
        radial-gradient(circle at 72% 82%, rgba(168, 85, 247, 0.14), transparent 22%),
        linear-gradient(180deg, #020617 0%, #071426 46%, #0f172a 100%) !important;
}

/* Enhance blur and transparency */
html[data-theme="liquid-glass"] .glass-panel,
html[data-theme="liquid-glass"] .glass-panel-heavy,
html[data-theme="liquid-glass"] [class*="bg-black/"],
html[data-theme="liquid-glass"] .demo-card,
html[data-theme="liquid-glass"] .bg-gray-900,
html[data-theme="liquid-glass"] .bg-gray-800 {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)) !important;
    backdrop-filter: blur(44px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(44px) saturate(170%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 24px 54px rgba(6, 11, 31, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="liquid-glass"] .glass,
html[data-theme="liquid-glass"] .glass-blue,
html[data-theme="liquid-glass"] .glass-purple,
html[data-theme="liquid-glass"] .glass-green,
html[data-theme="liquid-glass"] .glass-amber,
html[data-theme="liquid-glass"] .glass-red,
html[data-theme="liquid-glass"] .glass-cyan,
html[data-theme="liquid-glass"] .chart-container,
html[data-theme="liquid-glass"] .modal-content,
html[data-theme="liquid-glass"] .sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03)) !important;
    backdrop-filter: blur(32px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(185%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 22px 58px rgba(6, 11, 31, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="liquid-glass"] .sidebar-nav-item {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #cbd5e1 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="liquid-glass"] .sidebar-nav-item:hover {
    background: linear-gradient(90deg, rgba(125, 211, 252, 0.12), rgba(255, 255, 255, 0.06)) !important;
    color: #f8fafc !important;
    border-color: rgba(125, 211, 252, 0.22) !important;
}

html[data-theme="liquid-glass"] .sidebar-nav-item.active {
    background: linear-gradient(90deg, rgba(103, 232, 249, 0.18) 0%, rgba(99, 102, 241, 0.14) 100%) !important;
    color: #e0f2fe !important;
    border-color: rgba(125, 211, 252, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 38px rgba(6, 11, 31, 0.34) !important;
}

html[data-theme="liquid-glass"] .security-card,
html[data-theme="liquid-glass"] .login-card,
html[data-theme="liquid-glass"] .feature-item,
html[data-theme="liquid-glass"] .session-item,
html[data-theme="liquid-glass"] .glass-effect,
html[data-theme="liquid-glass"] .metric-card,
html[data-theme="liquid-glass"] .agent-card,
html[data-theme="liquid-glass"] .integration-card,
html[data-theme="liquid-glass"] .glass,
html[data-theme="liquid-glass"] .stat-card,
html[data-theme="liquid-glass"] .log-entry {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
    backdrop-filter: blur(32px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(185%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 22px 58px rgba(6, 11, 31, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html[data-theme="liquid-glass"] .chart-container,
html[data-theme="liquid-glass"] .catalog-section,
html[data-theme="liquid-glass"] .catalog-card,
html[data-theme="liquid-glass"] .merge-execution-card,
html[data-theme="liquid-glass"] .insights-section,
html[data-theme="liquid-glass"] .platform-item,
html[data-theme="liquid-glass"] .setiai-closing-band,
html[data-theme="liquid-glass"] .setiai-page-endcap,
html[data-theme="liquid-glass"] .setiai-page-endcap-item {
    background:
        radial-gradient(circle at top left, rgba(207, 250, 254, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)) !important;
    backdrop-filter: blur(34px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(190%) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 24px 60px rgba(6, 11, 31, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -10px 22px rgba(125, 211, 252, 0.05) !important;
}

html[data-theme="liquid-glass"] .setiai-closing-band-note,
html[data-theme="liquid-glass"] .setiai-closing-band-item {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.04)) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 34px rgba(6, 11, 31, 0.3) !important;
}

html[data-theme="liquid-glass"] .setiai-closing-band-eyebrow,
html[data-theme="liquid-glass"] .setiai-page-endcap-eyebrow {
    color: #cffafe !important;
}

html[data-theme="liquid-glass"] .setiai-closing-band-title,
html[data-theme="liquid-glass"] .setiai-closing-band-label,
html[data-theme="liquid-glass"] .setiai-closing-band-value {
    color: #f8fafc !important;
}

html[data-theme="liquid-glass"] .setiai-closing-band-text,
html[data-theme="liquid-glass"] .setiai-closing-band-note,
html[data-theme="liquid-glass"] .setiai-closing-band-caption {
    color: #cbd5e1 !important;
}

html[data-theme="liquid-glass"] .form-input {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

/* More prominent background gradients for Liquid Glass to refract */
html[data-theme="liquid-glass"] body::before {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(37, 99, 235, 0.42) 0%, transparent 38%),
        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.28) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.14) 0%, transparent 42%),
        radial-gradient(circle at 32% 76%, rgba(103, 232, 249, 0.16) 0%, transparent 30%) !important;
    opacity: 1 !important;
}

html[data-theme="liquid-glass"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%, transparent 78%, rgba(255, 255, 255, 0.03)),
        radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.16), transparent 34%);
    pointer-events: none;
    z-index: -9;
}

html[data-theme="liquid-glass"] .text-gradient,
html[data-theme="liquid-glass"] .text-gradient-primary {
    text-shadow: 0 0 20px rgba(37,99,235,0.5);
}

/* Navigation overrides for all themes */
html[data-theme="light"] nav,
html[data-theme="light"] .mobile-menu {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: #e2e8f0 !important;
}

html[data-theme="liquid-glass"] nav,
html[data-theme="liquid-glass"] .mobile-menu {
    background:
        linear-gradient(180deg, rgba(8, 15, 32, 0.62), rgba(8, 15, 32, 0.38)),
        radial-gradient(circle at top left, rgba(207, 250, 254, 0.12), transparent 34%) !important;
    backdrop-filter: blur(34px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(34px) saturate(190%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 18px 44px rgba(6, 11, 31, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* Active theme indicator in dropdown */
.theme-btn.active {
    background: rgba(37, 99, 235, 0.2);
    color: #38BDF8;
}
html[data-theme="light"] .theme-btn.active {
    background: #e0e7ff;
    color: #4f46e5;
}

.theme-menu {
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
}

html[data-theme="liquid-glass"] .theme-menu,
html[data-theme="liquid-glass"] #notifications-dropdown {
    background: linear-gradient(180deg, rgba(8, 15, 32, 0.76), rgba(8, 15, 32, 0.58)) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 28px 60px rgba(6, 11, 31, 0.46) !important;
    backdrop-filter: blur(30px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(185%) !important;
}

html[data-theme="liquid-glass"] .theme-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="liquid-glass"] .theme-btn.active {
    background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), rgba(99, 102, 241, 0.14)) !important;
    color: #cffafe !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

html[data-theme="liquid-glass"] .platform-item.active,
html[data-theme="liquid-glass"] .catalog-tab.active,
html[data-theme="liquid-glass"] .nav-item.active,
html[data-theme="liquid-glass"] .sidebar-nav-item.active {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 18px 36px rgba(8, 15, 32, 0.28),
        0 0 0 1px rgba(207, 250, 254, 0.12) !important;
}

html[data-theme="liquid-glass"] .metric-card:hover,
html[data-theme="liquid-glass"] .agent-card:hover,
html[data-theme="liquid-glass"] .sales-card:hover,
html[data-theme="liquid-glass"] .integration-card:hover,
html[data-theme="liquid-glass"] .catalog-card:hover,
html[data-theme="liquid-glass"] .platform-item:hover,
html[data-theme="liquid-glass"] .setiai-page-endcap-item:hover,
html[data-theme="liquid-glass"] .setiai-closing-band-item:hover {
    box-shadow:
        0 26px 62px rgba(6, 11, 31, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -10px 24px rgba(103, 232, 249, 0.08) !important;
}

html[data-theme="liquid-glass"] footer.bg-black {
    background: linear-gradient(180deg, rgba(8, 15, 32, 0.34), rgba(8, 15, 32, 0.78)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(26px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(180%) !important;
}

html[data-theme="liquid-glass"] .setiai-page-endcap {
    background:
        radial-gradient(circle at top left, rgba(103, 232, 249, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 28px 60px rgba(6, 11, 31, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="liquid-glass"] .setiai-page-endcap--anchored {
    background:
        radial-gradient(circle at top center, rgba(103, 232, 249, 0.2), transparent 32%),
        radial-gradient(circle at top left, rgba(103, 232, 249, 0.14), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.03)) !important;
    box-shadow:
        0 -14px 28px rgba(34, 211, 238, 0.08),
        0 28px 60px rgba(6, 11, 31, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="liquid-glass"] .setiai-page-endcap-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Production shell guard: keep cockpit pages inside viewport in every theme. */
.messenger-page,
.planner-page {
    overflow-x: hidden;
}

.messenger-page .setiai-app-shell,
.planner-page .setiai-app-shell {
    width: min(100% - clamp(1rem, 2vw, 1.5rem), 1800px);
    max-width: 1800px;
    margin-inline: auto;
    min-width: 0;
    box-sizing: border-box;
}

.messenger-page .setiai-app-shell > .flex-1,
.planner-page .setiai-app-shell > .flex-1 {
    min-width: 0;
    max-width: 100%;
}

.messenger-page .sidebar,
.planner-page .sidebar {
    flex-shrink: 0;
}

html[data-theme="liquid-glass"] .messenger-page .setiai-app-shell,
html[data-theme="liquid-glass"] .planner-page .setiai-app-shell {
    width: min(100% - clamp(1rem, 2vw, 2rem), 1760px);
}

html[data-theme="light"] .sidebar-nav-item:not(.active),
html[data-theme="light"] .nav-item:not(.active) {
    color: #334155 !important;
}

html[data-theme="light"] .sidebar-nav-item:not(.active) .sidebar-icon {
    color: #2563eb !important;
}

@media (max-width: 1180px) {
    .messenger-page .setiai-app-shell,
    .planner-page .setiai-app-shell {
        flex-direction: column;
        align-items: stretch;
    }

    .messenger-page .sidebar,
    .planner-page .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        height: auto !important;
    }
}

/* Global optimization to eliminate scrolling lag (jank) in all themes and modes */
body::before,
body::after {
    animation: none !important;
    will-change: auto !important;
}