/* =============================================================================
   杨梅AI百科网 · 苹果级纪律设计系统  (design-system.css)
   -----------------------------------------------------------------------------
   本文件是全站设计系统的唯一权威层，必须在所有CSS之后加载（最高层叠优先级）。
   核心原则：
   1. 留白是材料 — 8px基准间距，模块间64px+呼吸空间
   2. 单一强调色 — 黑红#C41E3A，仅用于可行动元素
   3. 字体阶级感 — 三级层级（H1/H2/H3+正文），最多3种字重
   4. 暗色只用于导航骨架 — 正文区浅色高对比
   5. 克制交互 — hover只增强可见性，无夸张缩放/震动/发光
   ============================================================================= */

/* ========================================================================== */
/* 一、设计系统变量层（覆盖现有变量，建立统一纪律）                            */
/* ========================================================================== */
:root {
  /* —— 色彩系统：背景（纯白/极浅冷灰，禁止奶油色米色） —— */
  --color-bg: #FAFAFA;              /* 页面主背景：极浅冷灰 */
  --color-surface: #FFFFFF;         /* 内容卡片/正文区：纯白 */
  --color-surface-2: #F5F5F7;       /* 信息框/次级卡片：浅灰 */
  --color-surface-hover: #F0F0F3;   /* hover态：稍深灰 */
  --color-navbar-bg: rgba(255, 255, 255, 0.72);  /* 导航半透明模糊 */

  /* —— 色彩系统：文字（深灰而非纯黑，四级层级） —— */
  --color-text: #1D1D1F;            /* 一级：标题/重要文字 */
  --color-text-secondary: #424245;  /* 二级：正文 */
  --color-text-muted: #6E6E73;      /* 三级：辅助/注释 */
  --color-text-quaternary: #86868B; /* 四级：禁用/占位 */

  /* —— 色彩系统：分隔/边框（纯灰阶，无装饰色） —— */
  --color-border: #E8E8ED;          /* 默认边框 */
  --color-hairline: #F0F0F3;        /* 极淡发丝线 */
  --color-border-strong: #D2D2D7;   /* 强调边框 */

  /* —— 唯一强调色：黑红（全站仅此一个强调色） —— */
  --color-primary: #C41E3A;         /* 主强调色：按钮/导航操作/展开控件 */
  --color-primary-light: #E03A52;   /* 浅红（hover态） */
  --color-primary-dark: #8B0000;    /* 暗红（active态） */
  --color-primary-bg: rgba(196,30,58,0.08);      /* 极淡红背景（选中/高亮） */
  --color-on-primary: #FFFFFF;       /* 强调色上的文字 */

  /* —— 功能色（克制使用，仅用于状态反馈） —— */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-danger: #FF3B30;
  --color-success-bg: #E8FAEE;
  --color-success-text: #248A3D;
  --color-warning-bg: #FFF4E5;
  --color-warning-text: #B25B00;
  --color-danger-bg: #FFEBE9;
  --color-danger-text: #C41E3A;
  --color-info-bg: rgba(196,30,58,0.08);
  --color-info-text: #C41E3A;

  /* —— 字体系统 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* —— 三级字体层级（字号/字重/字距/行高） —— */
  --ds-h1-size: 28px;      --ds-h1-weight: 600;  --ds-h1-ls: -0.02em;  --ds-h1-lh: 1.25;
  --ds-h2-size: 20px;      --ds-h2-weight: 500;  --ds-h2-ls: -0.01em;  --ds-h2-lh: 1.3;
  --ds-h3-size: 17px;      --ds-h3-weight: 500;  --ds-h3-ls: 0;         --ds-h3-lh: 1.4;
  --ds-body-size: 16px;    --ds-body-weight: 400; --ds-body-lh: 1.7;
  --ds-caption-size: 13px; --ds-caption-weight: 400;
  --ds-small-size: 12px;   --ds-small-weight: 400;

  /* —— 间距系统（8px基准） —— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;         /* 主要模块间垂直间距 */
  --space-12: 96px;

  /* —— 圆角（全站卡片/按钮大圆角统一 16px） —— */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-xl: 8px;         /* 覆盖原24px，统一克制 */
  --radius-full: 9999px;

  /* —— 阴影（克制，无强投影） —— */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl: 0 4px 16px rgba(0,0,0,0.08);  /* 覆盖原强阴影 */

  /* —— 内容宽度 —— */
  --content-max-width: 720px;   /* 正文阅读区：65-75字符 */
  --page-max-width: 1200px;     /* 页面最大宽度 */

  /* —— 导航高度（核心纪律：不超过48px） —— */
  --nav-height: 48px;

  /* —— 过渡（克制，0.15-0.2s） —— */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
}

/* —— 暗色主题：导航骨架暗色，正文区保持高对比 —— */
[data-theme="dark"] {
  --color-bg: #0A0A0C;              /* 页面背景：极深灰 */
  --color-surface: #1C1C1E;         /* 内容卡片 */
  --color-surface-2: #2C2C2E;       /* 信息框/次级卡片 */
  --color-surface-hover: #38383A;   /* hover态 */
  --color-navbar-bg: rgba(28, 28, 30, 0.72);  /* 暗色导航半透明 */

  --color-text: #F5F5F7;            /* 一级：标题 */
  --color-text-secondary: #D1D1D6;  /* 二级：正文 */
  --color-text-muted: #98989D;      /* 三级：辅助 */
  --color-text-quaternary: #6E6E73; /* 四级：占位 */

  --color-border: #38383A;
  --color-hairline: #2C2C2E;
  --color-border-strong: #48484A;

  --color-primary: #E03A52;         /* 暗色模式强调色稍亮 */
  --color-primary-light: #F0556A;
  --color-primary-dark: #C41E3A;
  --color-primary-bg: rgba(196,30,58,0.15);

  --color-success-bg: rgba(52, 199, 89, 0.15);
  --color-success-text: #34C759;
  --color-warning-bg: rgba(255, 149, 0, 0.15);
  --color-warning-text: #FF9500;
  --color-danger-bg: rgba(255, 59, 48, 0.15);
  --color-danger-text: #FF6B63;
  --color-info-bg: rgba(196,30,58,0.15);
  --color-info-text: #F0556A;
}

/* ========================================================================== */
/* 二、基础元素重置与排版纪律                                                  */
/* ========================================================================== */

/* —— 全局盒模型与滚动 —— */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans) !important;
  font-size: var(--ds-body-size) !important;
  font-weight: var(--ds-body-weight) !important;
  line-height: var(--ds-body-lh) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text-secondary) !important;
  transition: background-color 0.24s ease-out, color 0.24s ease-out; /* BUG-14: 主题切换背景平滑过渡，避免白闪 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* —— 三级标题层级（全站统一，不再出现杂乱字号） —— */
h1, .page-main-title, .mm-title, .tt-title, .gk-title, .cl-title,
.gv-title, .lq-title, .hv-title, .cs-title, .ad-title, .hero-title {
  font-family: var(--font-display) !important;
  font-size: var(--ds-h1-size) !important;
  font-weight: var(--ds-h1-weight) !important;
  letter-spacing: var(--ds-h1-ls) !important;
  line-height: var(--ds-h1-lh) !important;
  color: var(--color-text) !important;
  margin: 0 0 var(--space-3) 0 !important;
}

h2, .block-sub-title, .section-title, .wiki-title, .tt-sec-title,
.ad-group-title, .hv-sec-title, .cs-sec-title {
  font-family: var(--font-heading) !important;
  font-size: var(--ds-h2-size) !important;
  font-weight: var(--ds-h2-weight) !important;
  letter-spacing: var(--ds-h2-ls) !important;
  line-height: var(--ds-h2-lh) !important;
  color: var(--color-text) !important;
  margin: var(--space-8) 0 var(--space-3) 0 !important;
}

h3, .gk-field-label, .mm-kv-item dt {
  font-family: var(--font-heading) !important;
  font-size: var(--ds-h3-size) !important;
  font-weight: var(--ds-h3-weight) !important;
  letter-spacing: var(--ds-h3-ls) !important;
  line-height: var(--ds-h3-lh) !important;
  color: var(--color-text) !important;
  margin: var(--space-6) 0 var(--space-2) 0 !important;
}

h4, h5, h6 {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin: var(--space-4) 0 var(--space-2) 0 !important;
}

/* —— 正文段落：最大宽度720px，行高1.7 —— */
p, .mm-lede, .tt-lede, .gk-def, .gk-field-body, .cl-note,
.hv-lede, .cs-lede, .ad-lede, .lq-lede, .wiki-desc,
.entry-card__desc, .hero-subtitle {
  font-family: var(--font-sans) !important;
  font-size: var(--ds-body-size) !important;
  font-weight: var(--ds-body-weight) !important;
  line-height: var(--ds-body-lh) !important;
  color: var(--color-text-secondary) !important;
  margin: 0 0 var(--space-4) 0 !important;
}

/* —— 正文链接纪律：不使用蓝色，改用虚线下划线 —— */
p a, .mm-lede a, .tt-lede a, .gk-def a, .gk-field-body a,
.cl-note a, .hv-lede a, .cs-lede a, .ad-lede a, .lq-lede a,
.wiki-desc a, .entry-card__desc a, .article-content a,
.prose a, .content-body a {
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  border-bottom: 1px dashed var(--color-border-strong) !important;
  transition: border-color var(--transition-fast), color var(--transition-fast) !important;
}

p a:hover, .mm-lede a:hover, .tt-lede a:hover, .gk-def a:hover,
.gk-field-body a:hover, .cl-note a:hover, .hv-lede a:hover,
.cs-lede a:hover, .ad-lede a:hover, .lq-lede a:hover,
.wiki-desc a:hover, .entry-card__desc a:hover,
.article-content a:hover, .prose a:hover, .content-body a:hover {
  color: var(--color-text) !important;
  border-bottom-style: solid !important;
  border-bottom-color: var(--color-text) !important;
}

/* —— 通用链接：继承色，hover提升对比度 —— */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* —— 列表 —— */
ul, ol {
  margin: 0 0 var(--space-4) 0;
  padding-left: var(--space-5);
}

li {
  font-size: var(--ds-body-size);
  line-height: var(--ds-body-lh);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* —— 注释/辅助信息 —— */
.caption, .meta, .timestamp, .source, .reference,
.footer-text, .footer-links, .footer-disclaimer {
  font-size: var(--ds-caption-size) !important;
  font-weight: var(--ds-caption-weight) !important;
  color: var(--color-text-muted) !important;
  line-height: 1.6 !important;
}

/* —— 标签/元信息 —— */
.tag, .badge, .label, .chip {
  font-size: var(--ds-small-size) !important;
  font-weight: 500 !important;
  padding: 2px 8px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  border: none !important;
}

/* ========================================================================== */
/* 三、导航沉默化（48px高度 + 半透明模糊 + 唯一主动元素是搜索框）             */
/* ========================================================================== */

.navbar {
  height: var(--nav-height) !important;
  min-height: var(--nav-height) !important;
  background: var(--color-navbar-bg) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 1000 !important;
  transition: background-color var(--transition-normal) !important;
}

.navbar .container {
  height: var(--nav-height) !important;
  padding: 0 var(--space-5) !important;
}

/* —— 导航logo：克制，无夸张hover —— */
.navbar-logo {
  gap: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
}

.navbar-logo-img {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px var(--color-border) !important;
  transition: opacity var(--transition-fast) !important;
}

.navbar-logo:hover .navbar-logo-img {
  transform: none !important;
  box-shadow: 0 0 0 1px var(--color-border-strong) !important;
  opacity: 0.85 !important;
}

/* —— 导航菜单：低调文字，无装饰 —— */
.navbar-menu {
  gap: 2px !important;
}

.navbar-link {
  padding: 6px 10px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  transition: color var(--transition-fast), background-color var(--transition-fast) !important;
}

.navbar-link:hover {
  color: var(--color-text) !important;
  background: var(--color-primary-bg) !important;
}

/* —— 当前页高亮：冷调蓝 + 底部细线，无渐变 —— */
.navbar-link.active {
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  background: transparent !important;
  position: relative !important;
}

.navbar-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 10px !important;
  right: 10px !important;
  height: 2px !important;
  background: var(--color-primary) !important;
  border-radius: 1px !important;
  background-image: none !important;
}

/* —— 品牌站名条：低调页内标题，移除硬分隔感 —— */
.brand-strip {
  margin-top: 0 !important;
  padding: 2px 16px 4px !important;
  gap: 8px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
}

.brand-strip-text {
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  color: var(--color-text-muted) !important;
  background-image: none !important;
  -webkit-text-fill-color: var(--color-text-muted) !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

.brand-strip-en {
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em !important;
  color: var(--color-text-quaternary) !important;
  opacity: 1 !important;
}

.brand-strip-rule {
  display: none !important;
}

/* —— 主题切换按钮：低调 —— */
.theme-toggle {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-text-muted) !important;
  transition: color var(--transition-fast), background-color var(--transition-fast) !important;
}

.theme-toggle:hover {
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
}

.theme-toggle .icon-svg {
  width: 16px !important;
  height: 16px !important;
}

/* —— 面包屑：低调辅助 —— */
.breadcrumb {
  padding: var(--space-3) 0 !important;
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
}

.breadcrumb a {
  color: var(--color-text-muted) !important;
}

.breadcrumb a:hover {
  color: var(--color-text) !important;
}

.breadcrumb-sep {
  margin: 0 6px !important;
  color: var(--color-text-quaternary) !important;
}

.breadcrumb-current {
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
}

/* ========================================================================== */
/* 四、卡片与信息框系统（浅灰背景、无阴影、圆角≤8px）                         */
/* ========================================================================== */

/* —— 通用卡片：通过背景色区分，不通过重边框或强投影 —— */
.card, .wiki-card, .entry-card, .tool-card, .model-card,
.glossary-card, .search-result-item, .list-item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), background-color var(--transition-fast) !important;
}

.card:hover, .wiki-card:hover, .entry-card:hover, .tool-card:hover,
.model-card:hover, .glossary-card:hover, .search-result-item:hover {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
}

/* —— 信息框infobox：浅灰卡片背景，无阴影 —— */
.infobox, .info-box, .metadata-box, .attr-table,
.gk-infobox, .mm-infobox, .tt-infobox, .reference-box,
.sidebar-card, .toc-card {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  box-shadow: none !important;
}

/* —— 信息框内的表格行 —— */
.infobox tr, .info-box tr, .attr-table tr,
.gk-infobox tr, .mm-infobox tr, .tt-infobox tr {
  border-bottom: 1px solid var(--color-hairline) !important;
}

.infobox tr:last-child, .info-box tr:last-child, .attr-table tr:last-child {
  border-bottom: none !important;
}

.infobox th, .info-box th, .attr-table th,
.gk-infobox th, .mm-infobox th, .tt-infobox th {
  font-size: var(--ds-caption-size) !important;
  font-weight: 500 !important;
  color: var(--color-text-muted) !important;
  text-align: left !important;
  padding: var(--space-2) var(--space-3) !important;
  background: transparent !important;
  border: none !important;
}

.infobox td, .info-box td, .attr-table td,
.gk-infobox td, .mm-infobox td, .tt-infobox td {
  font-size: var(--ds-body-size) !important;
  font-weight: 400 !important;
  color: var(--color-text-secondary) !important;
  padding: var(--space-2) var(--space-3) !important;
  background: transparent !important;
  border: none !important;
}

/* —— 首页快捷卡片：移除彩色渐变，统一灰阶 —— */
.quick-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.quick-card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
}

.quick-card::before {
  display: none !important;  /* 移除顶部彩色渐变条 */
}

.quick-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  font-size: 18px !important;
  margin-bottom: var(--space-3) !important;
}

.quick-card.indigo .quick-icon,
.quick-card.fuchsia .quick-icon,
.quick-card.slate .quick-icon,
.quick-card.emerald .quick-icon {
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
}

.quick-title {
  font-size: var(--ds-h3-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-2) !important;
}

.quick-desc {
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
  line-height: 1.6 !important;
  margin-bottom: var(--space-3) !important;
}

.quick-link {
  padding: 3px 10px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  font-size: var(--ds-small-size) !important;
  font-weight: 400 !important;
  transition: all var(--transition-fast) !important;
}

.quick-link:hover {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* ========================================================================== */
/* 五、按钮系统（唯一强调色用于可行动元素）                                    */
/* ========================================================================== */

/* —— 主按钮：冷调蓝 —— */
.btn, .button, .btn-primary, .btn-action,
button.primary, input[type="submit"], .submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  line-height: 1.4 !important;
  color: var(--color-on-primary) !important;
  background: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.btn:hover, .button:hover, .btn-primary:hover, .btn-action:hover,
button.primary:hover, input[type="submit"]:hover, .submit-btn:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-on-primary) !important;
  transform: scale(1.01) !important;  /* 克制缩放，不超过1.02 */
}

.btn:active, .button:active, .btn-primary:active {
  background: var(--color-primary-dark) !important;
  transform: scale(0.99) !important;
}

/* —— 次要按钮：灰底无边框感 —— */
.btn-secondary, .btn-outline, .btn-ghost,
button.secondary, .cancel-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  color: var(--color-text-secondary) !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  text-decoration: none !important;
}

.btn-secondary:hover, .btn-outline:hover, .btn-ghost:hover,
button.secondary:hover, .cancel-btn:hover {
  background: var(--color-surface-hover) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text) !important;
}

/* —— 文字按钮：仅用于展开/收起等轻量操作 —— */
.btn-text, .text-button, .expand-btn, .collapse-btn,
.toggle-btn {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--color-primary) !important;
  background: none !important;
  border: none !important;
  padding: 4px 8px !important;
  cursor: pointer !important;
  transition: color var(--transition-fast) !important;
  border-radius: var(--radius-sm) !important;
}

.btn-text:hover, .text-button:hover, .expand-btn:hover,
.collapse-btn:hover, .toggle-btn:hover {
  color: var(--color-primary-dark) !important;
  background: var(--color-primary-bg) !important;
}

/* ========================================================================== */
/* 六、输入框与表单（克制反馈，focus蓝色边框）                                 */
/* ========================================================================== */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"],
input[type="url"], textarea, select {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  outline: none !important;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="search"]:focus,
input[type="number"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, textarea:focus, select:focus {
  background: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-bg) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-quaternary) !important;
  font-weight: 400 !important;
}

/* —— 搜索框：导航中唯一主动元素 —— */
.search-box, .search-input, .search-container input,
.nav-search input, .global-search input {
  background: var(--color-surface-2) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  color: var(--color-text) !important;
  outline: none !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.search-box:focus, .search-input:focus,
.search-container input:focus, .nav-search input:focus {
  background: var(--color-surface) !important;
  box-shadow: 0 0 0 1px var(--color-primary) !important;
}

/* ========================================================================== */
/* 七、词条目录TOC（侧边固定，低对比度小字，当前章节高亮）                     */
/* ========================================================================== */

.toc, .table-of-contents, .article-toc, .sidebar-toc {
  position: sticky !important;
  top: calc(var(--nav-height) + var(--space-5)) !important;
  max-height: calc(100vh - var(--nav-height) - var(--space-10)) !important;
  overflow-y: auto !important;
  padding: var(--space-4) !important;
  background: transparent !important;
  border-left: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}

.toc-title, .toc-heading {
  font-size: var(--ds-caption-size) !important;
  font-weight: 500 !important;
  color: var(--color-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: var(--space-3) !important;
}

.toc ul, .table-of-contents ul, .article-toc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.toc li, .table-of-contents li, .article-toc li {
  margin: 0 !important;
  padding: 0 !important;
}

.toc a, .table-of-contents a, .article-toc a {
  display: block !important;
  padding: 4px 12px !important;
  font-size: var(--ds-caption-size) !important;
  font-weight: 400 !important;
  color: var(--color-text-muted) !important;
  border-left: 2px solid transparent !important;
  margin-left: -1px !important;
  transition: color var(--transition-fast), border-color var(--transition-fast) !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
}

.toc a:hover, .table-of-contents a:hover, .article-toc a:hover {
  color: var(--color-text) !important;
}

.toc a.active, .table-of-contents a.active, .article-toc a.active,
.toc a.current, .table-of-contents a.current {
  color: var(--color-primary) !important;
  font-weight: 500 !important;
  border-left-color: var(--color-primary) !important;
}

/* —— TOC嵌套层级缩进 —— */
.toc ul ul a, .table-of-contents ul ul a {
  padding-left: 24px !important;
  font-size: 12px !important;
}

/* ========================================================================== */
/* 八、表格系统（灰阶分隔，无装饰色）                                          */
/* ========================================================================== */

table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 0 var(--space-5) 0 !important;
  font-size: var(--ds-body-size) !important;
}

thead {
  border-bottom: 2px solid var(--color-border) !important;
}

th {
  font-size: var(--ds-caption-size) !important;
  font-weight: 500 !important;
  color: var(--color-text-muted) !important;
  text-align: left !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--color-surface-2) !important;
  border: none !important;
}

td {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--color-hairline) !important;
  color: var(--color-text-secondary) !important;
  vertical-align: top !important;
}

tbody tr:hover {
  background: var(--color-surface-2) !important;
}

tbody tr:last-child td {
  border-bottom: none !important;
}

/* ========================================================================== */
/* 九、弹窗与模态框（克制动画，无夸张特效）                                    */
/* ========================================================================== */

.modal, .modal-dialog, .popup, .overlay-content,
.auth-modal, .confirm-modal {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-6) !important;
  max-width: 480px !important;
  width: 90% !important;
  animation: none !important;
  transition: opacity var(--transition-normal) !important;
}

.modal-overlay, .popup-overlay, .modal-backdrop {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.modal-title, .popup-title {
  font-size: var(--ds-h2-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-4) !important;
}

.modal-close, .popup-close {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-muted) !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
}

.modal-close:hover, .popup-close:hover {
  color: var(--color-text) !important;
  background: var(--color-surface-2) !important;
}

/* ========================================================================== */
/* 十、页面结构与布局纪律                                                      */
/* ========================================================================== */

/* —— 容器：最大宽度1200px —— */
.container {
  max-width: var(--page-max-width) !important;
  margin: 0 auto !important;
  padding: 0 var(--space-5) !important;
}

/* —— 页面主内容区：顶部留出导航+站名条空间 —— */
.main-content, .page-content, .content-wrapper,
article, .article-body, .prose {
  padding-top: var(--space-8) !important;
  padding-bottom: var(--space-10) !important;
}

/* —— 页面标题区 —— */
.page-header, .page-title-section, .hero {
  padding: var(--space-8) 0 var(--space-6) 0 !important;
  margin-bottom: 0 !important;
}

/* —— 主要信息模块间：64px以上垂直间距 —— */
.section, .module, .content-block,
.definition-section, .chapters-section,
.references-section, .graph-section {
  margin-top: var(--space-10) !important;
  margin-bottom: var(--space-10) !important;
}

.section:first-child, .module:first-child {
  margin-top: 0 !important;
}

/* —— 双栏布局：正文+侧边栏，间距32px —— */
.two-column, .article-layout, .content-with-sidebar {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: var(--space-6) !important;
  align-items: start !important;
}

/* —— 正文阅读区：最大宽度720px —— */
.article-content, .prose, .content-body,
.reading-area, .main-article {
  max-width: var(--content-max-width) !important;
  margin: 0 auto !important;
}

/* —— 页脚：低调 —— */
.footer {
  padding: var(--space-8) 0 !important;
  border-top: 1px solid var(--color-border) !important;
  background: var(--color-surface-2) !important;
  margin-top: var(--space-10) !important;
}

.footer-text {
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
  text-align: center !important;
  margin-bottom: var(--space-4) !important;
}

.footer-links {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--space-2) var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
}

.footer-link {
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
  transition: color var(--transition-fast) !important;
}

.footer-link:hover {
  color: var(--color-text) !important;
  text-decoration: underline !important;
}

/* ========================================================================== */
/* 十一、英雄区与首页特色（克制渐变，无夸张特效）                              */
/* ========================================================================== */

.hero {
  text-align: center !important;
  padding: var(--space-10) 0 var(--space-8) 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-title {
  font-size: clamp(28px, 4vw, 40px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-4) !important;
  background: none !important;
  -webkit-text-fill-color: var(--color-text) !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
}

.hero-subtitle {
  font-size: var(--ds-body-size) !important;
  font-weight: 400 !important;
  color: var(--color-text-muted) !important;
  max-width: 560px !important;
  margin: 0 auto var(--space-6) auto !important;
  line-height: 1.7 !important;
}

/* —— 统计数字条 —— */
.hero-stats, .stats-bar, .stat-row {
  display: flex !important;
  justify-content: center !important;
  gap: var(--space-8) !important;
  flex-wrap: wrap !important;
  margin: var(--space-6) 0 !important;
}

.stat-item, .hero-stat {
  text-align: center !important;
}

.stat-number, .hero-stat b {
  display: block !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em !important;
}

.stat-label, .hero-stat span {
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
}

/* —— 板块标题 —— */
.section-title, .wiki-title {
  font-size: var(--ds-h2-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin: var(--space-10) 0 var(--space-5) 0 !important;
  letter-spacing: -0.01em !important;
}

/* ========================================================================== */
/* 十二、代码块与引用（克制样式）                                              */
/* ========================================================================== */

pre, code, kbd, samp {
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

code {
  background: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

pre {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  overflow-x: auto !important;
  margin: 0 0 var(--space-5) 0 !important;
}

pre code {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

blockquote {
  margin: 0 0 var(--space-5) 0 !important;
  padding: var(--space-3) var(--space-5) !important;
  border-left: 3px solid var(--color-border-strong) !important;
  background: var(--color-surface-2) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  color: var(--color-text-muted) !important;
  font-style: normal !important;
}

blockquote p {
  margin-bottom: 0 !important;
}

/* ========================================================================== */
/* 十三、滚动条与焦点可见性                                                    */
/* ========================================================================== */

/* —— 滚动条：克制细条 —— */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-quaternary) !important;
}

/* —— 焦点可见性 —— */
:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
  border-radius: var(--radius-sm) !important;
}

/* —— 锚点跳转：避开固定导航 —— */
[id], section[id], h2[id], h3[id] {
  scroll-margin-top: calc(var(--nav-height) + 40px) !important;
}

/* ========================================================================== */
/* 十四、响应式适配（电脑/平板/手机统一间距与字体层级）                        */
/* ========================================================================== */

/* —— 平板：768-1024px，侧边栏折叠 —— */
@media (max-width: 1024px) {
  .two-column, .article-layout, .content-with-sidebar {
    grid-template-columns: 1fr !important;
  }

  .toc, .table-of-contents, .article-toc, .sidebar-toc {
    position: static !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid var(--color-border) !important;
    padding: var(--space-4) 0 !important;
  }
}

/* —— 手机：<768px，单列，导航汉堡菜单 —— */
@media (max-width: 768px) {
  :root {
    --ds-h1-size: 24px;
    --ds-h2-size: 18px;
    --ds-h3-size: 16px;
    --ds-body-size: 15px;
  }

  .container {
    padding: 0 var(--space-4) !important;
  }

  .navbar .container {
    padding: 0 var(--space-4) !important;
  }

  .hero {
    padding: var(--space-8) 0 var(--space-6) 0 !important;
  }

  .hero-stats, .stats-bar {
    gap: var(--space-5) !important;
  }

  .stat-number, .hero-stat b {
    font-size: 20px !important;
  }

  .card, .wiki-card, .entry-card, .tool-card, .model-card {
    padding: var(--space-4) !important;
  }

  .quick-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-3) !important;
  }

  .section, .module, .content-block {
    margin-top: var(--space-8) !important;
    margin-bottom: var(--space-8) !important;
  }

  .main-content, .page-content {
    padding-top: var(--space-6) !important;
    padding-bottom: var(--space-8) !important;
  }

  /* —— 手机端导航抽屉 —— */
  .navbar-menu.mobile-open {
    padding: var(--nav-height) var(--space-4) var(--space-5) !important;
    gap: 2px !important;
  }

  .navbar-menu.mobile-open .navbar-link {
    padding: 12px 16px !important;
    font-size: 15px !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 400 !important;
  }

  .navbar-menu.mobile-open .navbar-link:hover {
    background: var(--color-primary-bg) !important;
    color: var(--color-text) !important;
  }

  .navbar-menu.mobile-open .navbar-link.active {
    background: var(--color-primary-bg) !important;
    color: var(--color-primary) !important;
    font-weight: 500 !important;
  }

  .navbar-menu.mobile-open .navbar-link.active::after {
    display: none !important;
  }

  /* —— 品牌站名条：手机端简化 —— */
  .brand-strip {
    padding: 5px 12px 4px !important;
    gap: 6px !important;
  }

  .brand-strip-text {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }

  .brand-strip-en {
    display: none !important;
  }

  .brand-strip-rule {
    flex-basis: 20px !important;
  }
}

/* —— 超小屏：<560px —— */
@media (max-width: 560px) {
  .brand-strip-rule {
    display: none !important;
  }

  .hero-stats, .stats-bar {
    gap: var(--space-4) !important;
  }
}

/* ========================================================================== */
/* 十五、减少动画偏好（无障碍）                                                */
/* ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* ========================================================================== */
/* 十六、深色模式正文区高对比保障                                              */
/* ========================================================================== */

[data-theme="dark"] .article-content,
[data-theme="dark"] .prose,
[data-theme="dark"] .content-body,
[data-theme="dark"] .reading-area {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] .page-main-title,
[data-theme="dark"] .section-title {
  color: var(--color-text) !important;
}

/* —— 暗色模式下卡片hover不发光 —— */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .entry-card:hover,
[data-theme="dark"] .quick-card:hover {
  box-shadow: var(--shadow-sm) !important;
}

/* ========================================================================== */
/* 十七、品牌色纪律（杨梅红仅用于logo和开幕动画，不用于UI强调）                */
/* ========================================================================== */

/* —— 确保品牌红不出现在按钮、链接、导航等UI元素中 —— */
.btn, .button, .navbar-link.active, a:hover,
.search-result-type, .tag, .badge {
  /* 这些元素的颜色已在上方定义为冷调蓝或灰阶，
     此处仅作纪律声明：不使用 var(--color-yangmei-red) */
}

/* —— logo区域可使用品牌红 —— */
.navbar-logo-img, .brand-logo, .footer-logo {
  /* logo图片本身包含品牌色，不受CSS影响 */
}

/* ========================================================================== */
/* 十八、v1.1 精准修复（针对首页内联样式与特殊类名）                          */
/* ========================================================================== */

/* —— 品牌站名条：强制移除渐变文字（覆盖 @supports 内的 background-clip:text） —— */
.brand-strip .brand-strip-text {
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #6E6E73 !important;
  color: #6E6E73 !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
}
[data-theme="dark"] .brand-strip .brand-strip-text {
  -webkit-text-fill-color: #98989D !important;
  color: #98989D !important;
}

/* —— 首页统计数字：移除紫色渐变 —— */
.hero-stat-num,
.stat-number,
.hero-stat b,
.stats-num {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--color-text) !important;
  color: var(--color-text) !important;
  font-family: var(--font-display) !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* —— 悬浮"我的"按钮：紫色渐变改为冷调蓝 —— */
.floating-my-btn,
.my-btn-home,
.float-user-btn {
  background: var(--color-primary) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
  color: var(--color-on-primary) !important;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.floating-my-btn:hover,
.my-btn-home:hover {
  background: var(--color-primary-dark) !important;
  transform: scale(1.02) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* —— 热门搜索标签：移除彩色边框，统一灰阶 —— */
.hot-search-tag,
.hot-tag,
.trending-tag,
.search-hot-item {
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--radius-full) !important;
  padding: 4px 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: all var(--transition-fast) !important;
}
.hot-search-tag:hover,
.hot-tag:hover,
.trending-tag:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-bg) !important;
}

/* —— "热门搜索"标题：移除火焰 emoji 后的彩色样式 —— */
.hot-search-title,
.trending-title {
  color: var(--color-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

/* —— 首页大标题：强制移除任何渐变 —— */
.hero-title,
.main-hero-title,
.home-hero h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--color-text) !important;
  color: var(--color-text) !important;
}

/* —— 首页副标题/描述 —— */
.hero-subtitle,
.hero-desc,
.home-hero p {
  color: var(--color-text-muted) !important;
}

/* —— 搜索框：统一浅灰填充、圆角6px、focus蓝色边框 —— */
.hero-search-box,
.home-search input,
.search-container input[type="text"],
.global-search-input {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  height: 48px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--transition-fast) !important;
}
.hero-search-box:focus,
.home-search input:focus,
.search-container input[type="text"]:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-bg) !important;
  background: var(--color-surface) !important;
}

/* —— 搜索按钮：冷调蓝 —— */
.hero-search-btn,
.home-search button,
.search-btn {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  height: 48px !important;
  transition: background-color var(--transition-fast) !important;
}
.hero-search-btn:hover,
.home-search button:hover,
.search-btn:hover {
  background: var(--color-primary-dark) !important;
}

/* —— "试试搜索"提示文字 —— */
.search-suggestions,
.search-hint,
.try-search {
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
}
.search-suggestions a,
.search-hint a,
.try-search a {
  color: var(--color-text-muted) !important;
  border-bottom: 1px dashed var(--color-border-strong) !important;
}
.search-suggestions a:hover,
.search-hint a:hover {
  color: var(--color-text) !important;
  border-bottom-style: solid !important;
}

/* —— 今日AI小知识卡片：统一卡片样式 —— */
.daily-tip-card,
.tip-card,
.daily-knowledge-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  padding: var(--space-4) var(--space-5) !important;
}
.daily-tip-card:hover,
.tip-card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* —— 卡片图标：统一浅灰背景 —— */
.card-icon,
.tip-icon,
.daily-tip-icon {
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  border-radius: var(--radius-md) !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* —— "实用技巧"等标签：统一灰阶 —— */
.tip-category,
.tip-tag,
.card-category {
  background: var(--color-surface-2) !important;
  color: var(--color-text-muted) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* —— 收藏按钮：低调 —— */
.favorite-btn,
.bookmark-btn,
.collect-btn {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-muted) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  transition: all var(--transition-fast) !important;
}
.favorite-btn:hover,
.bookmark-btn:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-bg) !important;
}

/* —— "今日翻到的"等板块标题 —— */
.section-heading,
.pick-section-title,
.today-pick-title {
  font-size: var(--ds-h2-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin: var(--space-8) 0 var(--space-4) 0 !important;
}

/* —— 英文副标题 —— */
.section-subtitle-en,
.pick-section-subtitle {
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

/* —— 已累计使用网站提示 —— */
.usage-timer,
.time-used-badge,
.site-usage-info {
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-full) !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  color: var(--color-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* —— 首页入口卡片网格 —— */
.entry-grid,
.quick-access-grid,
.home-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--space-4) !important;
  margin: var(--space-6) 0 !important;
}

/* —— 通用入口卡片 —— */
.entry-card-item,
.quick-access-card,
.home-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-5) !important;
  box-shadow: none !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer;
}
.entry-card-item:hover,
.quick-access-card:hover,
.home-card:hover {
  border-color: var(--color-border-strong) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
}

/* —— 入口卡片标题 —— */
.entry-card-title,
.quick-access-title,
.home-card-title {
  font-size: var(--ds-h3-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-2) !important;
}

/* —— 入口卡片描述 —— */
.entry-card-desc,
.quick-access-desc,
.home-card-desc {
  font-size: var(--ds-caption-size) !important;
  color: var(--color-text-muted) !important;
  line-height: 1.6 !important;
}

/* —— 移除所有卡片的顶部彩色渐变条（::before） —— */
.quick-card::before,
.pick-card::before,
.wiki-card::before,
.entry-card-item::before,
.home-card::before,
.tool-card::before,
.model-card::before {
  display: none !important;
}

/* —— 移除所有文字渐变效果 —— */
[style*="background-clip:text"],
[style*="-webkit-background-clip:text"] {
  -webkit-text-fill-color: currentColor !important;
}

/* —— 页脚捐赠链接：使用强调色 —— */
.footer-donate a,
.footer-donate .footer-link {
  color: var(--color-primary) !important;
  border-bottom: none !important;
}
.footer-donate a:hover {
  color: var(--color-primary-dark) !important;
  text-decoration: underline !important;
}

/* ========================================================================== */
/* 十九、v1.2 登录与成就系统特殊类名覆盖                                      */
/* ========================================================================== */

/* —— 登录/注册弹窗按钮：移除蓝紫渐变，统一冷调蓝 —— */
.auth-submit,
.nav-login-btn,
.confirm-btn.ok-btn,
.auth-btn-primary,
.login-submit-btn {
  background: var(--color-primary) !important;
  background-image: none !important;
  color: var(--color-on-primary) !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  transition: background-color var(--transition-fast) !important;
}
.auth-submit:hover,
.nav-login-btn:hover,
.confirm-btn.ok-btn:hover {
  background: var(--color-primary-dark) !important;
  transform: scale(1.01) !important;
}

/* —— 登录弹窗装饰光球：紫色改为蓝色（低透明度背景点缀） —— */
.auth-orb-a,
.auth-orb-b,
.auth-float-orb,
.auth-modal::before,
.auth-modal::after {
  background: radial-gradient(circle, var(--color-primary), transparent 70%) !important;
  opacity: 0.15 !important;
}

/* —— 成就系统标签页：移除紫色渐变，统一冷调蓝 —— */
.medal-tab.active,
.achievement-tab.active,
.badge-tab.active {
  background: var(--color-primary) !important;
  background-image: none !important;
  color: var(--color-on-primary) !important;
  border: 1px solid var(--color-primary) !important;
}

/* —— 成就系统排序按钮：hover/active态蓝色 —— */
.medal-sort-btn:hover,
.achievement-sort-btn:hover {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.medal-sort-btn.active,
.achievement-sort-btn.active {
  background: var(--color-primary-bg) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* —— 成就系统浅紫背景改为浅蓝 —— */
.medal-category.active,
.achievement-category.active,
.badge-category.active {
  background: var(--color-primary-bg) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* —— 成就稀有度：紫色稀有度保持（这是功能色，不是UI强调色） —— */
/* .achievement-item[data-rarity="purple"] 保持原样，稀有度颜色是功能标识 */

/* —— 成就卡片hover：克制反馈 —— */
.achievement-item:hover,
.medal-item:hover,
.badge-item:hover {
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}

/* —— 登录弹窗输入框：统一设计系统样式 —— */
.auth-input,
.auth-form input,
.login-input,
.register-input {
  background: var(--color-surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--color-text) !important;
  transition: all var(--transition-fast) !important;
}
.auth-input:focus,
.auth-form input:focus,
.login-input:focus {
  background: var(--color-surface) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-bg) !important;
}

/* —— 登录弹窗标题 —— */
.auth-title,
.login-title,
.modal-header h3 {
  font-size: var(--ds-h2-size) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-4) !important;
}

/* —— 确认弹窗按钮 —— */
.confirm-btn,
.modal-btn {
  padding: 8px 20px !important;
  border-radius: var(--radius-md) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all var(--transition-fast) !important;
}
.confirm-btn.cancel-btn,
.modal-btn.cancel-btn {
  background: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
}
.confirm-btn.cancel-btn:hover,
.modal-btn.cancel-btn:hover {
  background: var(--color-surface-hover) !important;
  border-color: var(--color-border-strong) !important;
}

/* ========================================================================== */
/* 二十、v1.3 全站紫色残留清理与圆角统一                                      */
/* ========================================================================== */

/* —— 个人中心：紫色渐变头像占位符改为冷调蓝 —— */
.profile-avatar-placeholder,
.user-avatar-placeholder,
.avatar-placeholder,
.default-avatar {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
  background-image: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
}

/* —— 个人中心：头像装饰光晕改为蓝色 —— */
.profile-avatar-wrap::before,
.profile-avatar-glow,
.avatar-glow {
  background: radial-gradient(circle, var(--color-primary-bg), transparent 70%) !important;
}

/* —— 路线图页面：紫色营销卡片改为蓝色 —— */
.road-bundle-box,
.bundle-box,
.marketing-card,
.promo-card {
  background: var(--color-primary-bg) !important;
  background-image: none !important;
  border: 1px solid var(--color-primary) !important;
  border-radius: var(--radius-lg) !important;
}

/* —— 路线图页面：紫色背景光晕改为蓝色（低透明度） —— */
.road-hero-bg,
.road-header-bg,
.page-hero-glow {
  background:
    radial-gradient(780px 310px at 9% -20%, rgba(196, 30, 58, 0.08), transparent 68%),
    linear-gradient(180deg, var(--color-surface), transparent 90%) !important;
}

/* —— 全站卡片圆角强制统一为8px（覆盖12px/14px） —— */
.card, .wiki-card, .entry-card, .tool-card, .model-card,
.glossary-card, .search-result-item, .list-item,
.quick-card, .pick-card, .road-bundle-box, .bundle-box,
.profile-card, .user-card, .stat-card, .info-card,
.module-card, .feature-card, .content-card, .data-card,
.admin-card, .leaderboard-card, .achievement-card,
.learning-card, .course-card, .lesson-card,
[class*="-card"]:not([class*="card-bg"]):not([class*="bg-card"]) {
  border-radius: var(--radius-lg) !important;
}

/* —— 信息框/侧边栏卡片圆角统一 —— */
.infobox, .info-box, .metadata-box, .attr-table,
.gk-infobox, .mm-infobox, .tt-infobox, .reference-box,
.sidebar-card, .toc-card, .side-card, .widget-card {
  border-radius: var(--radius-md) !important;
}

/* —— 按钮圆角统一 —— */
.btn, .button, .btn-primary, .btn-action,
button.primary, input[type="submit"], .submit-btn,
.auth-submit, .nav-login-btn, .confirm-btn.ok-btn,
.quick-link, .tag, .badge, .label, .chip {
  border-radius: var(--radius-md) !important;
}

/* —— 输入框圆角统一 —— */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], textarea, select,
.search-box, .search-input, .auth-input, .login-input {
  border-radius: var(--radius-md) !important;
}

/* —— 弹窗/模态框圆角统一 —— */
.modal, .modal-dialog, .popup, .overlay-content,
.auth-modal, .confirm-modal, .dropdown-menu, .popover {
  border-radius: var(--radius-lg) !important;
}

/* —— 通用紫色渐变覆盖：任何元素的蓝紫渐变改为纯蓝 —— */
[style*="linear-gradient(135deg, #6366f1"],
[style*="linear-gradient(135deg,#6366f1"] {
  background: var(--color-primary) !important;
  background-image: none !important;
}

/* —— 知识图谱页面：周边UI紫色覆盖（图谱画布节点颜色保持不变） —— */
.graph-toolbar, .graph-controls, .graph-legend,
.graph-sidebar, .graph-info-panel, .graph-node-info {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
}
.graph-toolbar button, .graph-controls button {
  background: var(--color-surface-2) !important;
  color: var(--color-text-secondary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}
.graph-toolbar button:hover, .graph-controls button:hover {
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}
.graph-toolbar button.active, .graph-controls button.active {
  background: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  border-color: var(--color-primary) !important;
}

/* —— 排行榜页面：紫色元素覆盖 —— */
.rank-badge, .rank-medal, .leaderboard-rank,
.top-user-badge, .rank-avatar-ring {
  border-color: var(--color-primary) !important;
}
.rank-first { color: #F59E0B !important; }  /* 金色保持（功能色） */
.rank-second { color: #9CA3AF !important; } /* 银色保持（功能色） */
.rank-third { color: #CD7F32 !important; }  /* 铜色保持（功能色） */

/* —— 开发者后台：紫色元素覆盖 —— */
.admin-stat-card, .api-key-card, .log-card,
.config-card, .metric-card, .dashboard-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
}
.admin-stat-value, .metric-value, .api-count {
  color: var(--color-text) !important;
  font-weight: 600 !important;
}

/* —— 通用：移除所有元素的紫色文字渐变（background-clip:text） —— */
h1, h2, h3, h4, h5, h6,
.hero-title, .page-main-title, .section-title,
.brand-strip-text, .gradient-text, [class*="gradient-text"] {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}

/* —— 学习中心深色设计：保持原样（这是设计决策，学习模块使用深色主题） —— */
/* 学习中心页面的深色背景是刻意的沉浸式学习环境设计，不纳入浅色统一范围 */

/* ==========================================================================
   设计系统版本：v1.3
   最后更新：2026-09-11
   维护说明：本文件是全站设计系统唯一权威层，所有页面必须在最后加载此文件。
   修改设计规范时只需修改此文件，无需逐个页面调整。
   v1.1：新增首页精准修复（品牌站名渐变、统计数字、悬浮按钮、搜索框、热门标签）
   v1.2：新增登录弹窗与成就系统特殊类名覆盖（移除蓝紫渐变，统一冷调蓝）
   v1.3：全站紫色残留清理（个人中心头像、路线图卡片、知识图谱UI、排行榜、后台）
         + 全站圆角统一为8px（覆盖12px/14px残留）
   ========================================================================== */


/* —— 页脚区域：跟随深浅主题的背景，消除颜色断层（v2.4 主题自适应） —— */
.footer {
  background: var(--color-surface-2) !important;
  margin-top: 0 !important;
}
.home-contact {
  background: var(--color-surface-2) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* v2.3 覆盖：标题条紧贴导航，无横杠 */
.brand-strip { margin-top: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 2px 16px 4px !important; }