/*
 * ============================================================
 *  问智 AskIntell 统一主题系统 v5.0
 *  合并 theme.v2.css + theme-light.css — 单一来源、清晰分层
 *  日期：2026-05-23
 * ============================================================
 *
 * 设计原则：
 *   1. CSS Token 定义在顶层（：root 深色 / [data-theme=light] 浅色）
 *   2. !important 仅用于覆盖 Tailwind 原子类，不用于内部互相覆盖
 *   3. 同一属性不在两个选择器中各写 !important（消除优先级战争）
 *   4. 组件按功能区划分：导航 / 侧边栏 / 按钮 / 卡片 / 表单 / 页脚
 */

/* ============================================================
   TIER 1：CSS 自定义属性 —— 全站唯一真相来源
   ============================================================ */

/* 深色模式（默认） */
:root {
  /* 背景体系 */
  --bg-primary: #020617;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1e293b;
  --bg-card: #0f172a;
  --bg-hover: rgba(59, 130, 246, 0.08);

  /* 文字体系 */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  /* 边框 */
  --border-color: #334155;
  --border-light: #1e293b;

  /* 品牌色 */
  --brand-blue: #3775F5;
  --brand-blue-hover: #2658D8;
  --brand-purple: #8b5cf6;
  --brand-indigo: #6366f1;

  /* 功能色 */
  --color-green: #059669;
  --color-orange: #D97706;
  --color-red: #DC2626;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* 渐变 */
  --gradient-brand: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-brand-hover: linear-gradient(135deg, #4f46e5, #7c3aed);
  --gradient-btn: linear-gradient(135deg, #3775F5, #5B8DEF);
  --gradient-btn-hover: linear-gradient(135deg, #2658D8, #4A6CF7);
}

/* 浅色模式 */
[data-theme=light] {
  /* 背景体系 */
  --bg-primary: rgba(255, 255, 255, 0.95);
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F1F3F7;
  --bg-card: #FFFFFF;
  --bg-hover: rgba(55, 117, 245, 0.06);

  /* 文字体系 */
  --text-primary: #1A1D26;
  --text-secondary: #5A6478;
  --text-muted: #9CA3B8;

  /* 边框 */
  --border-color: #E5E7EB;
  --border-light: #F1F3F7;

  /* 品牌色（浅色模式更亮） */
  --brand-blue: #3775F5;
  --brand-blue-hover: #2658D8;
  --brand-purple: #8b5cf6;
  --brand-indigo: #6366f1;

  /* 功能色 */
  --color-green: #059669;
  --color-orange: #D97706;
  --color-red: #DC2626;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* 渐变 */
  --gradient-brand: linear-gradient(135deg, #6366f1, #8b5cf6);
  --gradient-brand-hover: linear-gradient(135deg, #4f46e5, #7c3aed);
  --gradient-btn: linear-gradient(135deg, #3775F5, #5B8DEF);
  --gradient-btn-hover: linear-gradient(135deg, #2658D8, #4A6CF7);
}


/* ============================================================
   TIER 2：主题切换平滑过渡（仅手动切换时触发）
   ============================================================ */
html.theme-switching nav,
html.theme-switching main,
html.theme-switching footer,
html.theme-switching header,
html.theme-switching section,
html.theme-switching div[class],
html.theme-switching a,
html.theme-switching button,
html.theme-switching input,
html.theme-switching textarea,
html.theme-switching h1,
html.theme-switching h2,
html.theme-switching h3,
html.theme-switching h4,
html.theme-switching h5,
html.theme-switching h6,
html.theme-switching p,
html.theme-switching span,
html.theme-switching li,
html.theme-switching .bg-\[\#0a0a0a\],
html.theme-switching .bg-\[\#020617\],
html.theme-switching .bg-slate-900,
html.theme-switching .bg-gray-900,
html.theme-switching .navbar-tab,
html.theme-switching .glass,
html.theme-switching .glow-btn {
  transition: background-color 0.12s ease, color 0.10s ease, border-color 0.12s ease,
              box-shadow 0.12s ease !important;
}


/* ============================================================
   TIER 3：全局背景统一（PC + 移动端，深色 + 浅色）
   ============================================================ */

/* html 根节点 */
html[data-theme=dark] {
  background: var(--bg-primary);
  background-color: var(--bg-primary);
}
html[data-theme=light] {
  background: var(--bg-primary);
  background-color: var(--bg-primary);
}

/* 全站背景容器 */
html[data-theme=dark] body,
html[data-theme=dark] main,
html[data-theme=dark] footer,
html[data-theme=dark] section,
html[data-theme=dark] .sidebar-left,
html[data-theme=dark] .sidebar-right,
html[data-theme=dark] .container,
html[data-theme=dark] .wrapper,
html[data-theme=dark] .content,
html[data-theme=dark] .page,
html[data-theme=dark] #__next,
html[data-theme=dark] #app {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
}

html[data-theme=light] body,
html[data-theme=light] main,
html[data-theme=light] footer,
html[data-theme=light] section,
html[data-theme=light] .sidebar-left,
html[data-theme=light] .sidebar-right,
html[data-theme=light] .container,
html[data-theme=light] .wrapper,
html[data-theme=light] .content,
html[data-theme=light] .page,
html[data-theme=light] #__next,
html[data-theme=light] #app {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary);
}

/* 背景统一排除项（按钮/输入框/渐变组件不参与背景统一） */
html[data-theme=dark] button,
html[data-theme=dark] input,
html[data-theme=dark] textarea,
html[data-theme=dark] .card,
html[data-theme=dark] [class*="bg-gradient"],
html[data-theme=light] button,
html[data-theme=light] input,
html[data-theme=light] textarea,
html[data-theme=light] .card,
html[data-theme=light] [class*="bg-gradient"] {
  background: revert-layer;
  background-color: revert-layer;
}

/* 浅色模式：Tailwind 暗色背景类转白 */
[data-theme=light] .bg-\[\#0a0a0a\],
[data-theme=light] .bg-\[\#020617\] { background: var(--bg-primary) !important; background-color: var(--bg-primary) !important; }
[data-theme=light] .bg-\[\#020617\]\/95 { background: rgba(255,255,255,0.95) !important; background-color: rgba(255,255,255,0.95) !important; }
[data-theme=light] .bg-slate-900,
[data-theme=light] .bg-slate-800,
[data-theme=light] .bg-slate-950,
[data-theme=light] .bg-\[\#131325\],
[data-theme=light] .bg-\[\#0f172a\] { background: #FFFFFF !important; background-color: #FFFFFF !important; }
[data-theme=light] .bg-gray-900 { background: #FFFFFF !important; background-color: #FFFFFF !important; }
[data-theme=light] .bg-gray-800 { background: #E5E9F0 !important; background-color: #E5E9F0 !important; }
[data-theme=light] .bg-gray-900\/50,
[data-theme=light] .bg-gray-900\/10,
[data-theme=light] .bg-gray-900\/20 { background-color: rgba(241, 243, 247, 0.95) !important; }
[data-theme=light] .bg-slate-900\/60,
[data-theme=light] .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.9) !important; }

/* 浅色模式：禁用毛玻璃（避免浅色模式下 half-transparent 效果叠加） */
[data-theme=light] nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ============================================================
   TIER 4：导航栏（桌面端 + 移动端）
   ============================================================ */

/* --- 4.1 桌面端导航栏：浅色模式 --- */
[data-theme=light] nav,
[data-theme=light] nav.fixed,
[data-theme=light] header nav {
  background: rgba(255,255,255,0.98) !important;
  border-bottom: 1px solid #E5E9F0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
[data-theme=light] nav.border-gray-800 { border-color: #E2E6EF !important; }

/* 桌面端导航Tab */
[data-theme=light] nav .navbar-tab {
  color: #1A1D26 !important;
  background: transparent !important;
}
[data-theme=light] nav .navbar-tab:hover {
  color: #1A1D26 !important;
  background: var(--bg-hover) !important;
}
[data-theme=light] .navbar-tab.active {
  color: var(--brand-blue) !important;
  font-weight: 600 !important;
  background: rgba(55, 117, 245, 0.1) !important;
  border-bottom: 2px solid var(--brand-blue) !important;
  border-radius: 8px !important;
}

/* 桌面端导航链接 */
[data-theme=light] .navbar-tab,
[data-theme=light] nav a:not([href="/register"]):not([href="/login"]) {
  color: #5A6478 !important;
}
[data-theme=light] .navbar-tab:hover,
[data-theme=light] nav a:not([href="/register"]):not([href="/login"]):hover {
  color: var(--brand-blue) !important;
}

/* --- 4.2 移动端汉堡菜单 --- */

/* 深色模式 */
[data-theme=dark] #mobileNav {
  background: var(--bg-primary) !important;
  border-top: 1px solid #1f2937 !important;
}
[data-theme=dark] #mobileNav .navbar-tab { color: #9ca3af !important; }
[data-theme=dark] #mobileNav .navbar-tab:hover { color: #ffffff !important; }
[data-theme=dark] #mobileNav .border-t { border-color: #1f2937 !important; }

/* 浅色模式 */
[data-theme=light] #mobileNav {
  background: #FFFFFF !important;
  border-top: 1px solid #E2E6EF !important;
}
[data-theme=light] #mobileNav .border-t { border-color: #E2E6EF !important; }

[data-theme=light] #mobileNav a:not([href=/register]) {
  color: #5A6478 !important;
}
[data-theme=light] #mobileNav a:not([href=/register]):hover {
  color: var(--brand-blue) !important;
  background: rgba(55, 117, 245, 0.08) !important;
}
[data-theme=light] #mobileNav .navbar-tab { color: #5A6478 !important; }
[data-theme=light] #mobileNav .navbar-tab:hover { color: var(--brand-blue) !important; }
[data-theme=light] #mobileNav .navbar-tab.active,
[data-theme=light] #mobileNav .flex-col .navbar-tab.active {
  color: var(--brand-blue) !important;
  font-weight: 600 !important;
  background-color: rgba(74, 108, 247, 0.1) !important;
  border-radius: 8px !important;
}

/* 汉堡菜单按钮 */
[data-theme=light] button[aria-label="Toggle menu"],
[data-theme=light] button[aria-label*="menu"] {
  background: transparent !important;
  border: none !important;
  color: #5A6478 !important;
  padding: 8px !important;
  border-radius: 8px !important;
}
[data-theme=light] button[aria-label="Toggle menu"]:hover {
  background: rgba(55,117,245,0.08) !important;
  border: none !important;
  color: #3775F5 !important;
}

/* 主题切换按钮 */
[data-theme=light] .theme-btn,
[data-theme=light] button[aria-label*="theme"],
[data-theme=light] button[aria-label*="Theme"] {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E9F0 !important;
  color: #5A6478 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  padding: 8px !important;
  border-radius: 8px !important;
}
[data-theme=light] .theme-btn:hover {
  background: #EEF2FF !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
[data-theme=light] .theme-btn svg { fill: #5A6478 !important; }
[data-theme=light] .theme-btn:hover svg { fill: var(--brand-blue) !important; }


/* ============================================================
   TIER 5：文字颜色全局覆盖（浅色模式）
   ============================================================ */

/* Tailwind 暗色文字类 → 浅色语义 */
[data-theme=light] .text-white {
  color: #1A1D26 !important;
}
/* CTA 按钮文字永远保持白色 */
[data-theme=light] a.text-white[href="/register"],
[data-theme=light] a.text-white.bg-gradient-to-r,
[data-theme=light] button.text-white {
  color: #ffffff !important;
}
[data-theme=light] .text-gray-300 { color: #5A6478 !important; }
[data-theme=light] .text-gray-400,
[data-theme=light] .text-gray-500,
[data-theme=light] .text-slate-400,
[data-theme=light] .text-slate-500 { color: #9CA3B8 !important; }
[data-theme=light] .text-gray-600,
[data-theme=light] .text-slate-300 { color: #5A6478 !important; }

/* 强调色文字 */
[data-theme=light] .text-indigo-400,
[data-theme=light] .text-blue-400 { color: var(--brand-blue) !important; }
[data-theme=light] .text-purple-400 { color: var(--brand-purple) !important; }
[data-theme=light] .text-green-400,
[data-theme=light] .text-emerald-400 { color: var(--color-green) !important; }
[data-theme=light] .text-amber-400,
[data-theme=light] .text-yellow-400 { color: var(--color-orange) !important; }
[data-theme=light] .text-red-400 { color: var(--color-red) !important; }
[data-theme=light] .text-teal-400 { color: #0D9488 !important; }


/* ============================================================
   TIER 6：边框 / 分隔线 / 阴影
   ============================================================ */

[data-theme=light] .border-gray-800,
[data-theme=light] .border-gray-700,
[data-theme=light] .border-gray-600,
[data-theme=light] .border-indigo-500\/50 {
  border-color: #E2E6EF !important;
}
[data-theme=light] hr,
[data-theme=light] .divider { border-color: #E5E9F0 !important; }
[data-theme=light] .divide-gray-700 > * { border-color: #E2E6EF !important; }

[data-theme=light] .shadow-xl,
[data-theme=light] .shadow-2xl,
[data-theme=light] .shadow-lg { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important; }
[data-theme=light] .hover\:bg-white\/10:hover { background-color: rgba(55, 117, 245, 0.08) !important; }


/* ============================================================
   TIER 7：交互组件（按钮 / 输入框 / 卡片 / Tab）
   ============================================================ */

/* --- 7.1 输入框 --- */
[data-theme=light] textarea,
[data-theme=light] input[type=text],
[data-theme=light] input[type=email],
[data-theme=light] input[type=password],
[data-theme=light] input[type=search],
[data-theme=light] .input-area,
[data-theme=light] .demo-input,
[data-theme=light] .chat-input,
[data-theme=light] .model-search-input {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E9F0 !important;
  color: #1A1D26 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}
[data-theme=light] textarea::placeholder,
[data-theme=light] input::placeholder {
  color: #9CA3B8 !important;
}
[data-theme=light] textarea:focus,
[data-theme=light] input:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(55, 117, 245, 0.15) !important;
  outline: none !important;
}
[data-theme=light] #promptInput {
  background-color: #FFFFFF !important;
  border-color: var(--brand-blue) !important;
  border-width: 2px !important;
  color: #1A1D26 !important;
  box-shadow: 0 4px 15px rgba(55, 117, 245, 0.1) !important;
}
[data-theme=light] #promptInput::placeholder { color: #9CA3B8 !important; }
[data-theme=light] #promptInput:focus {
  border-color: var(--brand-blue) !important;
  box-shadow: 0 0 0 3px rgba(55, 117, 245, 0.2) !important;
}

/* --- 7.2 主 CTA 按钮（gradient-button 类） --- */
[data-theme=light] .cta-btn,
[data-theme=light] .cta-btn-primary,
[data-theme=light] .glow-btn,
[data-theme=light] .btn-primary,
[data-theme=light] .analyze-btn,
[data-theme=light] .custom-cost-btn,
[data-theme=light] .deep-assist-btn,
[data-theme=light] .send-btn,
[data-theme=light] .copy-btn-new {
  background: var(--gradient-btn) !important;
  box-shadow: 0 4px 14px rgba(74, 108, 247, 0.25) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border: none !important;
}
[data-theme=light] .cta-btn:hover,
[data-theme=light] .glow-btn:hover {
  background: var(--gradient-btn-hover) !important;
  box-shadow: 0 6px 20px rgba(74, 108, 247, 0.35) !important;
  transform: translateY(-2px) !important;
}
[data-theme=light] .bg-gradient-to-r.from-indigo-500.to-purple-500 {
  background: var(--gradient-brand) !important;
  box-shadow: 0 4px 15px rgba(59, 111, 232, 0.25) !important;
}
[data-theme=light] .bg-gradient-to-r.from-indigo-500.to-purple-500:hover {
  background: var(--gradient-brand-hover) !important;
  box-shadow: 0 6px 20px rgba(59, 111, 232, 0.35) !important;
}

/* --- 7.3 次要按钮 --- */
[data-theme=light] .btn-secondary,
[data-theme=light] .btn-outline {
  background: #FFFFFF !important;
  border: 1.5px solid #E5E9F0 !important;
  color: #5A6478 !important;
}
[data-theme=light] .btn-secondary:hover {
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
  background: #EEF2FF !important;
}

/* 登录按钮 */
[data-theme=light] .login-btn,
[data-theme=light] a[href="/login"],
[data-theme=light] nav .btn {
  background: transparent !important;
  border: 1.5px solid var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
[data-theme=light] .login-btn:hover { background: #EEF2FF !important; }

/* --- 7.4 卡片 --- */
[data-theme=light] .card,
[data-theme=light] .feature-card,
[data-theme=light] .pricing-card,
[data-theme=light] .demo-box,
[data-theme=light] .demo-section,
[data-theme=light] .dashboard-card,
[data-theme=light] .stat-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E9F0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  border-radius: 12px !important;
}
[data-theme=light] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(74, 108, 247, 0.3) !important;
}
[data-theme=light] .pricing-card.featured {
  border: 2px solid var(--brand-blue) !important;
  box-shadow: 0 8px 30px rgba(74, 108, 247, 0.15) !important;
}

/* --- 7.5 Tab 标签 / 场景标签 --- */
[data-theme=light] .mode-tab,
[data-theme=light] .group-tab,
[data-theme=light] .tab-btn {
  background: #F1F3F7 !important;
  border: 1.5px solid #E5E9F0 !important;
  color: #5A6478 !important;
}
[data-theme=light] .mode-tab.active,
[data-theme=light] .tab-btn.active {
  background: #EEF2FF !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
[data-theme=light] .scenario-tag {
  background: #F1F3F7 !important;
  border: 1.5px solid #E5E9F0 !important;
  color: #5A6478 !important;
}
[data-theme=light] .scenario-tag:hover,
[data-theme=light] .scenario-tag.selected {
  background: #EEF2FF !important;
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}


/* ============================================================
   TIER 8：页面特定组件
   ============================================================ */

/* --- 8.1 页脚 --- */
[data-theme=light] footer,
[data-theme=light] .footer,
[data-theme=light] footer.bg-\[\#020617\] {
  background: #F1F3F7 !important;
  border-top: 1px solid #E5E9F0 !important;
  color: #5A6478 !important;
}
[data-theme=light] footer a,
[data-theme=light] .footer a { color: var(--text-muted) !important; }
[data-theme=light] footer a:hover,
[data-theme=light] .footer a:hover { color: var(--brand-blue) !important; }

/* --- 8.2 登录/注册页面 --- */
[data-theme=light] .login-container,
[data-theme=light] .login-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E9F0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* --- 8.3 Hero 区域 --- */
[data-theme=light] .hero h1,
[data-theme=light] .hero-title,
[data-theme=light] .text-4xl,
[data-theme=light] .text-5xl {
  color: #1A1D26 !important;
}
[data-theme=light] .hero p,
[data-theme=light] .hero-subtitle {
  color: #5A6478 !important;
}

/* --- 8.4 功能区块 --- */
[data-theme=light] .features,
[data-theme=light] .feature-section {
  background: #F8F9FA !important;
}
[data-theme=light] .feature-title,
[data-theme=light] .section-title {
  color: #1A1D26 !important;
}
[data-theme=light] .feature-desc,
[data-theme=light] .section-desc {
  color: #5A6478 !important;
}

/* --- 8.5 导航栏 Logo --- */
[data-theme=light] .logo,
[data-theme=light] .navbar-logo,
[data-theme=light] nav .logo,
[data-theme=light] .text-gradient {
  background: var(--gradient-brand) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme=light] .logo-text,
[data-theme=light] .brand-text {
  color: #1A1D26 !important;
  -webkit-text-fill-color: #1A1D26 !important;
}


/* ============================================================
   TIER 9：免费试用按钮（单一来源）
   ============================================================ */

/* 9.1 桌面端导航栏免费试用 */
[data-theme=light] nav .flex-shrink-0 > a[href=/register],
[data-theme=light] nav a[href="/register"] {
  color: #ffffff !important;
  background: var(--gradient-brand) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}
[data-theme=light] nav a[href="/register"]:hover {
  background: var(--gradient-brand-hover) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

[data-theme=dark] nav .flex-shrink-0 > a[href="/register"],
[data-theme=dark] nav a[href="/register"] {
  color: #ffffff !important;
  background: var(--gradient-brand) !important;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}
[data-theme=dark] nav a[href="/register"]:hover {
  background: var(--gradient-brand-hover) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
}

/* 9.2 移动端汉堡菜单免费试用 */
#mobileNav a[href="/register"] {
  color: #ffffff !important;
  background: var(--gradient-btn) !important;
  box-shadow: 0 2px 10px rgba(55, 117, 245, 0.5) !important;
}
#mobileNav a[href="/register"]:hover {
  background: var(--gradient-btn-hover) !important;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.6) !important;
}

/* 9.3 全局：确保免费试用按钮文字始终白色 */
body a[href="/register"].bg-gradient-to-r,
body a[href="/register"].text-white {
  color: #ffffff !important;
}


/* ============================================================
   TIER 10：响应式
   ============================================================ */

@media (max-width: 1024px) {
  /* 移动端侧边栏隐藏（已通过 inline style 处理，此处兜底） */
  html[data-theme=dark] .sidebar-left,
  html[data-theme=dark] .sidebar-right,
  html[data-theme=light] .sidebar-left,
  html[data-theme=light] .sidebar-right {
    display: none !important;
  }

  /* Demo 页深色模式移动端背景 */
  html[data-theme=dark] .demo-container,
  html[data-theme=dark] .demo-wrapper,
  html[data-theme=dark] .demo-content,
  html[data-theme=dark] #demo-app,
  html[data-theme=dark] .demo-page,
  html[data-theme=dark] .demo-body {
    background: var(--bg-primary) !important;
    background-color: var(--bg-primary) !important;
    backdrop-filter: blur(12px) !important;
  }
}