/* ========================================
   乐趣编程 - 苹果设计风格覆盖
   7 个方面：色彩 / 排版 / 卡片 / 按钮 / 字体 / 导航 / 视觉噪音
   ======================================== */

/* ===== 1. 字体引入 ===== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ===== 2. CSS 变量覆盖 - 克制配色 ===== */
:root {
  --ds-background: #ffffff !important;
  --ds-foreground: #1d1d1f !important;
  --ds-muted: #f5f5f7 !important;
  --ds-muted-foreground: #8e8e93 !important;
  --ds-accent: #007AFF !important;
  --ds-accent-secondary: #007AFF !important;
  --ds-accent-foreground: #ffffff !important;
  --ds-border: #e5e5ea !important;
  --ds-card: #ffffff !important;
  --ds-ring: #007AFF !important;

  --ds-font-display: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  --ds-font-body: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  --ds-font-mono: "JetBrains Mono", monospace !important;

  --ds-radius-sm: 0.5rem !important;
  --ds-radius-md: 0.75rem !important;
  --ds-radius-lg: 1.2rem !important;
  --ds-radius-xl: 1.2rem !important;
  --ds-radius-full: 9999px !important;

  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.04) !important;
  --ds-shadow-md: 0 1px 2px rgba(0,0,0,0.04) !important;
  --ds-shadow-lg: 0 4px 8px rgba(0,0,0,0.06) !important;
  --ds-shadow-xl: 0 4px 8px rgba(0,0,0,0.06) !important;
  --ds-shadow-accent: none !important;
  --ds-shadow-accent-lg: none !important;

  --ds-section-py: 6rem !important;
  --ds-section-py-lg: 8rem !important;
}

/* ===== 3. 全局基础 - 色彩 + 字体 ===== */
body {
  background: #ffffff !important;
  color: #1d1d1f !important;
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 所有标题统一深色，不加粗+彩色 */
h1, h2, h3, h4, h5, h6 {
  color: #1d1d1f !important;
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
}

/* 次要文字 */
p, span, div {
  font-family: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

/* 代码和数字使用 JetBrains Mono */
code, pre, .font-mono, [class*="mono"] {
  font-family: "JetBrains Mono", monospace !important;
}

/* ===== 4. 消除所有渐变 - 视觉噪音清理 ===== */
.ds-gradient-text,
.text-gradient-primary,
.ds-gradient-bg,
.bg-gradient-primary,
.ds-gradient-bg-diagonal,
.bg-gradient-secondary,
.bg-gradient-rainbow {
  background: #007AFF !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* 渐变文字改为纯深色 */
.ds-gradient-text,
.text-gradient-primary {
  background: none !important;
  -webkit-text-fill-color: #1d1d1f !important;
  color: #1d1d1f !important;
}

/* 渐变边框改为纯色边框 */
.ds-gradient-border {
  background: #e5e5ea !important;
  padding: 0 !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 1.2rem !important;
}

/* 径向光晕隐藏 */
.ds-radial-glow {
  display: none !important;
  opacity: 0 !important;
}

/* 点阵图案隐藏 */
.ds-dot-pattern {
  display: none !important;
}

/* 渐变下划线隐藏 */
.ds-gradient-underline {
  display: none !important;
}

/* section label 去掉蓝色背景和边框 */
.ds-section-label {
  border: 1px solid #e5e5ea !important;
  background: #f5f5f7 !important;
  color: #8e8e93 !important;
}

.ds-section-label .ds-dot {
  background: #8e8e93 !important;
}

/* 深色反色块改为浅灰 */
.ds-inverted {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}

/* 反色块内的白色文字改为深色 */
.ds-inverted *,
.ds-inverted h1,
.ds-inverted h2,
.ds-inverted h3,
.ds-inverted p,
.ds-inverted span,
.ds-inverted div {
  color: #1d1d1f !important;
}

/* 反色块内的次要文字 */
.ds-inverted [class*="muted"],
.ds-inverted [class*="gray"],
.ds-inverted [class*="light"] {
  color: #8e8e93 !important;
}

/* 去掉所有发光阴影 */
.ds-shadow-accent,
.ds-shadow-accent-lg {
  box-shadow: none !important;
}

/* pulse-glow 动画去掉 */
@keyframes pulse-glow {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: none; }
}

/* 代码预览降低透明度 */
.ds-animate-float,
.ds-animate-float-slow,
.ds-animate-float-delayed {
  opacity: 0.12 !important;
}

/* ===== 5. 导航栏 - 苹果极简 ===== */
nav.fixed,
nav[class*="fixed"],
nav {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid #e5e5ea !important;
  height: 52px !important;
  min-height: 52px !important;
  box-shadow: none !important;
}

/* Logo 文字 - 去掉渐变 */
nav .logo,
nav [class*="logo"] {
  font-weight: 600 !important;
  font-size: 18px !important;
  color: #1d1d1f !important;
}

nav .logo span,
nav [class*="logo"] span,
nav a span {
  background: none !important;
  -webkit-text-fill-color: #1d1d1f !important;
  color: #1d1d1f !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* 导航链接 */
nav a {
  color: #1d1d1f !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

nav a:hover {
  color: #007AFF !important;
}

/* ===== 6. 按钮 - 药丸胶囊形态 ===== */
/* 主按钮 CTA - 匹配所有蓝色背景按钮 */
.btn-primary,
.ds-gradient-bg,
button[class*="primary"],
a[class*="primary"],
button[class*="gradient"],
a[class*="gradient"],
button.ds-gradient-bg,
a.ds-gradient-bg,
button[class*="bg-blue"],
a[class*="bg-blue"],
button[style*="background"],
a[style*="background"][class*="gradient"] {
  background: #007AFF !important;
  background-color: #007AFF !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: "DM Sans", "PingFang SC", system-ui, sans-serif !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 蓝色按钮内所有子元素强制白色文字 - 包括 span, p, svg */
button[class*="primary"] *,
a[class*="primary"] *,
button[class*="gradient"] *,
a[class*="gradient"] *,
.btn-primary *,
.ds-gradient-bg *,
button.ds-gradient-bg *,
a.ds-gradient-bg *,
button[class*="bg-blue"] *,
a[class*="bg-blue"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.btn-primary:hover,
.ds-gradient-bg:hover,
button[class*="primary"]:hover,
a[class*="primary"]:hover {
  background: #0056b3 !important;
  transform: none !important;
}

/* 次按钮 */
.btn-secondary,
button[class*="secondary"],
a[class*="secondary"],
.btn-ghost,
button[class*="ghost"],
button[class*="outline"],
a[class*="outline"],
button[class*="border"],
a[class*="border"] {
  background: #f2f2f7 !important;
  color: #1d1d1f !important;
  border: none !important;
  border-radius: 9999px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: "DM Sans", "PingFang SC", system-ui, sans-serif !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-secondary:hover,
button[class*="secondary"]:hover,
.btn-ghost:hover,
button[class*="ghost"]:hover,
button[class*="outline"]:hover,
a[class*="outline"]:hover {
  background: #e5e5ea !important;
}

/* 通用按钮 - 确保所有按钮都是 pill */
button,
a[role="button"],
a[class*="btn"] {
  border-radius: 9999px !important;
  font-family: "DM Sans", "PingFang SC", system-ui, sans-serif !important;
  box-shadow: none !important;
}

/* 去掉按钮渐变 */
button[class*="gradient"],
a[class*="gradient"] {
  background: #007AFF !important;
}

/* ===== 7. 卡片 - 极简风格 ===== */
.ds-gradient-border > .ds-gradient-border-inner,
[class*="card"],
.ds-card,
.bg-white.rounded,
.bg-white[class*="rounded"] {
  background: #ffffff !important;
  border-radius: 1.2rem !important;
  border: 1px solid #e5e5ea !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.2s ease !important;
}

[class*="card"]:hover,
.ds-card:hover,
.bg-white.rounded:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.06) !important;
}

/* 卡片内图标容器改为灰色背景 - 只在 section 内匹配，不匹配导航栏/登录页的 Logo */
/* 匹配 section 内的 w-14.h-14 等图标容器 */
section .w-14.h-14,
section .w-12.h-12,
section .w-16.h-16,
section .w-10.h-10,
section .w-14[class*="rounded"],
section .w-12[class*="rounded"],
section .w-10[class*="rounded"],
section .w-16[class*="rounded"],
section .inline-flex[class*="rounded-2xl"][class*="w-1"],
section .inline-flex[class*="rounded-xl"][class*="w-1"],
section .flex.items-center.justify-center[class*="rounded-2xl"][class*="w-1"],
section .flex.items-center.justify-center[class*="rounded-xl"][class*="w-1"],
section [class*="shadow"][class*="rounded"][class*="w-14"],
section [class*="shadow"][class*="rounded"][class*="w-12"],
section [class*="shadow"][class*="rounded"][class*="w-10"] {
  background: #f5f5f7 !important;
  background-color: #f5f5f7 !important;
  background-image: none !important;
  color: #8e8e93 !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* section 内图标容器中的 SVG 强制灰色 */
section .w-14.h-14 svg,
section .w-12.h-12 svg,
section .w-16.h-16 svg,
section .w-10.h-10 svg,
section .w-14[class*="rounded"] svg,
section .w-12[class*="rounded"] svg,
section .inline-flex[class*="rounded-2xl"][class*="w-1"] svg,
section .inline-flex[class*="rounded-xl"][class*="w-1"] svg,
section .flex.items-center.justify-center[class*="rounded"][class*="w-1"] svg,
section [class*="shadow"][class*="rounded"][class*="w-14"] svg,
section [class*="shadow"][class*="rounded"][class*="w-12"] svg,
section [class*="shadow"][class*="rounded"][class*="w-10"] svg {
  color: #8e8e93 !important;
  stroke: #8e8e93 !important;
  fill: none !important;
  -webkit-text-fill-color: #8e8e93 !important;
}

/* section 内图标容器中 SVG 子元素也强制灰色 */
section .w-14.h-14 svg *,
section .w-12.h-12 svg *,
section .w-16.h-16 svg *,
section .w-10.h-10 svg *,
section .w-14[class*="rounded"] svg *,
section .w-12[class*="rounded"] svg *,
section .inline-flex[class*="rounded-2xl"][class*="w-1"] svg *,
section .inline-flex[class*="rounded-xl"][class*="w-1"] svg * {
  color: #8e8e93 !important;
  stroke: #8e8e93 !important;
  fill: none !important;
}

/* 卡片内所有 SVG 图标强制灰色 - 使用 !important 覆盖内联样式和 Tailwind */
[class*="card"] svg,
[class*="card"] [class*="lucide"],
[class*="card"] svg *,
[class*="card"] svg path,
[class*="card"] svg circle,
[class*="card"] svg rect,
[class*="card"] svg polygon,
[class*="card"] svg line,
[class*="card"] svg polyline {
  color: #8e8e93 !important;
  stroke: #8e8e93 !important;
  fill: none !important;
  -webkit-text-fill-color: #8e8e93 !important;
}

/* 卡片内所有蓝色文字元素强制灰色（图标容器用 currentColor 传递颜色给 SVG）*/
[class*="card"] [class*="text-blue"],
[class*="card"] [class*="text-accent"],
[class*="card"] [style*="color: #007AFF"],
[class*="card"] [style*="color:#007AFF"],
[class*="card"] [style*="color: rgb(0, 122, 255)"],
[class*="card"] [style*="color: #0052FF"],
[class*="card"] [style*="color:#0052FF"],
[class*="card"] [class*="text-[#007AFF]"],
[class*="card"] [class*="text-[#0052FF]"] {
  color: #8e8e93 !important;
  -webkit-text-fill-color: #8e8e93 !important;
}

/* 卡片内图标容器的蓝色背景强制灰色 */
[class*="card"] [class*="bg-blue"],
[class*="card"] [class*="bg-accent"],
[class*="card"] [style*="background: #007AFF"],
[class*="card"] [style*="background:#007AFF"],
[class*="card"] [style*="background-color: #007AFF"],
[class*="card"] [style*="background: #0052FF"],
[class*="card"] [style*="background-color: rgb(0, 122, 255)"] {
  background: #f5f5f7 !important;
  background-color: #f5f5f7 !important;
  color: #8e8e93 !important;
}

/* 全局所有 SVG 图标中的橙色/绿色强制灰色 */
svg [stroke="#f59e0b"],
svg [stroke="#fbbf24"],
svg [stroke="#f59e0b"]:not([class*="card"]),
svg [fill="#f59e0b"],
svg [fill="#fbbf24"],
svg [stroke="#22c55e"],
svg [stroke="#16a34a"],
svg [fill="#22c55e"] {
  stroke: #8e8e93 !important;
  fill: none !important;
}

/* Lucide 图标组件根元素颜色强制 */
[class*="lucide"][style*="color"],
[style*="color: #f59e0b"],
[style*="color:#f59e0b"],
[style*="color: rgb(245, 158, 11)"] {
  color: #8e8e93 !important;
}

/* 卡片内彩色背景容器统一灰色 */
[class*="card"] [style*="background"][style*="color"],
[class*="card"] [class*="bg-"]:not([class*="bg-white"]):not([class*="bg-transparent"]) {
  background: #f5f5f7 !important;
  color: #8e8e93 !important;
}

/* 卡片标题深色 */
[class*="card"] h3,
[class*="card"] h4 {
  color: #1d1d1f !important;
  font-weight: 600 !important;
  font-size: 20px !important;
}

/* 卡片描述文字灰色 */
[class*="card"] p {
  color: #8e8e93 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* 去掉卡片彩色背景 */
[class*="card"][class*="bg-"],
[class*="card"][style*="background"] {
  background: #ffffff !important;
}

/* ===== 8. Hero 区域 - 纯色背景 ===== */
section:first-of-type,
[class*="hero"],
[class*="Hero"] {
  background: #ffffff !important;
  min-height: auto !important;
  padding-top: 120px !important;
  padding-bottom: 96px !important;
}

/* Hero 标题 */
section:first-of-type h1,
[class*="hero"] h1 {
  font-size: 72px !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  color: #1d1d1f !important;
  line-height: 1.1 !important;
  background: none !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

@media (max-width: 768px) {
  section:first-of-type h1,
  [class*="hero"] h1 {
    font-size: 48px !important;
  }
}

/* Hero 副标题 */
section:first-of-type p,
[class*="hero"] p {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #8e8e93 !important;
  line-height: 1.55 !important;
}

/* ===== 9. Section 间距增大 ===== */
.ds-section,
section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

@media (min-width: 768px) {
  .ds-section,
  section {
    padding-top: 128px !important;
    padding-bottom: 128px !important;
  }
}

/* Section 标题 */
section h2 {
  font-size: 48px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
}

@media (max-width: 768px) {
  section h2 {
    font-size: 36px !important;
  }
}

/* ===== 10. 统计数据 - 纯排版方式 ===== */
[class*="stat"] [class*="number"],
[class*="stat"] [class*="value"],
[class*="stat"] [class*="count"] {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 56px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  background: none !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

[class*="stat"] [class*="label"],
[class*="stat"] [class*="text"] {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #8e8e93 !important;
}

/* ===== 11. 表格样式 ===== */
table, .ivu-table {
  border-radius: 1.2rem !important;
  overflow: hidden;
}

/* ===== 12. 页脚 ===== */
footer {
  background: #f5f5f7 !important;
  border-top: 1px solid #e5e5ea !important;
  color: #8e8e93 !important;
}

footer a {
  color: #1d1d1f !important;
  font-size: 14px !important;
}

footer a:hover {
  color: #007AFF !important;
}

/* ===== 13. 去掉 emoji 和装饰性元素 ===== */
[class*="emoji"] {
  display: none !important;
}

/* 去掉动画装饰 */
.ds-animate-rotate-slow {
  display: none !important;
}

/* ===== 14. 滚动条 ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f5f5f7;
}

::-webkit-scrollbar-thumb {
  background: #d1d1d6;
  border-radius: 3px;
}

/* ===== 15. 链接和文字按钮 ===== */
a:not([class*="btn"]):not([class*="button"]):not([class*="primary"]):not([class*="secondary"]):not([class*="gradient"]) {
  color: #007AFF !important;
  text-decoration: none !important;
}

a:not([class*="btn"]):not([class*="button"]):not([class*="primary"]):not([class*="secondary"]):not([class*="gradient"]):hover {
  text-decoration: underline !important;
}

/* ===== 16. 输入框 ===== */
input, textarea, select {
  border-radius: 0.75rem !important;
  border: 1px solid #e5e5ea !important;
  font-family: "DM Sans", "PingFang SC", system-ui, sans-serif !important;
}

input:focus, textarea:focus, select:focus {
  border-color: #007AFF !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* ===== 17. 管理后台侧边栏 ===== */
aside, [class*="sidebar"], [class*="Sidebar"] {
  background: #f2f2f7 !important;
  width: 250px !important;
}

aside a, [class*="sidebar"] a {
  color: #1d1d1f !important;
  border-radius: 0.5rem !important;
}

aside a.active, [class*="sidebar"] a.active,
aside a[class*="active"], [class*="sidebar"] [class*="active"] {
  background: #e5e5ea !important;
  color: #1d1d1f !important;
}

/* ===== 18. 去掉所有不必要的动画 ===== */
.ds-animate-float,
.ds-animate-float-slow,
.ds-animate-float-delayed {
  animation: none !important;
}

/* 保持 fade-in-up 但更柔和 */
.ds-animate-fade-in-up {
  animation: ds-fade-in-up 0.4s ease both !important;
}

/* ===== 19. 卡片内彩色标签去掉 ===== */
[class*="badge"],
[class*="tag"],
[class*="label"][class*="popular"],
[class*="label"][class*="recommend"] {
  background: #f2f2f7 !important;
  color: #8e8e93 !important;
  border: none !important;
  border-radius: 9999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* ===== 20. 内容区域内间距 ===== */
.ds-container, .container-responsive {
  max-width: 1080px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

@media (min-width: 768px) {
  .ds-container, .container-responsive {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ===== 21. 全局颜色强制覆盖 ===== */
/* 去掉所有绿色 */
*[style*="color: #69DB7C"],
*[style*="color:#69DB7C"],
*[style*="color: rgb(105, 219, 124)"],
*[style*="color:rgb(105,219,124)"] {
  color: #8e8e93 !important;
}

/* SVG 中的绿色/橙色/紫色 stroke 强制灰色 */
svg [stroke="#22c55e"],
svg [stroke="#16a34a"],
svg [stroke="#69DB7C"],
svg [stroke="#f59e0b"],
svg [stroke="#fbbf24"],
svg [stroke="#a78bfa"],
svg [stroke="#8b5cf6"],
svg [stroke="#ec4899"],
svg [stroke="#f43f5e"] {
  stroke: #8e8e93 !important;
}

/* Tailwind text-green/orange/purple/pink 类强制灰色 */
.text-green-500, .text-green-400, .text-green-600,
.text-orange-500, .text-orange-400, .text-amber-500, .text-amber-400,
.text-purple-500, .text-purple-400,
.text-pink-500, .text-pink-400,
.text-red-500, .text-red-400 {
  color: #8e8e93 !important;
}

/* Tailwind bg-green/orange/purple 类强制浅灰 */
.bg-green-500, .bg-green-400, .bg-green-100,
.bg-orange-500, .bg-orange-400, .bg-amber-500, .bg-amber-100,
.bg-purple-500, .bg-purple-400,
.bg-pink-500, .bg-pink-400,
.bg-red-500, .bg-red-400 {
  background-color: #f5f5f7 !important;
}

/* ===== 22. muted 背景强制生效 ===== */
/* 只匹配使用 --ds-muted 作为背景的 section，不匹配 --ds-muted-foreground */
section[class*="ds-muted"],
section.bg-\[var\(--ds-muted\)\],
section .bg-\[var\(--ds-muted\)\]\/50,
[class*="bg-\[var\(--ds-muted\)\]"]:not([class*="foreground"]) {
  background-color: #f5f5f7 !important;
}

/* ds-inverted 区域背景强制 #f5f5f7 */
.ds-inverted,
section.ds-inverted {
  background: #f5f5f7 !important;
}

/* ===== 23. 所有 shadow 强制覆盖 ===== */
[class*="shadow"] {
  box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}

[class*="shadow"]:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.06) !important;
}

/* ===== 24. 所有 rounded 强制 1.2rem ===== */
[class*="rounded-2xl"],
[class*="rounded-3xl"] {
  border-radius: 1.2rem !important;
}

/* ===== 25. 去掉 Inter 和 Calistoga 字体加载 ===== */
@font-face {
  font-family: 'Calistoga';
  src: local('Arial');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: local('Arial');
  font-display: swap;
}