:root {
    --color-primary: #3b82f6;
    --color-secondary: #06b6d4;
    --color-accent: #a855f7;
    --color-success: #10b981;
    --font-sans: 'Inter', 'Noto Sans SC', sans-serif;
    --font-mono: 'Fira Code', monospace;

    /* 默认白天模式变量 */
    --color-bg-page: #f8fafc;
    --color-bg-card: rgba(255, 255, 255, 0.85);
    --color-text-main: #0f172a;
    --color-text-muted: #475569;
    --glass-border: rgba(0, 0, 0, 0.08);
    --glow-primary: 0 4px 20px rgba(59, 130, 246, 0.15);
    --grid-line-main: rgba(226, 232, 240, 0.8);
    --grid-line-sub: rgba(241, 245, 249, 0.5);
    --nav-bg: rgba(255, 255, 255, 0.8);
    --nav-border: rgba(0, 0, 0, 0.08);
    --scroll-track: #f1f5f9;
    --scroll-thumb: #cbd5e1;
    --scroll-thumb-hover: #94a3b8;
    --hero-overlay-from: rgba(248, 250, 252, 0.4);
    --hero-overlay-via: rgba(248, 250, 252, 0.9);
    --hero-overlay-to: #f8fafc;
}

html.dark {
    /* 夜晚模式变量 */
    --color-bg-page: #0f172a;
    --color-bg-card: rgba(30, 41, 59, 0.7);
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --glass-border: rgba(255, 255, 255, 0.1);
    --glow-primary: 0 0 20px rgba(59, 130, 246, 0.5);
    --grid-line-main: rgba(15, 23, 42, 0.9);
    --grid-line-sub: rgba(30, 41, 59, 0.3);
    --nav-bg: rgba(15, 23, 42, 0.8);
    --nav-border: rgba(255, 255, 255, 0.1);
    --scroll-track: #0f172a;
    --scroll-thumb: #334155;
    --scroll-thumb-hover: #475569;
    --hero-overlay-from: rgba(15, 23, 42, 0.4);
    --hero-overlay-via: rgba(15, 23, 42, 0.9);
    --hero-overlay-to: #0f172a;
}

body {
    background-color: var(--color-bg-page);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    margin: 0;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 背景网格效果 */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(var(--grid-line-main) 2px, transparent 2px),
        linear-gradient(90deg, var(--grid-line-main) 2px, transparent 2px),
        linear-gradient(var(--grid-line-sub) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-sub) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    z-index: -1;
    transition: background-image 0.3s ease;
}

/* 玻璃拟态卡片 */
.glass-card {
    background: var(--color-bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: var(--glow-primary);
    transform: translateY(-5px);
}

/* 渐变文本 */
.text-gradient {
    background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 渐变文本 */
.text-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background 0.3s ease;
}

html.dark .text-gradient {
    background: linear-gradient(135deg, #60a5fa 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 导航栏样式 */
nav {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--nav-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.nav-link {
    color: var(--color-text-muted);
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--color-primary);
}

/* 英雄区域标题 */
.hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* 装饰性背景圆圈 */
.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    transition: background 0.3s ease;
}

html.dark .blob {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
}

/* 动画 */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.animate-glow {
    animation: pulse-glow 3s infinite;
}

/* 滚动显示动画 */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scroll-track);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-thumb-hover);
}

/* ==========================================
   主题接管与映射：白天模式 (Light Mode)
   ========================================== */
html:not(.dark) .bg-\[\#0f172a\],
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-\[\#1e293b\]\/50,
html:not(.dark) .bg-\[\#1e293b\],
html:not(.dark) .bg-\[\#0f172a\]\/60 {
    background-color: var(--color-bg-page) !important;
}

html:not(.dark) .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

html:not(.dark) .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.03) !important;
}

/* 解决 Hero 遮罩 */
html:not(.dark) .bg-gradient-to-b.from-slate-950\/40.via-\[\#0f172a\]\/90.to-\[\#0f172a\] {
    background-image: linear-gradient(to bottom, var(--hero-overlay-from), var(--hero-overlay-via), var(--hero-overlay-to)) !important;
}

/* 解决其他渐变背景 */
html:not(.dark) .bg-gradient-to-b.from-blue-900\/10.to-violet-900\/10 {
    background-image: linear-gradient(to bottom, rgba(37, 99, 235, 0.06), rgba(139, 92, 246, 0.06)) !important;
}

html:not(.dark) .bg-gradient-to-r.from-slate-800.to-slate-800\/50 {
    background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.6)) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 文字颜色重置 */
html:not(.dark) .text-white,
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
    color: var(--color-text-main) !important;
}

html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
    color: var(--color-text-muted) !important;
}

/* 调暗彩色文本 */
html:not(.dark) .text-cyan-400 { color: #0891b2 !important; }
html:not(.dark) .text-blue-400 { color: #1d4ed8 !important; }
html:not(.dark) .text-violet-400 { color: #6d28d9 !important; }
html:not(.dark) .text-emerald-400 { color: #047857 !important; }
html:not(.dark) .text-amber-400 { color: #b45309 !important; }
html:not(.dark) .text-orange-400 { color: #c2410c !important; }

/* 带背景的彩色块 */
html:not(.dark) .bg-cyan-950\/30 { background-color: rgba(6, 182, 212, 0.08) !important; }
html:not(.dark) .bg-blue-900\/30 { background-color: rgba(37, 99, 235, 0.08) !important; }
html:not(.dark) .bg-violet-900\/30 { background-color: rgba(139, 92, 246, 0.08) !important; }
html:not(.dark) .bg-cyan-900\/30 { background-color: rgba(6, 182, 212, 0.08) !important; }

/* 容器与边框 */
html:not(.dark) .border-white\/10 { border-color: rgba(0, 0, 0, 0.08) !important; }
html:not(.dark) .border-white\/5 { border-color: rgba(0, 0, 0, 0.04) !important; }
	html:not(.dark) .border-slate-700 { border-color: rgba(0, 0, 0, 0.08) !important; }
	html:not(.dark) .border-slate-600 { border-color: rgba(0, 0, 0, 0.1) !important; }

/* 标题特定处理 */
html:not(.dark) h3.text-white,
html:not(.dark) h4.text-white,
html:not(.dark) h5.text-white,
html:not(.dark) span.text-white {
    color: #0f172a !important;
}

/* 补充：卡片背景与悬停 */
html:not(.dark) .glass-card {
    background: var(--color-bg-card);
    border-color: var(--glass-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

html:not(.dark) .glass-card:hover {
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.12), 0 8px 10px -6px rgba(59, 130, 246, 0.12) !important;
}

/* 大模型协同的卡片背景 */

	/* 1. 流程图容器 & 2. 提示词工程 vs 上下文工程：bg-[#0f172a]/80 → 浅色 */
	html:not(.dark) .bg-\[\#0f172a\]\/80 {
	    background-color: rgba(255, 255, 255, 0.9) !important;
	    border-color: rgba(0, 0, 0, 0.08) !important;
	}

	/* 3. 垂直搜索工具 & AI Agent工作台：bg-slate-800 → 白色卡片 */
	html:not(.dark) .bg-slate-800 {
	    background-color: #ffffff !important;
	    border-color: rgba(0, 0, 0, 0.08) !important;
	    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
	}
	html:not(.dark) .bg-slate-800:hover {
	    background-color: #ffffff !important;
	    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
	}

	/* 3b. 生态关联关系 & 技术发展趋势：bg-slate-800/50 → 浅色半透明卡片 */
	html:not(.dark) .bg-slate-800\/50 {
	    background-color: rgba(255, 255, 255, 0.7) !important;
	    border-color: rgba(0, 0, 0, 0.08) !important;
	    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
	}
	/* 生态关联关系 & 技术发展趋势：标题与列表文字颜色 */
	html:not(.dark) .bg-slate-800\/50 h3.text-white {
	    color: #0f172a !important;
	}
	html:not(.dark) .bg-slate-800\/50 h5.text-slate-200 {
	    color: #1e293b !important;
	}
	html:not(.dark) .bg-slate-800\/50 p.text-slate-400 {
	    color: #475569 !important;
	}
	html:not(.dark) .bg-slate-800\/50 p.text-slate-300 {
	    color: #334155 !important;
	}
	/* 生态关联关系 & 技术发展趋势：圆形图标背景 */
	html:not(.dark) .bg-slate-800\/50 .bg-cyan-900\/50 { background-color: rgba(6, 182, 212, 0.12) !important; }
	html:not(.dark) .bg-slate-800\/50 .bg-pink-900\/50 { background-color: rgba(236, 72, 153, 0.12) !important; }
	html:not(.dark) .bg-slate-800\/50 .bg-emerald-900\/50 { background-color: rgba(16, 185, 129, 0.12) !important; }
	html:not(.dark) .bg-slate-800\/50 .bg-violet-900\/50 { background-color: rgba(139, 92, 246, 0.12) !important; }

	/* 3. 垂直搜索工具 & AI Agent工作台：标题文字颜色 */
	html:not(.dark) .group-hover\:text-emerald-300:hover { color: #047857 !important; }
	html:not(.dark) .group-hover\:text-pink-300:hover { color: #be185d !important; }
	html:not(.dark) .text-emerald-300 { color: #047857 !important; }
	html:not(.dark) .text-pink-300 { color: #be185d !important; }

	/* 4. 生态关联关系 & 技术发展趋势：列表文字颜色 */
	html:not(.dark) .text-slate-200 { color: #1e293b !important; }
html:not(.dark) .bg-blue-600\/20 { background-color: rgba(37, 99, 235, 0.08) !important; }
html:not(.dark) .bg-violet-600\/20 { background-color: rgba(139, 92, 246, 0.08) !important; }
html:not(.dark) .bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.06) !important; }
html:not(.dark) .bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.06) !important; }
html:not(.dark) .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.06) !important; }
html:not(.dark) .bg-green-500\/10 { background-color: rgba(16, 185, 129, 0.06) !important; }
html:not(.dark) .bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.08) !important; }

/* 协同层标识字色 */
html:not(.dark) .text-blue-300 { color: #1d4ed8 !important; }
html:not(.dark) .text-violet-300 { color: #6d28d9 !important; }

/* 表格 */
html:not(.dark) thead.bg-white\/5 { background-color: rgba(0, 0, 0, 0.02) !important; }
html:not(.dark) tr.border-white\/5 { border-color: rgba(0, 0, 0, 0.05) !important; }
html:not(.dark) tbody.text-slate-300 { color: #334155 !important; }
html:not(.dark) tr:hover { background-color: rgba(0, 0, 0, 0.012) !important; }
html:not(.dark) .text-white.tracking-tight { color: #0f172a !important; }


/* ==========================================
   主题接管与映射：夜晚模式 (Dark Mode)
   ========================================== */
html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
    background-color: var(--color-bg-card) !important;
}

/* 选型建议背景 */
html.dark .bg-gradient-to-b.from-white.to-slate-50 {
    background-image: linear-gradient(to bottom, #0f172a, #0b0f19) !important;
}

/* 文字颜色重置 */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-slate-600 {
    color: var(--color-text-main) !important;
}

html.dark .text-slate-500 {
    color: var(--color-text-muted) !important;
}

/* 亮色边框重置 */
html.dark .border-slate-200,
html.dark .border-slate-100 {
    border-color: var(--glass-border) !important;
}

/* 产品卡片小色块背景与文字在夜晚模式下的反转 */
html.dark .bg-blue-50 { background-color: rgba(37, 99, 235, 0.15) !important; color: #60a5fa !important; }
html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; }
html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, 0.15) !important; color: #a78bfa !important; }
html.dark .bg-rose-50 { background-color: rgba(244, 63, 94, 0.15) !important; color: #fb7185 !important; }
html.dark .bg-orange-50 { background-color: rgba(249, 115, 22, 0.15) !important; color: #ff9d5c !important; }
html.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; color: #facc15 !important; }
html.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; color: #c084fc !important; }
html.dark .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.15) !important; color: #22d3ee !important; }
html.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; }
html.dark .bg-blue-100 { background-color: rgba(37, 99, 235, 0.25) !important; color: #60a5fa !important; }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.25) !important; color: #34d399 !important; }
html.dark .bg-violet-100 { background-color: rgba(139, 92, 246, 0.25) !important; color: #a78bfa !important; }
html.dark .bg-cyan-100 { background-color: rgba(6, 182, 212, 0.25) !important; color: #22d3ee !important; }
html.dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.25) !important; color: #fb7185 !important; }
html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.25) !important; color: #ff9d5c !important; }
html.dark .bg-slate-200 { background-color: rgba(255, 255, 255, 0.15) !important; color: #e2e8f0 !important; }

html.dark .text-blue-800, html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-emerald-800, html.dark .text-emerald-600 { color: #34d399 !important; }
html.dark .text-violet-800, html.dark .text-violet-600 { color: #a78bfa !important; }
html.dark .text-cyan-700 { color: #22d3ee !important; }
html.dark .text-violet-700 { color: #a78bfa !important; }
html.dark .text-rose-700 { color: #fb7185 !important; }
html.dark .text-orange-700 { color: #ff9d5c !important; }
html.dark .text-emerald-700 { color: #34d399 !important; }

html.dark .border-blue-100 { border-color: rgba(37, 99, 235, 0.2) !important; }
html.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.2) !important; }
html.dark .border-violet-100 { border-color: rgba(139, 92, 246, 0.2) !important; }
html.dark .border-red-100 { border-color: rgba(239, 68, 68, 0.2) !important; }
html.dark .border-orange-100 { border-color: rgba(249, 115, 22, 0.2) !important; }
html.dark .border-yellow-100 { border-color: rgba(234, 179, 8, 0.2) !important; }
html.dark .border-purple-100 { border-color: rgba(168, 85, 247, 0.2) !important; }

/* 渐变框背景适配 */
html.dark .bg-gradient-to-br.from-blue-50.to-white,
html.dark .bg-gradient-to-br.from-emerald-50.to-white,
html.dark .bg-gradient-to-br.from-violet-50.to-white {
    background-image: linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(15, 23, 42, 0.8) 100%) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 选型表格适配 */
html.dark table thead tr {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark table tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}
html.dark table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

/* 沟通案例 */
html.dark .bg-gradient-to-r.from-blue-50.to-cyan-50 {
    background-image: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
}

/* 沟通步骤时间线线段 */
html.dark .bg-slate-200.hidden.md\:block {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 主题按钮的样式微调 */
#theme-toggle {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html:not(.dark) #theme-toggle {
    border-color: rgba(0, 0, 0, 0.08) !important;
    background-color: transparent;
    color: #475569;
}

html:not(.dark) #theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
}

html.dark #theme-toggle {
    border-color: rgba(255, 255, 255, 0.1) !important;
    background-color: transparent;
    color: #94a3b8;
}

html.dark #theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}