/* 炫酷主题模式样式 */

/* 浅色模式 - 优化作者卡片颜色搭配 */
[data-theme="light"] {
  --anzhiyu-main: #d6d8e4 !important;           /* 主色调：蓝色 */
  --anzhiyu-theme: #d6d8e4  !important;          /* 主题色：蓝色 */
  --anzhiyu-theme-op: #425AEF23 !important;     /* 主题色半透明：蓝色23%透明度 */
  --anzhiyu-theme-op-deep: #bdc0d1 !important; /* 主题色深半透明：蓝色87%透明度 */
  --global-bg: #f8f9fa !important;              /* 全局背景：浅灰色 */
  --font-color: #2f3031 !important;             /* 字体颜色：深蓝色 */
  --card-bg: #ffffff !important;                /* 卡片背景：纯白色 */
  --btn-bg: #425AEF !important;                 /* 按钮背景：蓝色 */
  --btn-hover-color: #3448c5 !important;        /* 按钮悬停色：深蓝色 */
  --text-bg-hover: #425AEF !important;          /* 文本悬停背景：蓝色 */
  --blockquote-color: #425AEF !important;       /* 引用块颜色：蓝色 */
  --hr-border: #425AEF !important;              /* 水平线边框：蓝色 */
  --anzhiyu-meta-theme-color: #425AEF !important; /* 元主题色：蓝色 */
  --anzhiyu-bar-background: #425AEF !important;   /* 导航栏背景：蓝色 */
  
  /* 作者卡片背景颜色 - 与主题背景形成适当反差 */
  --anzhiyu-card-bg: #f0f2f5 !important;        /* 作者卡片背景：比背景稍深的浅灰色 */
  
  /* 确保背景颜色应用到body元素 */
  background-color: var(--global-bg) !important;
}

/* 深色模式 - 优化作者卡片颜色搭配 */
[data-theme="dark"] {
  --anzhiyu-main: #6c757d !important;           /* 主色调：灰色 */
  --anzhiyu-theme: #6c757d !important;          /* 主题色：灰色 */
  --anzhiyu-theme-op: #6c757d23 !important;     /* 主题色半透明：灰色23%透明度 */
  --anzhiyu-theme-op-deep: #6c757ddd !important; /* 主题色深半透明：灰色87%透明度 */
  --global-bg: #1a1d23 !important;              /* 全局背景：深灰色 */
  --font-color: #f1eaea !important;             /* 字体颜色：浅灰色 */
  --card-bg: #2d3036 !important;                /* 卡片背景：深灰色 */
  --btn-bg: #6c757d !important;                 /* 按钮背景：灰色 */
  --btn-hover-color: #495057 !important;        /* 按钮悬停色：深灰色 */
  --text-bg-hover: #6c757d !important;          /* 文本悬停背景：灰色 */
  --blockquote-color: #6c757d !important;       /* 引用块颜色：灰色 */
  --hr-border: #6c757d !important;              /* 水平线边框：灰色 */
  --anzhiyu-meta-theme-color: #6c757d !important; /* 元主题色：灰色 */
  --anzhiyu-bar-background: #6c757d !important;   /* 导航栏背景：灰色 */
  
  /* 作者卡片背景颜色 - 与主题背景形成适当反差 */
  --anzhiyu-card-bg: #24282f !important;        /* 作者卡片背景：比背景稍亮的深灰色 */
  
  /* 确保背景颜色应用到body元素 */
  background-color: var(--global-bg) !important;
}

/* 森林模式 - 优化作者卡片颜色搭配 */
[data-theme="forest"],
[data-theme-forest="true"] {
  --anzhiyu-main: #2e8b57 !important;           /* 主色调：海绿色 */
  --anzhiyu-theme: #2e8b57 !important;          /* 主题色：海绿色 */
  --anzhiyu-theme-op: #2e8b5723 !important;     /* 主题色半透明：海绿色23%透明度 */
  --anzhiyu-theme-op-deep: #2e8b57dd !important; /* 主题色深半透明：海绿色87%透明度 */
  --global-bg: #f0fff0 !important;              /* 全局背景：蜜露色（浅绿色） */
  --font-color: #2f4f4f !important;             /* 字体颜色：深石板灰色 */
  --card-bg: #ffffff !important;                /* 卡片背景：纯白色 */
  --btn-bg: #228b22 !important;                 /* 按钮背景：森林绿色 */
  --btn-hover-color: #32cd32 !important;        /* 按钮悬停色：酸橙绿色 */
  --text-bg-hover: #228b22 !important;          /* 文本悬停背景：森林绿色 */
  --blockquote-color: #228b22 !important;       /* 引用块颜色：森林绿色 */
  --hr-border: #228b22 !important;               /* 水平线边框：森林绿色 */
  --anzhiyu-meta-theme-color: #2e8b57 !important; /* 元主题色：海绿色 */
  --anzhiyu-bar-background: #2e8b57 !important;   /* 导航栏背景：海绿色 */
  
  /* 作者卡片背景颜色 - 与主题背景形成适当反差 */
  --anzhiyu-card-bg: #e8f5e8 !important;        /* 作者卡片背景：比背景稍深的浅绿色 */
  
  /* 确保背景颜色应用到body元素 */
  background-color: var(--global-bg) !important;
}

/* 海洋模式 - 优化作者卡片颜色搭配 */
[data-theme="ocean"],
[data-theme-ocean="true"] {
  --anzhiyu-main: #1e90ff !important;           /* 主色调：道奇蓝色 */
  --anzhiyu-theme: #1e90ff !important;          /* 主题色：道奇蓝色 */
  --anzhiyu-theme-op: #1e90ff23 !important;     /* 主题色半透明：道奇蓝色23%透明度 */
  --anzhiyu-theme-op-deep: #1e90ffdd !important; /* 主题色深半透明：道奇蓝色87%透明度 */
  --global-bg: #e6f7ff !important;              /* 全局背景：浅蓝色 */
  --font-color: #1a3a5f !important;             /* 字体颜色：深蓝色 */
  --card-bg: #ffffff !important;                /* 卡片背景：纯白色 */
  --btn-bg: #1e90ff !important;                 /* 按钮背景：道奇蓝色 */
  --btn-hover-color: #187bcd !important;        /* 按钮悬停色：深蓝色 */
  --text-bg-hover: #1e90ff !important;          /* 文本悬停背景：道奇蓝色 */
  --blockquote-color: #1e90ff !important;       /* 引用块颜色：道奇蓝色 */
  --hr-border: #1e90ff !important;               /* 水平线边框：道奇蓝色 */
  --anzhiyu-meta-theme-color: #1e90ff !important; /* 元主题色：道奇蓝色 */
  --anzhiyu-bar-background: #1e90ff !important;   /* 导航栏背景：道奇蓝色 */
  
  /* 作者卡片背景颜色 - 与主题背景形成适当反差 */
  --anzhiyu-card-bg: #d9f0ff !important;        /* 作者卡片背景：比背景稍深的浅蓝色 */
  
  /* 确保背景颜色应用到body元素 */
  background-color: var(--global-bg) !important;
}

/* 素雅模式 - 优化作者卡片颜色搭配 */
[data-theme="neon"],
[data-theme-neon="true"] {
  --anzhiyu-main: #8b7355 !important;           /* 主色调：古铜色（素雅） */
  --anzhiyu-theme: #8b7355 !important;          /* 主题色：古铜色 */
  --anzhiyu-theme-op: #8b735523 !important;     /* 主题色半透明：古铜色23%透明度 */
  --anzhiyu-theme-op-deep: #8b7355dd !important; /* 主题色深半透明：古铜色87%透明度 */
  --global-bg: #f8f4f0 !important;              /* 全局背景：米白色（素雅） */
  --font-color: #5d4037 !important;             /* 字体颜色：深棕色 */
  --card-bg: #ffffff !important;                /* 卡片背景：纯白色 */
  --btn-bg: #8b7355 !important;                 /* 按钮背景：古铜色 */
  --btn-hover-color: #6b5d4f !important;        /* 按钮悬停色：深古铜色 */
  --text-bg-hover: #8b7355 !important;          /* 文本悬停背景：古铜色 */
  --blockquote-color: #8b7355 !important;       /* 引用块颜色：古铜色 */
  --hr-border: #8b7355 !important;              /* 水平线边框：古铜色 */
  --anzhiyu-meta-theme-color: #8b7355 !important; /* 元主题色：古铜色 */
  --anzhiyu-bar-background: #8b7355 !important;   /* 导航栏背景：古铜色 */
  
  /* 作者卡片背景颜色 - 与主题背景形成适当反差 */
  --anzhiyu-card-bg: #f0e8e0 !important;        /* 作者卡片背景：比背景稍深的米白色 */
  
  /* 确保背景颜色应用到body元素 */
  background-color: var(--global-bg) !important;
}

/* 古风模式 - 优化作者卡片颜色搭配 */
[data-theme="cyberpunk"],
[data-theme-cyberpunk="true"] {
  --anzhiyu-main: #795548 !important;           /* 主色调：深棕色（古风） */
  --anzhiyu-theme: #795548 !important;          /* 主题色：深棕色 */
  --anzhiyu-theme-op: #79554823 !important;     /* 主题色半透明：深棕色23%透明度 */
  --anzhiyu-theme-op-deep: #795548dd !important; /* 主题色深半透明：深棕色87%透明度 */
  --global-bg: #fff8e1 !important;               /* 全局背景：淡黄色（古风） */
  --font-color: #4e342e !important;             /* 字体颜色：深褐色 */
  --card-bg: #ffecb3 !important;                 /* 卡片背景：淡黄色 */
  --btn-bg: #795548 !important;                  /* 按钮背景：深棕色 */
  --btn-hover-color: #5d4037 !important;         /* 按钮悬停色：深褐色 */
  --text-bg-hover: #795548 !important;           /* 文本悬停背景：深棕色 */
  --blockquote-color: #795548 !important;        /* 引用块颜色：深棕色 */
  --hr-border: #795548 !important;               /* 水平线边框：深棕色 */
  --anzhiyu-meta-theme-color: #795548 !important; /* 元主题色：深棕色 */
  --anzhiyu-bar-background: #795548 !important;   /* 导航栏背景：深棕色 */
  
  /* 作者卡片背景颜色 - 与主题背景形成适当反差 */
  --anzhiyu-card-bg: #f7e9c9 !important;        /* 作者卡片背景：比背景稍深的淡黄色 */
  
  /* 确保背景颜色应用到body元素 */
  background-color: var(--global-bg) !important;
}

/* 微信公众号区域样式 - 统一各主题模式下的背景颜色 */
[data-theme="light"] #aside-content .card-widget#card-wechat {
  background: var(--anzhiyu-card-bg) !important;  /* 浅色模式：使用卡片背景色 */
  border: var(--style-border) !important;        /* 添加边框 */
}

[data-theme="dark"] #aside-content .card-widget#card-wechat {
  background: var(--anzhiyu-card-bg) !important;  /* 深色模式：使用卡片背景色 */
  border: var(--style-border) !important;        /* 添加边框 */
}

[data-theme="forest"] #aside-content .card-widget#card-wechat,
[data-theme-forest="true"] #aside-content .card-widget#card-wechat {
  background: var(--anzhiyu-card-bg) !important;  /* 森林模式：使用卡片背景色 */
  border: var(--style-border) !important;        /* 添加边框 */
}

[data-theme="ocean"] #aside-content .card-widget#card-wechat,
[data-theme-ocean="true"] #aside-content .card-widget#card-wechat {
  background: var(--anzhiyu-card-bg) !important;  /* 海洋模式：使用卡片背景色 */
  border: var(--style-border) !important;        /* 添加边框 */
}

[data-theme="neon"] #aside-content .card-widget#card-wechat,
[data-theme-neon="true"] #aside-content .card-widget#card-wechat {
  background: var(--anzhiyu-card-bg) !important;  /* 素雅模式：使用卡片背景色 */
  border: var(--style-border) !important;        /* 添加边框 */
}

[data-theme="cyberpunk"] #aside-content .card-widget#card-wechat,
[data-theme-cyberpunk="true"] #aside-content .card-widget#card-wechat {
  background: var(--anzhiyu-card-bg) !important;  /* 古风模式：使用卡片背景色 */
  border: var(--style-border) !important;        /* 添加边框 */
}

/* 主题模式切换按钮样式 */
.theme-mode-selector {
  position: fixed;
  right: 80px;
  bottom: 30px;
  z-index: 999;
}

.theme-mode-btn {
  background: var(--anzhiyu-main) !important;    /* 按钮背景：使用当前主题的主色调 */
  color: white !important;                      /* 按钮文字颜色：白色 */
  border: none;
  border-radius: 50%;                          /* 圆形按钮 */
  width: 36px;                                 /* 按钮宽度：36像素 */
  height: 36px;                                /* 按钮高度：36像素 */
  cursor: pointer;
  font-size: 16px;                            /* 图标大小：16像素 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);  /* 阴影效果：轻微阴影 */
  transition: all 0.3s ease;                   /* 过渡动画：0.3秒缓动效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-mode-btn:hover {
  background: var(--btn-hover-color) !important; /* 悬停背景：使用按钮悬停色 */
  transform: scale(1.05);                      /* 悬停缩放：放大5% */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  /* 悬停阴影：更强的阴影效果 */
}

.theme-mode-panel {
  position: absolute;
  bottom: 42px;                                /* 面板位置：距离底部42像素 */
  right: 0;
  background: var(--card-bg);                  /* 面板背景：使用卡片背景色 */
  border-radius: 8px;                          /* 圆角：8像素 */
  padding: 10px;                               /* 内边距：10像素 */
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.12); /* 面板阴影：中等阴影效果 */
  display: none;
  min-width: 120px;                            /* 最小宽度：120像素 */
  border: 1px solid var(--btn-bg);             /* 边框：使用按钮背景色 */
}

.theme-mode-panel.show {
  display: block;
}

.theme-option {
  display: flex;
  align-items: center;
  padding: 5px 8px;                            /* 选项内边距：上下5像素，左右8像素 */
  margin: 3px 0;                               /* 选项外边距：上下3像素 */
  border-radius: 4px;                           /* 圆角：4像素 */
  cursor: pointer;
  transition: background 0.3s ease;            /* 背景过渡动画：0.3秒 */
  font-size: 13px;                             /* 字体大小：13像素 */
}

.theme-option:hover {
  background: var(--text-bg-hover) !important;  /* 悬停背景：使用文本悬停背景色 */
  color: white !important;                      /* 悬停文字颜色：白色 */
}

.theme-color-preview {
  width: 14px;                                 /* 预览圆点宽度：14像素 */
  height: 14px;                                /* 预览圆点高度：14像素 */
  border-radius: 50%;                          /* 圆形预览点 */
  margin-right: 6px;                           /* 右边距：6像素 */
  border: 1px solid var(--font-color);         /* 边框：使用字体颜色 */
}

.theme-forest .theme-color-preview { background: #2e8b57; }  /* 森林模式预览色：海绿色 */
.theme-ocean .theme-color-preview { background: #1e90ff; }  /* 海洋模式预览色：道奇蓝色 */
.theme-light .theme-color-preview { background: #425AEF; }  /* 浅色模式预览色：蓝色 */
.theme-dark .theme-color-preview { background: #6c757d; }   /* 深色模式预览色：灰色 */
.theme-neon .theme-color-preview { background: #8b7355; }  /* 素雅模式预览色：古铜色 */
.theme-cyberpunk .theme-color-preview { background: #795548; }  /* 古风模式预览色：深棕色 */

/* 字体前小圆点颜色修复 - 使用主题相近色 */
[data-theme="light"] .item-headline::before {
  background: var(--anzhiyu-main) !important;  /* 浅色模式：使用主色调 */
}

[data-theme="dark"] .item-headline::before {
  background: var(--anzhiyu-main) !important;  /* 深色模式：使用主色调 */
}

[data-theme="forest"] .item-headline::before,
[data-theme-forest="true"] .item-headline::before {
  background: var(--anzhiyu-main) !important;  /* 森林模式：使用主色调 */
}

[data-theme="ocean"] .item-headline::before,
[data-theme-ocean="true"] .item-headline::before {
  background: var(--anzhiyu-main) !important;  /* 海洋模式：使用主色调 */
}

[data-theme="neon"] .item-headline::before,
[data-theme-neon="true"] .item-headline::before {
  background: var(--anzhiyu-main) !important;  /* 素雅模式：使用主色调 */
}

[data-theme="cyberpunk"] .item-headline::before,
[data-theme-cyberpunk="true"] .item-headline::before {
  background: var(--anzhiyu-main) !important;  /* 古风模式：使用主色调 */
}

/* 确保主题模式应用到body元素 */
body[data-theme="forest"],
body[data-theme="ocean"] {
  background-color: var(--global-bg) !important;
  color: var(--font-color) !important;
}

body[data-theme="neon"],
body[data-theme="cyberpunk"], 
body[data-theme="forest"],
body[data-theme="ocean"] {
  background-color: var(--global-bg) !important;
  color: var(--font-color) !important;
}

/* 作者卡片文字颜色优化 - 确保可读性 */
[data-theme="light"] #aside-content .card-widget.card-info {
  color: #2c3e50 !important;  /* 深蓝色文字，确保在浅灰色背景上可读 */
}

[data-theme="dark"] #aside-content .card-widget.card-info {
  color: #e9ecef !important;   /* 浅灰色文字，确保在深灰色背景上可读 */
}

[data-theme="forest"] #aside-content .card-widget.card-info,
[data-theme-forest="true"] #aside-content .card-widget.card-info {
  color: #2f4f4f !important;   /* 深石板灰色文字，确保在浅绿色背景上可读 */
}

[data-theme="ocean"] #aside-content .card-widget.card-info,
[data-theme-ocean="true"] #aside-content .card-widget.card-info {
  color: #1a3a5f !important;   /* 深蓝色文字，确保在浅蓝色背景上可读 */
}

[data-theme="neon"] #aside-content .card-widget.card-info,
[data-theme-neon="true"] #aside-content .card-widget.card-info {
  color: #5d4037 !important;   /* 深棕色文字，确保在米白色背景上可读 */
}

[data-theme="cyberpunk"] #aside-content .card-widget.card-info,
[data-theme-cyberpunk="true"] #aside-content .card-widget.card-info {
  color: #4e342e !important;   /* 深褐色文字，确保在淡黄色背景上可读 */
}

/* 强制设置<bt>标签在暗黑模式下的样式 */
[data-theme='dark'] bt {
  color: #ffffff !important; /* 使用白色文字确保可读性 */
  background: transparent !important;
  -webkit-text-fill-color: #ffffff !important; /* 覆盖webkit特有的文本填充 */
  text-shadow: 0 0 3px rgba(0,0,0,0.8) !important; /* 添加阴影增强对比度 */
  opacity: 1 !important; /* 确保完全不透明 */
}

/* 针对.elegant-title容器内的特殊处理 */
[data-theme='dark'] .elegant-title bt {
  color: #ffffff !important;
  background: transparent !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.9) !important;
}

[data-theme='dark'] .elegant-title {
  background: linear-gradient(to right, var(--anzhiyu-theme-op), var(--anzhiyu-theme-op)) !important;
  color: var(--font-color) !important;
}

[data-theme="dark"] bt {
    color: var(--bt-color) !important;
}