/* ============================================================
 * DUX-Anthropic Custom Styles
 * Anthropic 极简美学 - 米色基调 + 高对比度 + 克制用色 + 极致留白
 * "低调且鲜艳" - 90%克制米色 + 10%橙色爆发点
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. CSS 变量覆盖 - Anthropic 配色系统
 * ------------------------------------------------------------ */
:root {
  /* 背景色阶 - 米色调渐变 */
  --tb--bdbg: #FAF9F7;
  /* 主背景（温暖米色）*/
  --tb--tint: #F5F4F0;
  /* 侧边栏/次级背景 */
  --tb--white: #FFFFFF;
  /* 卡片/弹窗 */
  --tb--line: #E0DED8;
  /* 分割线（加深对比度）*/

  /* 文字色阶 - 高对比度（WCAG AAA）*/
  --tb--base: #1A1A1A;
  /* 主文字（对比度 15:1）*/
  --tb--gray: #6B6B6B;
  /* 辅助文字（对比度 5:1）*/
  --tb--dark: #0D0D0D;
  /* 深色背景文字 */

  /* 品牌色 - Anthropic 橙棕（克制使用）*/
  --tb--main: #D4643A;
  /* 主品牌色（仅用于关键位置）*/

  /* 扩展变量 - Anthropic 设计语言 */
  --anthropic-primary: #D4643A;
  --anthropic-primary-dark: #B8522D;
  --anthropic-primary-light: #E07A4F;
  --anthropic-text-secondary: #4A4A4A;
  --anthropic-border: #ECEAE4;
  --anthropic-hover-bg: #ECEAE4;
}

/* 暗色模式覆盖 */
.darking:root {
  --tb--base: #E8E8E8;
  --tb--dark: #0A0A0A;
  --tb--white: #1A1A1A;
  --tb--bdbg: #0D0D0D;
  --tb--tint: #1A1A1A;
  --tb--line: #2A2A2A;
  --tb--gray: #888888;
}

/* ------------------------------------------------------------
 * 2. 字体系统 - Inter + 高质量中文字体栈
 * ------------------------------------------------------------ */
body {
  font-family:
    "Inter",
    /* 优先 Inter - Anthropic 官网字体 */
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    /* macOS 系统字体 */
    "HarmonyOS Sans SC",
    /* 鸿蒙黑体 - 华为开源 */
    "Alibaba PuHuiTi",
    /* 阿里普惠体 */
    "PingFang SC",
    /* 苹方 */
    "Microsoft YaHei",
    /* 微软雅黑 */
    "Noto Sans SC",
    /* 思源黑体 */
    sans-serif;
  font-size: 15px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 标题字体加粗 - 清晰层级 */
h1,
h2,
h3,
h4,
h5,
h6,
.excerpt h2,
.title h3,
.widget-title,
.article-title {
  font-weight: 700 !important;
  /* 统一加粗到700 */
  color: var(--tb--base) !important;
  letter-spacing: 0.02em;
  /* 略增字间距，更舒展 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 移动端标题字重优化 - 避免重影 */
@media (max-width: 768px) {

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .excerpt h2,
  .title h3,
  .widget-title,
  .article-title {
    -webkit-font-smoothing: subpixel-antialiased !important;
    -moz-osx-font-smoothing: auto !important;
  }
}

/* 代码字体 - 等宽字体栈 */
code,
pre,
.prettyprint,
.article-content code {
  font-family:
    "JetBrains Mono",
    "SF Mono",
    "Fira Code",
    Consolas,
    "Courier New",
    monospace !important;
  font-weight: 400;
}

/* ------------------------------------------------------------
 * 3. 轮播图区域 - 米色化背景（去除深色大图）
 * ------------------------------------------------------------ */
#bigslide,
#focusslide,
.swiper-container {
  background-color: var(--tb--bdbg) !important;
}

/* 轮播图图片柔和融入 */
#bigslide img,
#focusslide img,
.swiper-slide img {
  opacity: 0.92 !important;
  transition: opacity 0.3s ease;
}

#bigslide:hover img,
#focusslide:hover img,
.swiper-slide:hover img {
  opacity: 1 !important;
}

/* 轮播图控制按钮 - 橙色品牌色 */
.swiper-button-next,
.swiper-button-prev {
  color: var(--tb--main) !important;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--tb--main) !important;
}

/* ------------------------------------------------------------
 * 4. 卡片与文章列表 - 纯白底+克制橙色
 * ------------------------------------------------------------ */
.excerpt {
  background-color: var(--tb--white) !important;
  border: 1.5px solid var(--anthropic-border) !important;
  border-radius: 10px !important;
  /* 不覆盖 padding，保持原主题的负边距图片布局 */
  margin-bottom: 20px !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* 卡片 hover - 橙色边框爆发 + 明显上浮 */
.excerpt:hover {
  border-color: var(--tb--main) !important;
  box-shadow: 0 8px 24px rgba(212, 100, 58, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  transform: translateY(-4px);
}

/* 卡片标题 - 增强视觉权重 */
.excerpt h2,
.excerpt h2 a {
  color: var(--tb--base) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 14px !important;
  letter-spacing: -0.02em !important;
  transition: color 0.2s ease;
}

.excerpt h2 a:hover {
  color: var(--tb--main) !important;
  text-decoration: none !important;
}

/* 卡片摘要文字 */
.excerpt p.note,
.excerpt .note {
  color: var(--anthropic-text-secondary) !important;
  line-height: 1.7 !important;
  margin-top: 10px !important;
  font-size: 14px !important;
}

/* 卡片缩略图容器 - 视觉深度（不裁剪，保留负边距布局） */
.excerpt .focus {
  /* 移除 overflow: hidden，避免裁剪负边距图片 */
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 卡片缩略图 - 圆角处理 */
.excerpt .focus img,
.excerpt img.thumb {
  border-radius: 10px !important;
  display: block !important;
  /* 不覆盖 width，保留原主题的负边距布局系统 */
  /* 不添加 transform，避免在无裁剪容器下溢出圆角 */
}

/* 图片容器悬停效果 - 仅阴影增强 */
.excerpt:hover .focus {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* ------------------------------------------------------------
 * 5. 链接系统 - 默认深色，hover橙色
 * ------------------------------------------------------------ */
a {
  color: var(--tb--base) !important;
  text-decoration: none !important;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
  color: var(--tb--main) !important;
  text-decoration: none !important;
}

/* 文章内链接 - 直接橙色+下划线 */
.article-content a {
  color: var(--tb--main) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: all 0.2s ease;
}

.article-content a:hover {
  color: var(--anthropic-primary-dark) !important;
  text-decoration-thickness: 2px !important;
}

/* ------------------------------------------------------------
 * 6. 按钮系统 - 橙色底白字（克制的强调）
 * ------------------------------------------------------------ */
.btn,
.search-btn,
.btn-primary,
button[type="submit"]:not(#submit),
input[type="submit"],
.button-primary,
.more-link {
  background-color: var(--tb--main) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(212, 100, 58, 0.2) !important;
  cursor: pointer;
}

.btn:hover,
.search-btn:hover,
.btn-primary:hover,
button[type="submit"]:not(#submit):hover,
input[type="submit"]:hover,
.button-primary:hover,
.more-link:hover {
  background-color: var(--anthropic-primary-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212, 100, 58, 0.3) !important;
}

/* ------------------------------------------------------------
 * 7. Header 导航栏 - 视觉层级系统 (Typography Hierarchy)
 * ------------------------------------------------------------ */
.header {
  background-color: var(--tb--white) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  border-bottom: 1px solid var(--tb--line) !important;
}

/* === Typography Hierarchy: 4-Level System === */

/* 1️⃣ Logo (Primary) - 26px/700 */
.logo-text a {
  color: var(--tb--main) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: 0.3px !important;
  transition: transform 0.2s ease, color 0.2s ease;
}

.logo-text a:hover {
  color: var(--anthropic-primary-dark) !important;
  transform: translateX(2px);
}

/* 2️⃣ Navbar (Secondary) - 15px/600 */
.header .site-nav.site-navbar>li>a {
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--tb--base) !important;
  position: relative;
  transition: color 0.2s ease;
}

.header .site-nav.site-navbar>li>a:hover {
  color: var(--tb--main) !important;
}

/* Navbar Hover 下划线动画 */
.header .site-nav.site-navbar>li>a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--tb--main);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.header .site-nav.site-navbar>li>a:hover::after,
.header .site-nav.site-navbar li.current-menu-item>a::after,
.header .site-nav.site-navbar li.current-menu-parent>a::after {
  width: 100%;
}

/* Navbar 当前激活项 - 橙色 + 加粗 */
.header .site-nav.site-navbar li.current-menu-item>a,
.header .site-nav.site-navbar li.current-menu-parent>a {
  color: var(--tb--main) !important;
  font-weight: 700 !important;
}

/* 3️⃣ Slogan/Brand (Tertiary) - 14px/400 */
.header .brand {
  font-size: 14px !important;
  color: #888888 !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

/* 4️⃣ Topbar (Auxiliary) - 13px/500 */
.header .topbar a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #999999 !important;
  transition: color 0.2s ease;
}

.header .topbar a:hover {
  color: var(--tb--main) !important;
}

.header .topbar li.current-menu-item>a {
  color: var(--tb--main) !important;
  font-weight: 600 !important;
}

/* 通用导航链接兼容(兜底规则) */
.site-nav>li>a {
  font-weight: 500 !important;
  font-size: 15px !important;
  color: var(--tb--base) !important;
  transition: color 0.2s ease;
}

.site-nav>li>a:hover {
  color: var(--tb--main) !important;
}

.site-nav li.current-menu-item>a,
.site-nav li.current-menu-parent>a {
  color: var(--tb--main) !important;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------
 * 8. Meta 信息 - Flexbox 统一对齐 + 增强可读性
 * ------------------------------------------------------------ */
.meta,
.post-meta,
.comt-meta {
  color: #5C5C5C !important;
  /* 加深颜色，增强可读性 */
  font-size: 13px !important;
  margin-top: 12px !important;
}

/* 首页文章列表 meta - Flexbox 对齐 */
.excerpt .meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

/* 点赞按钮推到最右边 */
.excerpt .meta .post-like {
  order: 99 !important;
  margin-left: auto !important;
}

.meta a,
.post-meta a {
  color: var(--tb--gray) !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.meta a:hover,
.post-meta a:hover {
  color: var(--tb--main) !important;
}

/* 分类标签 - 精致小标签 */
.meta .cat {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--tb--gray) !important;
  background-color: var(--tb--tint) !important;
  border: 1px solid var(--anthropic-border) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  transition: all 0.2s ease;
}

.meta .cat:hover {
  color: var(--tb--white) !important;
  background-color: var(--tb--main) !important;
  border-color: var(--tb--main) !important;
}

.meta .cat i {
  font-size: 11px !important;
}

/* 作者区域 - Flexbox 对齐 */
.meta .author {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.meta .author .avatar {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* 其他 meta 元素 */
.meta .post-like,
.meta .pv,
.meta .pc,
.meta time {
  display: inline-flex !important;
  align-items: center !important;
}

/* 文章页点赞按钮 - 保持原有样式 */
.post-actions {
  margin: 20px 0 !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .excerpt .meta {
    gap: 8px !important;
    font-size: 12px !important;
  }

  .meta .cat {
    padding: 2px 8px !important;
    font-size: 11px !important;
  }

  .meta .author .avatar {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ------------------------------------------------------------
 * 9. 侧边栏 Widget - 纯白卡片
 * ------------------------------------------------------------ */
.sidebar .widget {
  background-color: var(--tb--white) !important;
  border: 1.5px solid var(--anthropic-border) !important;
  border-radius: 10px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Widget悬停效果 */
.sidebar .widget:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-2px);
}

.widget .title h3 {
  color: var(--tb--base) !important;
  font-weight: 700 !important;
  /* 统一700加粗 */
  font-size: 17px !important;
  letter-spacing: 0.3px !important;
}

.widget .title h3::before {
  background-color: var(--tb--main) !important;
}

/* Widget 链接/列表 - 15px 与正文统一 (原14px) */
.widget li,
.widget li a {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #333333 !important;
  /* 加深颜色，增强对比度 (原 --anthropic-text-secondary #4A4A4A) */
  transition: color 0.2s ease;
}

/* 侧边栏列表项标题 */
.widget li h4,
.widget li h4 a {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

.widget a:hover {
  color: var(--tb--main) !important;
}

/* ------------------------------------------------------------
 * 10. 输入框系统 - 清晰边框+橙色聚焦
 * ------------------------------------------------------------ */
.search-input,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
#comment {
  border: 1.5px solid var(--anthropic-border) !important;
  background-color: var(--tb--white) !important;
  color: var(--tb--base) !important;
  border-radius: 8px !important;
  padding: 10px 15px !important;
  font-size: 14px !important;
  transition: all 0.2s ease;
  outline: none !important;
}

.search-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
#comment:focus {
  border-color: var(--tb--main) !important;
  box-shadow: 0 0 0 3px rgba(212, 100, 58, 0.1) !important;
}

/* ------------------------------------------------------------
 * 11. 阴影系统 - 柔和自然（低不透明度）
 * ------------------------------------------------------------ */
.widget,
.article-content,
.excerpt,
.post-loop,
.comment-signarea,
.comt-box {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.widget:hover,
.excerpt:hover,
.post-loop:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ------------------------------------------------------------
 * 12. 圆角系统 - 统一 8px
 * ------------------------------------------------------------ */
.widget,
.excerpt,
.post-loop,
.article-content,
.comt-box,
.btn,
.search-input,
.search-btn,
input,
textarea {
  border-radius: 8px !important;
}

/* 头像圆形 */
.avatar,
.comt-avatar .avatar {
  border-radius: 50% !important;
}

/* ------------------------------------------------------------
 * 13. 间距系统 - 增加留白（Anthropic 风格）
 * ------------------------------------------------------------ */
.container {
  padding: 0 30px !important;
  max-width: 1280px !important;
}

.content {
  margin-bottom: 30px !important;
  padding-top: 15px !important;
}

.excerpt {
  margin-bottom: 30px !important;
  /* 移除 padding 覆盖，保留原主题的 padding-left: 220px 负边距布局 */
}

.widget {
  margin-bottom: 26px !important;
  padding: 26px !important;
}

/* 标题区域留白 */
.title {
  margin-bottom: 24px !important;
}

/* 文章内容段落间距 */
.article-content p {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.article-content h2,
.article-content h3,
.article-content h4 {
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}

/* ------------------------------------------------------------
 * 14. 面包屑导航 - 米色背景
 * ------------------------------------------------------------ */
.breadcrumbs {
  background-color: var(--tb--tint) !important;
  color: var(--tb--gray) !important;
  border-bottom: 1px solid var(--tb--line) !important;
  border-radius: 0 !important;
}

.breadcrumbs a {
  color: var(--tb--gray) !important;
}

.breadcrumbs a:hover {
  color: var(--tb--main) !important;
}

/* ------------------------------------------------------------
 * 15. 表格优化 - 清晰边框
 * ------------------------------------------------------------ */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1.5px solid var(--anthropic-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

table th {
  background-color: var(--tb--tint) !important;
  color: var(--tb--base) !important;
  font-weight: 600 !important;
  border: 1px solid var(--anthropic-border) !important;
}

table td {
  border: 1px solid var(--tb--line) !important;
  color: var(--anthropic-text-secondary) !important;
}

/* ------------------------------------------------------------
 * 16. 代码块优化 - Anthropic 克制风格
 * ------------------------------------------------------------ */

/* 内联代码 - 米色背景 + 深橙粗体 */
.article-content code {
  background-color: #FAF3ED !important;
  /* 温暖米色背景 */
  color: #C5522D !important;
  /* 深橙色文字,对比度更高 */
  padding: 2px 7px !important;
  /* 减小垂直padding避免重叠 */
  border-radius: 4px !important;
  font-size: 14px !important;
  /* 略微缩小字号 */
  border: 1px solid #F0DFD0 !important;
  /* 柔和边框增强层次 */
  font-weight: 600 !important;
  /* 中粗体,避免过重 */
  letter-spacing: 0.01em !important;
  position: relative !important;
  z-index: 1 !important;
  /* 确保在图片框选之上 */
  display: inline !important;
  /* 强制内联显示 */
  line-height: 1 !important;
  /* 重置行高,避免继承父元素 */
  vertical-align: baseline !important;
  /* 基线对齐 */
}

/* 代码块（<pre>）- Anthropic 优化配色 */
.prettyprint,
pre.prettyprint,
.article-content pre,
pre {
  background-color: #FDFBF7 !important;
  /* 更浅的米白色背景 */
  color: #1A1A1A !important;
  /* 黑色文字 */
  border: 1px solid #E8E4DC !important;
  /* 柔和边框 */
  border-radius: 8px !important;
  padding: 20px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  overflow-x: auto !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  /* 轻微阴影增强层次 */
}

.article-content pre code {
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
}

/* 代码块行号区域 */
.prettyprint.linenums,
pre.prettyprint.linenums {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  background-color: #FDFBF7 !important;
}

.prettyprint.linenums ol,
pre.prettyprint.linenums ol {
  margin: 0 !important;
  padding-left: 45px !important;
}

.prettyprint.linenums ol li,
pre.prettyprint.linenums ol li {
  color: #A0A0A0 !important;
  /* 行号灰色,不干扰阅读 */
  padding-left: 14px !important;
  list-style: decimal !important;
  background-color: transparent !important;
  border-left: 2px solid #E8E4DC !important;
  /* 左侧分隔线 */
  margin-left: -2px !important;
}

/* ============================================================
 * 代码高亮颜色 - Anthropic 优化配色（高对比度）
 * ============================================================ */

/* 注释 - 中灰色 */
.prettyprint .com {
  color: #7A7A7A !important;
  font-style: italic !important;
}

/* 字符串 - 鲜艳绿色 */
.prettyprint .str,
.prettyprint .atv {
  color: #2B9348 !important;
  /* 鲜艳的绿色,对比度高 */
  font-weight: 600 !important;
}

/* 关键字 - 深蓝色加粗 */
.prettyprint .kwd,
.prettyprint .tag {
  color: #2563A8 !important;
  font-weight: 700 !important;
}

/* 函数名 - 深紫色加粗 */
.prettyprint .fun {
  color: #6B4C9A !important;
  font-weight: 700 !important;
}

/* 类型、变量 - 品牌橙色 */
.prettyprint .typ,
.prettyprint .atn,
.prettyprint .dec,
.prettyprint .var {
  color: #D4643A !important;
  font-weight: 600 !important;
}

/* 数字 - 深红色 */
.prettyprint .lit {
  color: #B53A3A !important;
  font-weight: 500 !important;
}

/* 标点符号 - 深灰 */
.prettyprint .pun,
.prettyprint .opn,
.prettyprint .clo {
  color: #3D3D3D !important;
}

/* 普通文本 - 黑色 */
.prettyprint .pln {
  color: #1A1A1A !important;
}

/* ------------------------------------------------------------
 * 17. 过渡动画 - Apple 风格缓动
 * ------------------------------------------------------------ */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.widget,
.excerpt,
.btn,
a,
input,
textarea,
.cat-link,
.tag-link,
.badge {
  transition-duration: 0.2s;
}

/* 卡片悬停上浮动画 */
.excerpt,
.widget {
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ------------------------------------------------------------
 * 18. 评论区优化
 * ------------------------------------------------------------ */
.comt-box {
  border: 1.5px solid var(--anthropic-border) !important;
  border-radius: 8px !important;
  background-color: var(--tb--white) !important;
}

.comt-ctrl {
  background-color: var(--tb--tint) !important;
  border-top: 1px solid var(--anthropic-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 10px 15px !important;
  gap: 12px !important;
}

.comt-ctrl .comt-tips {
  margin-right: auto !important;
}

/* 评论提交按钮 - 精确控制尺寸 */
#submit,
button#submit,
.comt-ctrl #submit,
.comt-ctrl button#submit {
  background-color: var(--tb--main) !important;
  color: #FFFFFF !important;
  border: none !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(212, 100, 58, 0.2) !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  height: auto !important;
  min-height: auto !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

#submit:hover,
button#submit:hover,
.comt-ctrl #submit:hover,
.comt-ctrl button#submit:hover {
  background-color: var(--anthropic-primary-dark) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(212, 100, 58, 0.3) !important;
}

/* ------------------------------------------------------------
 * 19. 强制覆盖 - 确保样式优先级
 * ------------------------------------------------------------ */

/* 所有标题颜色 */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--tb--base) !important;
}

/* 所有正文颜色 */
p {
  color: var(--anthropic-text-secondary) !important;
}

/* 所有边框颜色 */
.widget,
.excerpt,
.sidebar .widget,
.comt-box,
input,
textarea {
  border-color: var(--anthropic-border) !important;
}

/* 背景色统一 */
body {
  background-color: var(--tb--bdbg) !important;
}

/* ------------------------------------------------------------
 * 20. 移动端优化
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
  .container {
    padding: 0 15px !important;
  }

  .excerpt {
    /* 不覆盖 padding，保持原主题图片布局 */
    margin-bottom: 16px !important;
  }

  .widget {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  body {
    font-size: 14px !important;
  }

  .excerpt h2,
  .excerpt h2 a {
    font-size: 18px !important;
  }
}

/* ------------------------------------------------------------
 * 21. Branding CTA 区域 - 白色背景（修复黑色bug）
 * ------------------------------------------------------------ */
.branding {
  background-color: var(--tb--white) !important;
  background-image: none !important;
  border-top: 1px solid var(--tb--line) !important;
  border-bottom: 1px solid var(--tb--line) !important;
  padding: 60px 20px !important;
}

.branding h2 {
  color: var(--tb--base) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
}

.branding h4 {
  color: var(--tb--gray) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  max-width: 600px !important;
  margin: 0 auto 30px !important;
}

/* CTA按钮已在第6节定义，会自动应用橙色样式 */

/* ------------------------------------------------------------
 * 22. Footer 底部区域 - 米色背景
 * ------------------------------------------------------------ */
.footer {
  background-color: var(--tb--tint) !important;
  color: var(--tb--gray) !important;
  border-top: none !important;
  padding: 40px 0 20px !important;
}

.footer p {
  color: var(--tb--gray) !important;
  font-size: 13px !important;
}

.footer a {
  color: var(--tb--gray) !important;
  transition: color 0.2s ease;
}

.footer a:hover {
  color: var(--tb--main) !important;
}

/* Footer 链接区域 */
.flinks {
  background-color: var(--tb--white) !important;
  border: 1px solid var(--anthropic-border) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin-bottom: 30px !important;
}

.flinks strong {
  color: var(--tb--base) !important;
  font-weight: 600 !important;
}

.flinks ul {
  margin-top: 15px !important;
}

.flinks li {
  display: inline-block !important;
  margin-right: 20px !important;
}

.flinks li a {
  color: var(--anthropic-text-secondary) !important;
  font-size: 14px !important;
}

.flinks li a:hover {
  color: var(--tb--main) !important;
}

/* ------------------------------------------------------------
 * 23. 文章页标签 (article-tags) - Anthropic 风格
 * ------------------------------------------------------------ */
.article-tags {
  margin: 20px 0 !important;
  padding: 15px 0 !important;
  border-top: 1px solid var(--tb--line) !important;
  border-bottom: 1px solid var(--tb--line) !important;
}

.article-tags a,
.article-tags a:link,
.article-tags a:visited {
  display: inline-block !important;
  color: #1A1A1A !important;
  background-color: #F5F4F0 !important;
  border: 1px solid #ECEAE4 !important;
  padding: 6px 16px !important;
  margin: 5px 8px 5px 0 !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  opacity: 1 !important;
}

.article-tags a:hover {
  color: var(--tb--white) !important;
  background-color: var(--tb--main) !important;
  border-color: var(--tb--main) !important;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
 * 24. 文章详情页优化
 * ------------------------------------------------------------ */

/* 文章页点赞/打赏按钮 - 不受meta样式影响 */
.post-actions .action {
  /* 保持主题原有样式，不强制覆盖 */
  display: inline-block !important;
}

/* 文章Meta信息 - 保持简洁 */
.article-meta {
  margin-top: 12px !important;
  font-size: 13px !important;
  color: var(--tb--gray) !important;
}

.article-meta .item {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 12px !important;
  color: var(--tb--gray) !important;
}

.article-meta .item a {
  color: var(--tb--gray) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.article-meta .item a:hover {
  color: var(--tb--main) !important;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .article-meta {
    font-size: 12px !important;
  }

  .article-meta .item {
    margin-right: 10px !important;
  }
}

/* ------------------------------------------------------------
 * 25. 首页模块优化
 * ------------------------------------------------------------ */

/* 今日观点标题 - 增强视觉权重 */
.excerpt-minic-index h2 {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
}

.excerpt-minic-index h2 a.red {
  color: var(--tb--main) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.excerpt-minic-index h2 a:not(.red) {
  color: var(--tb--base) !important;
  font-weight: 600 !important;
}

.excerpt-minic-index h2 a:hover {
  color: var(--tb--main) !important;
}

.excerpt-minic-index .note {
  color: var(--tb--gray) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  margin-top: 8px !important;
}

/* 最新发布模块 - 向上收紧间距 + 标题居中 */
.widget-new {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}

.widget-new .title {
  margin-bottom: 16px !important;
  text-align: center !important;
}

.widget-new .title h3 {
  display: inline-block !important;
}

.widget-new .title .more {
  display: none !important;
}

/* 首页最新发布标题 - 垂直居中对齐 */
.content .title.excerpts-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
  /* 覆盖原主题 17px 20px 0px，使垂直居中 */
  min-height: auto !important;
}

.content .title.excerpts-title h3 {
  margin: 0 !important;
  font-size: 16px !important;
  /* 统一板块标题字号 */
  font-weight: 700 !important;
  /* 统一板块标题字重 */
  line-height: 1.4 !important;
  letter-spacing: 0.3px !important;
  flex-shrink: 0 !important;
}

.content .title.excerpts-title .more {
  margin: 0 !important;
  margin-top: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  line-height: 1 !important;
}

.content .title.excerpts-title .more a {
  display: inline-block !important;
  line-height: 1 !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  margin-left: 0 !important;
}

/* 如果最新发布在今日观点之后，减少上边距 */
.excerpt-minic-index+.widget-new {
  margin-top: 12px !important;
}

/* ------------------------------------------------------------
 * 26. 移动端优化
 * ------------------------------------------------------------ */

/* 移动端 - 最新发布标题区域优化 */
@media (max-width: 768px) {
  .title.excerpts-title {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-height: auto !important;
  }

  .title.excerpts-title h3 {
    width: 100% !important;
  }

  .title.excerpts-title .more {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .title.excerpts-title .more a {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
}

/* 移动端 - 文章列表标题字体 16px */
@media (max-width: 768px) {

  .excerpt h2,
  .excerpt h2 a {
    font-size: 16px !important;
  }

  /* 隐藏作者信息，只显示日期和分类 */
  .excerpt .meta .author {
    display: none !important;
  }
}

/* === 移动端深度优化 (600px以下) === */
@media (max-width: 600px) {

  /* 侧边栏Widget隐藏 - 保留widget-on-phone类 */
  .sidebar .widget {
    display: none !important;
  }

  .sidebar .widget-on-phone {
    display: block !important;
  }

  /* 文章卡片布局 - 适配原主题移动端策略 */
  .excerpt {
    padding: 14px 150px 15px 15px !important;
    /* 右侧留出缩略图空间，与原主题保持一致 */
  }

  /* 缩略图移到右侧 */
  .excerpt .focus {
    float: right !important;
    margin-left: -135px !important;
    width: 120px !important;
    height: 82px !important;
  }

  /* 全文/无缩略图文章不受影响 */
  .excerpt-full .focus,
  .excerpt-fullvideo .focus,
  .excerpt-text .focus {
    float: none !important;
    margin-left: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Meta信息紧凑化 */
  .excerpt .meta {
    gap: 8px !important;
    font-size: 12px !important;
  }

  /* 标题字号进一步缩小 */
  .excerpt h2,
  .excerpt h2 a {
    font-size: 15px !important;
  }
}

/* ------------------------------------------------------------
 * 27. 细节微调 (Sidebar & Header) - 2024-12-27 Update
 * ------------------------------------------------------------ */

/* 侧边栏列表增强 - 拒绝细字体，增加权重 */
body .sidebar .widget li a {
  font-weight: 600 !important;
  /* 加粗到 600 */
  color: #000000 !important;
  /* 纯黑 #000000 */
  letter-spacing: 0.02em !important;
}

body .sidebar .widget li a:hover {
  color: var(--tb--main) !important;
}

/* 侧边栏时间轴/列表图标 - 去蓝化 (Neutralize Blue) */
/* 覆盖 DUX 主题默认的蓝色小圆点/箭头 */
.widget_ui_posts .i-list li:before,
.widget ul li:before {
  color: var(--tb--line) !important;
  /* 统一为灰色,移除background-color避免阴影 */
}

/* 最新评论 Widget - 保持稍微克制的样式 */
.widget_ui_comments li,
.widget_ui_comments li a {
  font-size: 14px !important;
  /* 评论保持小一号，更紧凑 */
  color: var(--tb--gray) !important;
  /* 评论人/内容保持灰色，避免喧宾夺主 */
  font-weight: 400 !important;
}

/* Header Logo 区域优化 - 增加 body 权重 */
body .logo-title {
  display: flex !important;
  align-items: center !important;
  /* 垂直居中对齐 */
  gap: 15px !important;
}

/* Logo 主文字 */
.logo-title h1 a,
.logo-text {
  color: var(--tb--main) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  /* 品牌感紧凑 */
}

/* Slogan / 副标题 - 增强可读性 + 垂直分割线 */
.logo-title small,
.site-description {
  color: #666666 !important;
  /* 加深灰色，提高可读性 (原为浅灰) */
  font-size: 13px !important;
  font-weight: 400 !important;
  padding-left: 12px !important;
  border-left: 1px solid var(--tb--line) !important;
  /* 垂直分割线 */
  line-height: 1.2 !important;
  /* 防止过长挤压导航 */
  display: inline-block !important;
  opacity: 1 !important;
}

/* ------------------------------------------------------------
 * 28. Header Layout (2x2 Grid) - 2024-12-27 Final
 * 左侧：Logo + Slogan (垂直排列)
 * 右侧：Topbar + MainNav (垂直排列，右对齐)
 * ------------------------------------------------------------ */

.header .container {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  /* 左侧自适应 | 中间弹性 | 右侧自适应(Search) */
  grid-template-rows: auto auto !important;
  /* 两行 */
  align-items: baseline !important;
  /* center → baseline (文字基线对齐,消除割裂感) */
  padding: 20px 20px !important;
  /* 12px → 20px (8px 网格系统) */
  column-gap: 60px !important;
  row-gap: 8px !important;
  /* 4px → 8px (基准垂直节奏) */
  height: auto !important;
}

/* === 左侧品牌块 === */
.header .logo {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 0 4px 0 !important;
  /* Logo 与 Slogan 微小间隙 */
  padding: 0 !important;
  float: none !important;
  line-height: 1.2 !important;
}

.header .logo a {
  display: block !important;
  line-height: 1.2 !important;
}

.header .brand {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: none !important;
  /* 字体样式由上方 Typography Hierarchy 统一控制 */
  max-width: 450px !important;
  height: auto !important;
  display: block !important;
  float: none !important;
}

/* === 右侧导航块 === */
.header .topbar {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  position: static !important;
  text-align: right !important;
  margin: 0 0 6px 0 !important;
  /* Topbar 与 Navbar 垂直分隔 */
  padding: 0 !important;
  width: auto !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
}

.header .topbar ul {
  float: none !important;
  display: inline-flex !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.header .topbar li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header .site-nav.site-navbar {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  gap: 20px !important;
  /* 16px → 20px (增加主导航呼吸感) */
  order: initial !important;
  float: none !important;
  align-items: center !important;
}

.header .navto-search {
  grid-column: 3 !important;
  /* 独立第3列 */
  grid-row: 2 !important;
  justify-self: end !important;
  margin: 0 !important;
  order: initial !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  z-index: 10 !important;
  position: relative !important;
  color: var(--tb--base) !important;
  transform: scale(1);
  transition: transform 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.header .navto-search:hover {
  color: var(--tb--main) !important;
  transform: scale(1.1);
}

/* 搜索图标尺寸/粗细统一 */
.header .navto-search i {
  font-size: 18px !important;
  font-weight: 400 !important;
  vertical-align: middle !important;
}

/* 暗色模式切换图标 */
.header .sitedark i {
  font-size: 16px !important;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.header .sitedark:hover i {
  opacity: 1;
}

/* 强制覆盖 .header 的顶部 padding */
.header {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

/* === 移动端适配 - CSS-Only 单行对齐 === */
@media (max-width: 768px) {

  /* ============================================================
   * MOBILE HEADER LAYOUT FIX (CSS-Only)
   * 设计目标: 菜单(左) - Logo(中) - 搜索(右) 单行对齐
   * 实现方式: 全部使用 position:fixed，相对于 viewport 对齐
   * ============================================================ */

  /* 1️⃣ Header - 固定在顶部，作为视觉背景 */
  body .header,
  .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999 !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  }

  /* 1️⃣-b Body 需要向下 padding 来补偿 fixed header */
  body {
    padding-top: 50px !important;
  }

  /* 2️⃣ Header 容器 - 撑满父元素 */
  body .header .container,
  .header .container {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 60px !important;
    /* 左右留空给菜单和搜索 */
    margin: 0 !important;
  }

  /* 3️⃣ Logo - 居中（相对于 header container） */
  body .header .logo,
  .header .logo,
  .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 100 !important;
    width: auto !important;
    max-width: calc(100% - 120px) !important;
    /* 防止和左右图标重叠 */
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .header .logo a,
  .logo a {
    display: inline-block !important;
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    color: var(--tb--main) !important;
    font-weight: 700 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* 4️⃣ 菜单图标 - 固定左上角 (相对于 viewport) */
  .m-icon-nav {
    position: fixed !important;
    left: 15px !important;
    top: 15px !important;
    /* (50px - 20px icon) / 2 = 15px */
    z-index: 1001 !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 15px !important;
    width: auto !important;
    height: auto !important;
  }

  .m-icon-nav i {
    font-size: 20px !important;
    color: #333 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
  }

  /* 5️⃣ 搜索图标 - 固定右上角 (相对于 viewport) */
  body .header .navto-search,
  .header .navto-search,
  .navto-search {
    position: fixed !important;
    right: 15px !important;
    top: 1px !important;
    /* 用户确认值 */
    z-index: 1001 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 6️⃣ 隐藏桌面版元素 */
  .header .brand,
  .header .topbar,
  .header .site-nav.site-navbar,
  .site-nav.site-navbar,
  .header ul.site-navbar {
    display: none !important;
  }
}

/* === 移动端进一步优化 (600px以下) === */
@media (max-width: 600px) {

  /* 容器宽度适配 */
  .container {
    padding: 0 15px !important;
    max-width: 100% !important;
  }

  .header .container {
    padding: 10px 15px !important;
    gap: 6px !important;
  }

  .header .navto-search {
    top: 10px !important;
    right: 15px !important;
  }

  /* Widget卡片间距 */
  .widget {
    margin-bottom: 16px !important;
    padding: 16px !important;
  }

  /* 标题层级字号 */
  h1 {
    font-size: 22px !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 18px !important;
  }

  h4 {
    font-size: 16px !important;
  }
}

/* ============================================================
 * 设计哲学：低调且鲜艳
 *
 * 低调（90%）：
 *   - 米色背景 #FAF9F7
 *   - 灰色文字 #1A1A1A / #6B6B6B
 *   - 白色卡片
 *   - 柔和阴影 rgba(0,0,0,0.04)
 *
 * 鲜艳（10%）：
 *   - 橙色 #D4643A 仅在：
 *     · 链接 hover
 *     · 按钮
 *     · 当前激活状态
 *     · 分类标签 hover
 *     · 卡片边框 hover
 *
 /* ------------------------------------------------------------
 * 24. 导航菜单项间距调整
 * ------------------------------------------------------------ */
.site-nav>li {
  margin-left: -7px;
}

/* ------------------------------------------------------------
 * 25. 分类页标题区域底部间距
 * ------------------------------------------------------------ */
.catleader {
  margin-bottom: 12px;
}

/* 核心原则：
 *   - 克制用色，让橙色成为视觉焦点
 *   - 高对比度文字，确保可读性
 *   - 极致留白，营造呼吸感
 *   - 柔和动画，Apple 风格过渡
 * ============================================================ */

/* ------------------------------------------------------------
 * 33. 404页面样式优化
 * ------------------------------------------------------------ */
.f404 {
  text-align: center !important;
  padding: 60px 20px !important;
  max-width: 800px !important;
  margin: 0 auto !important;
}

.f404-icon {
  margin-bottom: 30px !important;
}

.f404-icon i {
  font-size: 120px !important;
  color: var(--tb--gray) !important;
  opacity: 0.5 !important;
}

.f404 h1 {
  color: var(--tb--base) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  margin-bottom: 15px !important;
  letter-spacing: -0.02em !important;
}

.f404 h2 {
  color: var(--tb--gray) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  margin-bottom: 40px !important;
}

.f404-search {
  max-width: 500px !important;
  margin: 0 auto 50px !important;
}

.f404-search .site-search-form {
  display: flex !important;
  gap: 10px !important;
}

.f404-search .search-input {
  flex: 1 !important;
  border: 1.5px solid var(--anthropic-border) !important;
  background-color: var(--tb--white) !important;
  color: var(--tb--base) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 15px !important;
}

.f404-search .search-btn {
  background-color: var(--tb--main) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 24px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.f404-search .search-btn:hover {
  background-color: var(--anthropic-primary-dark) !important;
  transform: translateY(-1px) !important;
}

.f404-recommend {
  margin-bottom: 40px !important;
  padding: 30px !important;
  background-color: var(--tb--white) !important;
  border: 1.5px solid var(--anthropic-border) !important;
  border-radius: 10px !important;
}

.f404-recommend h3 {
  color: var(--tb--base) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 20px !important;
}

.f404-recommend ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.f404-recommend li {
  margin-bottom: 12px !important;
  padding: 0 !important;
}

.f404-recommend li a {
  color: var(--tb--base) !important;
  font-size: 15px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-block !important;
  line-height: 1.6 !important;
}

.f404-recommend li a:hover {
  color: var(--tb--main) !important;
}

.f404 .btn-primary {
  background-color: var(--tb--main) !important;
  color: #FFFFFF !important;
  border: none !important;
  padding: 12px 32px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(212, 100, 58, 0.2) !important;
}

.f404 .btn-primary:hover {
  background-color: var(--anthropic-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(212, 100, 58, 0.3) !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .f404 {
    padding: 40px 15px !important;
  }

  .f404-icon i {
    font-size: 80px !important;
  }

  .f404 h1 {
    font-size: 32px !important;
  }

  .f404 h2 {
    font-size: 16px !important;
  }

  .f404-recommend {
    padding: 20px !important;
  }

  .f404-search .site-search-form {
    flex-direction: column !important;
  }

  .f404-search .search-btn {
    width: 100% !important;
  }
}

/* ------------------------------------------------------------
 * 29. 首页专题模块 - 文字颜色适配黑白底色
 * ------------------------------------------------------------ */

/* 专题卡片容器 */
.mo-topics ul li {
  list-style: none !important;
}

/* 专题卡片链接 */
.mo-topics a.-pic {
  display: block !important;
  position: relative !important;
  text-decoration: none !important;
  transition: all 0.3s ease;
}

.mo-topics a.-pic:hover {
  transform: translateY(-4px);
}

/* 专题信息区域 - 文字颜色优化 */
.mo-topics .-info {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 20px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent) !important;
  color: #FFFFFF !important;
}

/* 专题标题 - 白色文字 + 多层强阴影（适配黑白水墨图） */
.mo-topics .-info h2 {
  color: #FFFFFF !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 4px 8px rgba(0, 0, 0, 0.7),
    1px 1px 2px rgba(0, 0, 0, 1) !important;
}

/* 专题文章数 - 白色文字 + 多层强阴影 */
.mo-topics .-info dfn {
  display: inline-block !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-style: normal !important;
  margin-bottom: 8px !important;
  text-shadow:
    0 0 6px rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.9),
    1px 1px 2px rgba(0, 0, 0, 1) !important;
}

.mo-topics .-info dfn i {
  margin-right: 4px !important;
}

/* ------------------------------------------------------------
 * 31. 侧边栏 Widget 专题 - 文字可读性修复
 * ------------------------------------------------------------ */

/* 专题 Widget 标题 - 覆盖主题默认的 display:none */
.widget_ui_topics h3 {
  display: block !important;
  margin-bottom: 20px !important;
}

/* 增强渐变遮罩 - 从30%提升到70% */
.widget_ui_topics .-p1 a::before,
.widget_ui_topics .-p2 a::before {
  height: 60% !important;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.7) 100%
  ) !important;
}

/* 专题名称 - 白色 + 多层强阴影 */
.widget_ui_topics .-p1 strong,
.widget_ui_topics .-p2 strong {
  color: #FFFFFF !important;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.9),
    1px 1px 2px rgba(0, 0, 0, 1) !important;
}

/* ============================================================
 * 修复 -p2 布局：Float → Grid（解决图片不等高错位问题）
 * ============================================================ */
.widget_ui_topics .-p2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  margin-right: 0 !important;
}

.widget_ui_topics .-p2 li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------
 * 30. 专题详情页 (taxonomy-topic.php) - 文字可读性修复
 * ------------------------------------------------------------ */

/* 专题头部容器 */
.topic-hd {
  position: relative !important;
  margin-bottom: 30px !important;  /* 图片与文章列表间距 */
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 专题头部图片 */
.topic-hd > img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* 专题信息覆盖层 - 增强渐变遮罩 */
.topic-hd .-info {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 40px 30px 30px !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    transparent 100%
  ) !important;
}

/* 专题文章数 - 白色 + 强阴影 */
.topic-hd .-info dfn {
  display: inline-block !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-style: normal !important;
  margin-bottom: 10px !important;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
  opacity: 0.9 !important;
}

/* 专题标题 h1 - 白色 + 强阴影（修复黑字问题） */
.topic-hd .-info h1 {
  color: #FFFFFF !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.4 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.7) !important;
}

/* 专题描述 - 白色 + 强阴影（修复白字看不清问题） */
.topic-hd .-info .-desc {
  color: #FFFFFF !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  opacity: 0.95 !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .topic-hd {
    margin-bottom: 20px !important;
  }

  .topic-hd .-info {
    padding: 30px 20px 20px !important;
  }

  .topic-hd .-info h1 {
    font-size: 20px !important;
  }

  .topic-hd .-info .-desc {
    font-size: 14px !important;
  }
}

/* ------------------------------------------------------------
 * 32. 文章详情页样式修复
 * ------------------------------------------------------------ */

/* 修复 .single .content 白色背景导致的问题 */
.single .content {
  background-color: transparent !important;
  /* 移除白色背景,避免覆盖代码块/图表样式 */
}

/* Mermaid 流程图 - Anthropic 米色调适配 */
.article-content svg[id^="mermaid"] {
  background-color: transparent !important;
}

/* Mermaid 节点 - 米色系 + 深色边框 */
.article-content svg .node rect,
.article-content svg .node circle,
.article-content svg .node ellipse,
.article-content svg .node polygon,
.article-content svg .node path {
  fill: var(--tb--white) !important;
  /* 白色背景,而非黑色 */
  stroke: var(--tb--base) !important;
  /* 深色边框 */
  stroke-width: 1.5px !important;
}

/* Mermaid 节点文字 - 深色 */
.article-content svg .nodeLabel,
.article-content svg .nodeLabel span {
  color: var(--tb--base) !important;
  fill: var(--tb--base) !important;
}

/* Mermaid 连接线 - 可见的深色 */
.article-content svg .edgePath path {
  stroke: var(--tb--gray) !important;
  stroke-width: 1.5px !important;
}

/* Mermaid 箭头 */
.article-content svg .arrowheadPath {
  fill: var(--tb--gray) !important;
  stroke: var(--tb--gray) !important;
}

/* Mermaid 边标签文字 */
.article-content svg .edgeLabel,
.article-content svg .edgeLabel span {
  background-color: var(--tb--bdbg) !important;
  color: var(--tb--base) !important;
  fill: var(--tb--base) !important;
}