/* color.css - 20套柔和渐变模板【低饱和+文字清晰+视觉协调】 */

/* ========== 原有15套模板优化版 ========== */
/* 模板1：科技蓝紫渐变（默认）- 低饱和柔和版 */
.bg-template-1 {
    --bg-body: linear-gradient(135deg, #1f2937 0%, #303946 25%, #414855 50%, #5b5fe0 75%, #4f46e5 100%); /* 过渡更顺滑 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.07) 0%, rgba(79, 70, 229, 0.07) 100%); /* 降低overlay透明度 */
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09); /* 微调透明度更柔和 */
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12); /* 阴影更柔和 */
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板2：暖橙红渐变 - 低饱和焦糖版 */
.bg-template-2 {
    --bg-body: linear-gradient(135deg, #262626 0%, #423d36 25%, #6b6558 50%, #f0b232 75%, #92400e 100%); /* 降低橙色饱和度 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(251, 191, 36, 0.07) 0%, rgba(146, 64, 14, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板3：清新绿蓝渐变 - 低饱和薄荷版 */
.bg-template-3 {
    --bg-body: linear-gradient(135deg, #1e293b 0%, #2a4b4a 25%, #30c890 50%, #08b8d0 75%, #0f766e 100%); /* 绿蓝过渡更自然 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(52, 211, 153, 0.07) 0%, rgba(6, 182, 212, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板4：莫兰迪粉紫渐变 - 低饱和灰紫版 */
.bg-template-4 {
    --bg-body: linear-gradient(135deg, #374151 0%, #555265 25%, #8257e0 50%, #9f81f0 75%, #6b7280 100%); /* 降低紫调饱和度 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.07) 0%, rgba(167, 139, 250, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板5：深海蓝渐变 - 低饱和藏青版 */
.bg-template-5 {
    --bg-body: linear-gradient(135deg, #1e3a8a 0%, #38478f 25%, #5a5de8 50%, #797fe0 75%, #1e293b 100%); /* 蓝色过渡更顺滑 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.07) 0%, rgba(129, 140, 248, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板6：黑金渐变（高级感）- 低饱和暗金版 */
.bg-template-6 {
    --bg-body: linear-gradient(135deg, #111827 0%, #343d4b 25%, #656c79 50%, #c97008 75%, #1f2937 100%); /* 金色更暗更柔和 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(217, 119, 6, 0.07) 0%, rgba(107, 114, 128, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板7：简约浅灰渐变（浅色模式）- 低对比柔和版 */
.bg-template-7 {
    --bg-body: linear-gradient(135deg, #f9fafb 0%, #f1f2f4 25%, #e2e4e8 50%, #cdd1d8 75%, #9ca3af 100%); /* 灰色过渡更自然 */
    --bg-overlay: transparent;
    --text-primary: #232936; /* 文字稍暗，降低刺眼感 */
    --text-secondary: #4e5664;
    --text-title: #161c27;
    --text-arrow: #544ce0; /* 箭头色稍暗 */
    --bg-card: rgba(255,255,255,0.91);
    --bg-icon: rgba(79, 70, 229, 0.09);
    --bg-arrow: rgba(79, 70, 229, 0.11);
    --border-card: rgba(0,0,0,0.07);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.07);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.11);
}

/* 模板8：樱花粉渐变 - 低饱和裸粉版 */
.bg-template-8 {
    --bg-body: linear-gradient(135deg, #f8fafc 0%, #fdf0f0 25%, #f794cc 50%, #e070f0 75%, #b87ef0 100%); /* 粉色更淡 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(249, 168, 212, 0.07) 0%, rgba(232, 121, 249, 0.07) 100%);
    --text-primary: #232936;
    --text-secondary: #4e5664;
    --text-title: #161c27;
    --text-arrow: #b51759; /* 箭头色稍暗 */
    --bg-card: rgba(255,255,255,0.91);
    --bg-icon: rgba(190, 24, 93, 0.09);
    --bg-arrow: rgba(190, 24, 93, 0.11);
    --border-card: rgba(0,0,0,0.07);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.07);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.11);
}

/* 模板9：青柠绿渐变（浅色模式）- 低饱和抹茶版 */
.bg-template-9 {
    --bg-body: linear-gradient(135deg, #f7fee7 0%, #ebf9c8 25%, #9fe8bc 50%, #5ed8a8 75%, #34d399 100%); /* 绿色更柔和 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(167, 243, 208, 0.07) 0%, rgba(110, 231, 183, 0.07) 100%);
    --text-primary: #232936;
    --text-secondary: #4e5664;
    --text-title: #161c27;
    --text-arrow: #08664e; /* 箭头色稍暗 */
    --bg-card: rgba(255,255,255,0.91);
    --bg-icon: rgba(6, 95, 70, 0.09);
    --bg-arrow: rgba(6, 95, 70, 0.11);
    --border-card: rgba(0,0,0,0.07);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.07);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.11);
}

/* 模板10：星空渐变 - 低饱和暗紫版 */
.bg-template-10 {
    --bg-body: linear-gradient(135deg, #0f172a 0%, #281f4b 25%, #481c90 50%, #7538e8 75%, #1e1b4b 100%); /* 紫调更暗 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.07) 0%, rgba(76, 29, 149, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板11：梦幻紫渐变 - 低饱和灰紫版 */
.bg-template-11 {
    --bg-body: linear-gradient(135deg, #312e81 0%, #4037c5 25%, #8055e8 50%, #9c4fe9 75%, #7c3aed 100%); /* 紫调过渡更顺滑 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.07) 0%, rgba(168, 85, 247, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板12：清爽蓝渐变 - 低饱和天青版 */
.bg-template-12 {
    --bg-body: linear-gradient(135deg, #0369a1 0%, #037fc5 25%, #30bff0 50%, #559ef0 75%, #4f46e5 100%); /* 蓝色更柔和 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.07) 0%, rgba(96, 165, 250, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板13：复古焦糖渐变 - 低饱和棕咖版 */
.bg-template-13 {
    --bg-body: linear-gradient(135deg, #3730a3 0%, #6826d6 25%, #e8950d 50%, #8a3c0e 75%, #78350f 100%); /* 焦糖色更暗 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(245, 158, 11, 0.07) 0%, rgba(109, 40, 217, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板14：冷调青蓝渐变 - 低饱和冰蓝版 */
.bg-template-14 {
    --bg-body: linear-gradient(135deg, #0891b2 0%, #07adc0 25%, #20c8e6 50%, #35bff0 75%, #0f9fe0 100%); /* 冰蓝更柔和 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.07) 0%, rgba(56, 189, 248, 0.07) 100%);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-title: #ffffff;
    --text-arrow: #ffffff;
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(255,255,255,0.14);
    --bg-arrow: rgba(255,255,255,0.17);
    --border-card: rgba(255,255,255,0.14);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* 模板15：暗黑灰紫渐变 - 低饱和暗灰版 */
.bg-template-15 {
    --bg-body: linear-gradient(135deg, #27272a 0%, #3c3c43 25%, #505059 50%, #6c6c75 75%, #3f3f46 100%); /* 灰调更均匀 */
    --bg-overlay: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.04) 0%, rgba(124, 58, 237, 0.04) 100%);
    --text-primary: #f5f5f6; /* 文字稍亮但不刺眼 */
    --text-secondary: #d5d5da;
    --text-title: #ffffff;
    --text-arrow: #b57ef0; /* 箭头色稍暗 */
    --bg-card: rgba(255,255,255,0.09);
    --bg-icon: rgba(192, 132, 252, 0.09);
    --bg-arrow: rgba(192, 132, 252, 0.11);
    --border-card: rgba(255,255,255,0.11);
    --shadow-card: 0 4px 14px rgba(0,0,0,0.12);
    --shadow-card-hover: 0 8px 22px rgba(0,0,0,0.18);
}

/* ========== 新增5套仿Link3风格模板 ========== */
/* 模板16：Link3 深空蓝紫 - 低饱和科技版 */
.bg-template-16 {
    --bg-body: linear-gradient(135deg, #0d1117 0%, #161b22 25%, #212630 50%, #353d90 75%, #252a78 100%); /* Link3核心深空渐变 */
    --bg-overlay: radial-gradient(circle at 20% 30%, rgba(53, 61, 144, 0.1) 0%, rgba(37, 42, 120, 0.05) 100%); /* 模拟Link3微光overlay */
    --text-primary: #f8f9fa;
    --text-secondary: #e1e4e8;
    --text-title: #ffffff;
    --text-arrow: #8b949e; /* Link3风格浅灰箭头 */
    --bg-card: rgba(255,255,255,0.06); /* 磨砂玻璃质感 */
    --bg-icon: rgba(255,255,255,0.09);
    --bg-arrow: rgba(255,255,255,0.11);
    --border-card: rgba(255,255,255,0.08);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.15); /* 模拟Link3柔和阴影 */
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.2);
}

/* 模板17：Link3 暗调青蓝 - 低饱和冷光版 */
.bg-template-17 {
    --bg-body: linear-gradient(135deg, #0d1117 0%, #161b22 25%, #212630 50%, #1a5f7a 75%, #154e63 100%); /* Link3冷调青蓝 */
    --bg-overlay: radial-gradient(circle at 20% 30%, rgba(26, 95, 122, 0.1) 0%, rgba(21, 78, 99, 0.05) 100%);
    --text-primary: #f8f9fa;
    --text-secondary: #e1e4e8;
    --text-title: #ffffff;
    --text-arrow: #8b949e;
    --bg-card: rgba(255,255,255,0.06);
    --bg-icon: rgba(255,255,255,0.09);
    --bg-arrow: rgba(255,255,255,0.11);
    --border-card: rgba(255,255,255,0.08);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.2);
}

/* 模板18：Link3 低饱和粉紫 - 柔和霓虹版 */
.bg-template-18 {
    --bg-body: linear-gradient(135deg, #0d1117 0%, #161b22 25%, #212630 50%, #6d4a9c 75%, #5a3d85 100%); /* Link3粉紫霓虹感 */
    --bg-overlay: radial-gradient(circle at 20% 30%, rgba(109, 74, 156, 0.1) 0%, rgba(90, 61, 133, 0.05) 100%);
    --text-primary: #f8f9fa;
    --text-secondary: #e1e4e8;
    --text-title: #ffffff;
    --text-arrow: #8b949e;
    --bg-card: rgba(255,255,255,0.06);
    --bg-icon: rgba(255,255,255,0.09);
    --bg-arrow: rgba(255,255,255,0.11);
    --border-card: rgba(255,255,255,0.08);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.2);
}

/* 模板19：Link3 科技灰蓝 - 极简冷感版 */
.bg-template-19 {
    --bg-body: linear-gradient(135deg, #0d1117 0%, #161b22 25%, #212630 50%, #2c3e50 75%, #243342 100%); /* Link3极简灰蓝 */
    --bg-overlay: radial-gradient(circle at 20% 30%, rgba(44, 62, 80, 0.1) 0%, rgba(36, 51, 66, 0.05) 100%);
    --text-primary: #f8f9fa;
    --text-secondary: #e1e4e8;
    --text-title: #ffffff;
    --text-arrow: #8b949e;
    --bg-card: rgba(255,255,255,0.06);
    --bg-icon: rgba(255,255,255,0.09);
    --bg-arrow: rgba(255,255,255,0.11);
    --border-card: rgba(255,255,255,0.08);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.2);
}

/* 模板20：Link3 暗调金紫 - 高级质感版 */
.bg-template-20 {
    --bg-body: linear-gradient(135deg, #0d1117 0%, #161b22 25%, #212630 50%, #5b4a78 75%, #4a3d63 100%); /* Link3金紫高级感 */
    --bg-overlay: radial-gradient(circle at 20% 30%, rgba(91, 74, 120, 0.1) 0%, rgba(74, 61, 99, 0.05) 100%);
    --text-primary: #f8f9fa;
    --text-secondary: #e1e4e8;
    --text-title: #ffffff;
    --text-arrow: #8b949e;
    --bg-card: rgba(255,255,255,0.06);
    --bg-icon: rgba(255,255,255,0.09);
    --bg-arrow: rgba(255,255,255,0.11);
    --border-card: rgba(255,255,255,0.08);
    --shadow-card: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.2);
}