/* =============================================================
   ForestWhisper WordPress 主题主样式 (main.css)
   - 重构目标：合并重复、去除无用、统一排序、结构化注释
   - 模块索引：
     0. 主题变量
     1. 基础重置与排版
     2. 布局容器与网格
     3. Header/导航（桌面/移动）
     4. 组件：按钮、Toast、Like 等
     5. 搜索抽屉
     6. 文章/归档/分页
     7. 工具类（图标/可访问性/提示）
     8. 深色模式
     9. 首页 Banner
   - 维护建议：新增样式请按模块追加，避免分散重复
   ============================================================= */

/* 主题颜色变量 */
/* 0) 主题 CSS 变量 */
:root {
  /* 全屏覆盖式菜单重构 注：移动到顶部后保持变量块结构 */
  --darker-main-color: #2b5942;
  --dark-main-color: #52846f;
  --main-color: #79ae9c;
  --light-main-color: #8dd592;
  --lighter-main-color: #d7fef3;
  --black: #000000;
  --white: #ffffff;
  --odd-color: #d7e6e0;
  --even-color: #bacec5;
  --border-color: #f4f6f8;
  --darker-gray: #333333;
  --dark-gray: #5e5e5e;
  --default-gray: #cccccc;
  --light-gray: #e6e6e6;
  --lighter-gray: #f3f3f3;
  --dark-color: rgba(0, 0, 0, 0.85);
  --default-color: rgba(0, 0, 0, 0.65);
  --light-color: rgba(0, 0, 0, 0.45);
  --lighter-color: rgba(0, 0, 0, 0.25);
  /* 浅色主题变量 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-primary: #f0f0f0;

  /* 过渡曲线与时长统一变量 */
  --tr-fast: 0.2s ease; /* 轻微交互，如颜色/图标缩放 */
  --tr-quick: 0.25s ease; /* 常规UI提示、Tooltip等 */
  --tr-base: 0.3s ease; /* 默认组件过渡 */
  --tr-slow: 0.5s ease-in-out; /* 慢速动效，如展开/折叠 */

  /* 复用色彩变量（减少硬编码） */
  --gray-50: #f5f5f7; /* 极浅灰 - 标签底色 */
  --gray-100: #e8e8ea; /* 浅灰 hover */
  --gray-400: #999999;
  --gray-600: #6b7280;
  --gray-800: #374151;
  --dark-surface-1: #1f2937; /* 浮动容器底色 */
  --dark-surface-2: #2d3748; /* 深色卡片/标签底色 */
  --dark-surface-hover: #374151; /* 深色 hover 态 */
  --tooltip-bg: #161b22; /* Tooltip 背景 */
  --overlay-dark: rgba(33, 33, 33, 0.95); /* Toast/LikeMessage 背景 */

  /* 阴影分级变量 */
  --shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.04); /* 微阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); /* 小阴影 - 图片/卡片 */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12); /* 中阴影 - 浮动面板 */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3); /* 大阴影 - Toast/Modal */
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1); /* 超大阴影 - 搜索抽屉 */
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 20px;
}

/* ========== Logo区域 ========== */
.header-left {
  flex-shrink: 0;
}

.logo-wrap {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--text-primary);
  gap: 12px;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.logo-divider {
  width: 1px;
  height: 24px;
  background: var(--border-primary);
}

.site-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* 3) Header / 导航 - 桌面端 */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  /* 放开宽度，交由“更多”分组控制可视项，避免挤压重叠 */
  max-width: none;
}

.primary-nav .horizontal-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 默认允许换行，在桌面端将强制单行 */
  flex-wrap: wrap;
}

.primary-nav .horizontal-nav > li {
  position: relative;
}

.primary-nav .horizontal-nav > li > a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.primary-nav .horizontal-nav > li > a:hover {
  color: var(--main-color);
}

.primary-nav .horizontal-nav > li.current-menu-item > a,
.primary-nav .horizontal-nav > li.current-page-ancestor > a {
  color: var(--main-color);
}

/* 子菜单样式 */
.primary-nav .horizontal-nav li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1100;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.primary-nav .horizontal-nav li:hover > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav .horizontal-nav li ul li {
  border-bottom: none;
}

.primary-nav .horizontal-nav li ul a {
  display: block;
  padding: 10px 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
  border-radius: 4px;
  margin: 0 8px;
}

.primary-nav .horizontal-nav li ul a:hover,
/* 合并至上方通用 hover 规则 */

/* 子菜单指示器 */
.primary-nav .horizontal-nav li.menu-item-has-children > a::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-left: 8px;
  transition: transform 0.2s ease;
}

.primary-nav .horizontal-nav li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* ========== 头部操作按钮 ========== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.icon-btn:hover {
  background: var(--main-color);
  color: #fff;
}

/* 搜索按钮、RSS按钮、菜单按钮hover时移除背景色，只保留图标放大效果 */
.search-toggle:hover,
.rss-copy:hover,
.menu-toggle:hover {
  background: transparent !important;
  color: var(--main-color) !important;
}

.icon-btn:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

/* 移动端菜单按钮默认隐藏 */
.mobile-only {
  display: none;
}
/* 桌面端强制隐藏（避免其它样式覆盖） */
@media (min-width: 769px) {
  .mobile-only {
    display: none !important;
  }
}

/* 3) Header / 导航 - 移动端 */
.mobile-nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border-primary);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1001;
}

.mobile-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-nav-list li {
  border-bottom: 1px solid var(--border-primary);
}

.mobile-nav-list li:last-child {
  border-bottom: none;
}

.mobile-nav-list a {
  display: block;
  padding: 16px 0;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: color 0.2s ease;
}

.mobile-nav-list a:hover {
  color: var(--main-color);
}

/* 移动端子菜单样式 */
.mobile-nav-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.02);
  display: none;
}

.mobile-nav-list .sub-menu li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav-list .sub-menu a {
  padding: 12px 0 12px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}

.mobile-nav-list .sub-menu a:hover {
  color: var(--main-color);
}

/* 菜单项有子菜单的指示器 */
.mobile-nav-list .menu-item-has-children > a::after {
  content: "+";
  float: right;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

/* ========== 响应式布局 ========== */
@media (max-width: 1024px) {
  .header-inner {
    padding: 0 16px;
    gap: 16px;
  }

  .primary-nav .horizontal-nav {
    gap: 4px;
  }

  .primary-nav .horizontal-nav > li > a {
    padding: 8px 12px;
    font-size: 13px;
  }
}

/* 桌面端强制单行，避免菜单栏重叠 */
@media (min-width: 1024px) {
  .primary-nav .horizontal-nav {
    flex-wrap: nowrap;
  }
}

@media (max-width: 768px) {
  .header-inner {
    min-height: 56px;
    gap: 12px;
  }

  .site-subtitle {
    display: none;
  }

  .logo-divider {
    display: none;
  }

  /* 桌面端主导航隐藏 */
  .primary-nav {
    display: none;
  }

  /* 移动端菜单按钮显示 */
  .mobile-only {
    display: flex !important;
  }

  /* 移动端下拉菜单显示控制 */
  .mobile-nav-dropdown[aria-hidden="false"] {
    display: block;
  }

  .header-actions {
    gap: 4px;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }
}

/* 3) Header / 导航 - 桌面端溢出“更多” */
.horizontal-nav > li.more-menu {
  position: relative;
}
.horizontal-nav > li.more-menu > a {
  display: flex;
  align-items: center;
  gap: 6px;
}
.horizontal-nav > li.more-menu > a .more-icon {
  transition: transform 0.2s ease;
}
.horizontal-nav > li.more-menu.open > a .more-icon {
  transform: rotate(180deg);
}
.horizontal-nav > li.more-menu > a::after {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transition: transform 0.2s ease;
}
.horizontal-nav > li.more-menu.open > a::after {
  transform: rotate(180deg);
}

.horizontal-nav > li.more-menu .more-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 8px 0;
  list-style: none;
  margin: 6px 0 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.18s ease;
  z-index: 1200;
}
.horizontal-nav > li.more-menu.open .more-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.horizontal-nav > li.more-menu .more-submenu li {
  margin: 0;
}
.horizontal-nav > li.more-menu .more-submenu a {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s ease;
}
.horizontal-nav > li.more-menu .more-submenu a:hover {
  color: var(--main-color);
}

/* 深色模式：统一下拉菜单背景和边框 */
[data-theme="dark"] .primary-nav .horizontal-nav li ul,
[data-theme="dark"] .horizontal-nav > li.more-menu .more-submenu {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
}

/* ========== 深色主题适配 - Header和导航 ========== */
[data-theme="dark"] .layout-header {
  background: var(--bg-primary);
  border-color: var(--border-primary);
}

[data-theme="dark"] .logo-divider {
  background: var(--border-primary);
}

[data-theme="dark"] .primary-nav .horizontal-nav > li > a:hover {
  color: var(--dark-main-color);
}

[data-theme="dark"] .primary-nav .horizontal-nav > li.current-menu-item > a,
[data-theme="dark"]
  .primary-nav
  .horizontal-nav
  > li.current-page-ancestor
  > a {
  color: var(--dark-main-color);
}

[data-theme="dark"] .primary-nav .horizontal-nav li ul a:hover,
[data-theme="dark"] .horizontal-nav > li.more-menu .more-submenu a:hover {
  color: var(--dark-main-color);
}

[data-theme="dark"] .mobile-nav-dropdown {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="dark"] .mobile-nav-list li {
  border-color: var(--border-primary);
}

[data-theme="dark"] .mobile-nav-list a:hover {
  color: var(--dark-main-color);
}

[data-theme="dark"] .icon-btn:hover {
  background: var(--dark-main-color);
}

[data-theme="dark"] .search-toggle:hover,
[data-theme="dark"] .rss-copy:hover,
[data-theme="dark"] .menu-toggle:hover {
  background: transparent !important;
  color: var(--dark-main-color) !important;
}

[data-theme="dark"] .mobile-nav-list .sub-menu {
  background: rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .mobile-nav-list .sub-menu li {
  border-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .menu-toggle-btn .bar {
  background: currentColor;
}

/* ========== 统一图标尺寸 ========== */
.icon-uniform {
  width: 20px;
  height: 20px;
  display: block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
/* （原被破坏的结束括号已修复上方） */

/* ========================================
   深色主题变量定义 - 灰色/绿色系
======================================== */
[data-theme="dark"] {
  /* 背景色 - 使用柔和的灰色系 */
  --bg-primary: #2a2f35;
  --bg-secondary: #353b42;
  /* 文本色 - 浅灰色，确保可读性 */
  --text-primary: #e8e8e8;
  --text-secondary: #b8b8b8;
  /* 边框色 - 深灰色 */
  --border-primary: #4a4f56;
  /* 卡片颜色 - 基于绿色主题的深色变体 */
  --odd-color: #2f3a35;
  --even-color: #35403a;
  /* 文本透明度变体 */
  --dark-color: rgba(232, 232, 232, 0.9);
  --default-color: rgba(232, 232, 232, 0.75);
  --light-color: rgba(232, 232, 232, 0.6);
  --lighter-color: rgba(232, 232, 232, 0.4);
}

/* 1) 基础重置与排版 */
*,
:after,
:before {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

html {
  font-family: "LXGW WenKai", "霞鹜文楷", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei",
    "微软正黑体", sans-serif;
  line-height: 1.15;
  -ms-overflow-style: scrollbar;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg-primary);
  transition: background-color 0.3s ease;
}

body {
  font-family: "LXGW WenKai", "霞鹜文楷", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei",
    "微软正黑体", sans-serif;
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--default-color);
  font-variant: tabular-nums;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

hr {
  overflow: visible;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--border-primary);
  transition: border-color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  font-weight: 500;
  font-family: "LXGW WenKai", "霞鹜文楷", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei",
    "微软正黑体", sans-serif;
  margin: 1.6em 0 0.6em;
  transition: color 0.3s ease;
}

/* 文章页面标题样式优先级 - 排除文章内容中的标题 */
.single-content h1,
.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
  font-family: inherit;
}

/* 确保文章内容中的标题不受通用样式影响 */

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
  font-family: inherit;
  color: inherit;
  font-weight: inherit;
  margin: inherit;
}

p {
  margin: 1em 0;
  cursor: default;
}

li {
  list-style: none;
  cursor: default;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  cursor: default;
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}

blockquote {
  margin: 1.6em 0;
  padding-left: 8px;
  border-left: 4px solid var(--border-primary);
  color: var(--main-color);
  transition: border-color 0.3s ease, color 0.3s ease;
}

blockquote p {
  margin: 0;
}

pre {
  margin: 1.6em 0;
  padding: 24px 18px;
  border-radius: 4px;
  background: var(--bg-secondary);
  white-space: pre-wrap;
  transition: background-color 0.3s ease;
}

code {
  margin: 0 4px;
  padding: 3px 8px 2px;
  border: 1px solid rgba(82, 132, 111, 0.4);
  border-radius: 4px;
  background-color: rgba(121, 174, 156, 0.3);
  vertical-align: middle;
  font-size: 12px;
  font-family: Inconsolata, monospace, sans-serif;
}

pre code {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 13px;
}

figure {
  margin: 0;
  border: 0;
  vertical-align: baseline;
}

strong,
b {
  font-weight: 500;
}

a {
  outline: none;
  background-color: transparent;
  color: var(--main-color);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}

a:focus {
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
}

a:hover,
a:active {
  color: var(--dark-main-color);
  outline: 0;
  text-decoration: none;
}

img {
  border-style: none;
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

mark {
  padding: 0.2em;
  background-color: #feffe6;
}

::-moz-selection {
  background: var(--main-color);
  color: #fff;
}

::selection {
  background: var(--main-color);
  color: #fff;
}

/* 工具类 */
.fa {
  display: inline-block;
  text-align: center;
  text-transform: none;
  font-style: normal;
  line-height: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.btn {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  height: 32px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: #fff;
  background-image: none;
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
  color: var(--default-color);
  text-align: center;
  white-space: nowrap;
  font-weight: 400;
  font-size: 14px;
  line-height: 32px;
  cursor: pointer;
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-user-select: none;
  -ms-touch-action: manipulation;
  -ms-user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  user-select: none;
}

.btn:active,
.btn:focus {
  outline: 0;
}

.btn:focus,
.btn:hover {
  border-color: var(--dark-main-color);
  color: var(--dark-main-color);
}

.btn.disabled,
.btn[disabled] {
  border-color: #d9d9d9;
  background-color: #f5f5f5;
  box-shadow: none;
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}

.btn.btn-primary {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.btn.btn-primary:hover {
  background-color: var(--dark-main-color);
  border-color: var(--dark-main-color);
}

.clearfix {
  zoom: 1;
}

.clearfix:after,
.clearfix:before {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* 布局容器 */
.layout {
  display: flex;
  background: var(--bg-primary);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  flex-direction: column;
  flex: auto;
}

/* 网格系统 */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 0 15px;
}

.col-8 {
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
  padding: 0 15px;
}

.col-4 {
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  padding: 0 15px;
}

/* 头部样式 - 现代化按钮式布局 */
.layout-header {
  position: relative;
  width: 100%;
  height: 80px;
  z-index: 1000;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-primary);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all var(--tr-base);
}

.layout-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 左侧：Logo和副标题 */
.header-left {
  display: flex;
  align-items: center;
}

/* (Removed old .search-modal styles; using #search-drawer now) */

/* 旧的移动端菜单样式已移除，统一使用主导航 */

/* 提示消息样式 - 统一版本 */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--overlay-dark);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--tr-base), transform var(--tr-base);
  max-width: 400px;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(10px);
}

.toast.toast-show,
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast-success {
  background: var(--overlay-dark);
  color: #ffffff;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.toast-error {
  background: var(--overlay-dark);
  color: #ffffff;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.toast-info {
  background: var(--overlay-dark);
  color: #ffffff;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.toast-message {
  flex: 1;
  font-size: 14px;
  color: #ffffff;
}

.toast-close {
  background: none;
  border: none;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all var(--tr-base);
}

.toast-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* 深色主题下的Toast - 已统一在下方"深色模式完整适配"部分 */

/* 响应式设计 */
@media (max-width: 768px) {
  .toast {
    max-width: 90%;
    padding: 12px 20px;
    font-size: 13px;
  }
}

@media (max-width: 576px) {
  .layout-header {
    height: auto;
    padding: 10px 0;
  }

  .layout-header .container {
    padding: 0 10px;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* 移动端菜单样式已统一到主导航中 */
}

/* 导航样式 - 根据设计图重新设计 */

/* 6) 页面主体与内容区 */
.layout-main,
.lauout-main {
  /* 保留旧类名兼容缓存 */
  position: relative;
  margin: 0;
  background: var(--bg-primary);
  transition: background-color var(--tr-base);
}

.layout-content {
  margin: 0;
  min-height: 0;
  flex: auto;
}

.layout-content .container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 分类菜单样式 - 简洁横向布局 */
.category-menu {
  margin: 30px 0;
  padding: 0;
  background: transparent;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  align-items: center;
}

.category-item {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  background: transparent;
  color: #99a1a7;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  transition: all var(--tr-base);
  letter-spacing: 0.5px;
}

.category-item:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #d1d5db;
  font-weight: 300;
}

.category-item:hover {
  color: #79ae9c;
  background: transparent;
}

/* 年份标题样式 */
.year-header {
  margin: 40px 0 20px 0;
  padding-left: 20px;
  border-left: 3px solid #333333;
  font-size: 20px;
  font-weight: bold;
  color: #333333;
}

/* ===== 归档 / 标签 / 分类 列表统一样式 ===== */

/* Header 重写布局 */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
}
.brand-compact .logo-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand-compact .logo-img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25);
}
.brand-compact .logo-divider {
  width: 2px;
  height: 30px;
  background: linear-gradient(
    180deg,
    var(--main-color),
    var(--dark-main-color)
  );
  border-radius: 2px;
  display: inline-block;
}
.brand-compact .site-subtitle {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  max-width: 180px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
[data-theme="dark"] .brand-compact .logo-img {
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
}

.header-actions.icon-row {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.icon-btn {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
  position: relative;
  width: 38px;
  height: 38px;
  box-sizing: border-box;
}

/* 强制统一所有图标尺寸和样式 */
.icon-btn svg,
.menu-toggle svg,
.search-toggle svg,
.rss-copy svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  transition: all 0.3s ease !important;
  display: block !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

/* 4) 组件 - 图标按钮统一 hover 效果 */
.icon-btn:hover,
.menu-toggle:hover,
.search-toggle:hover,
.rss-copy:hover {
  color: var(--main-color) !important;
  transform: scale(1.05) !important;
}

/* 搜索按钮、RSS按钮、菜单按钮hover时移除背景色，只保留图标放大效果 */
.search-toggle:hover,
.rss-copy:hover,
.menu-toggle:hover {
  background: transparent !important;
  transform: none !important;
}

.icon-btn:hover svg,
.menu-toggle:hover svg,
.search-toggle:hover svg,
.rss-copy:hover svg {
  fill: currentColor !important;
  transform: scale(1.1) !important;
}

.icon-btn:active,
.menu-toggle:active,
.search-toggle:active,
.rss-copy:active {
  transform: scale(0.95) !important;
}

/* 深色主题hover效果 */
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .menu-toggle:hover,
[data-theme="dark"] .search-toggle:hover,
[data-theme="dark"] .rss-copy:hover {
  color: var(--dark-main-color) !important;
}

[data-theme="dark"] .icon-btn:hover svg,
[data-theme="dark"] .menu-toggle:hover svg,
[data-theme="dark"] .search-toggle:hover svg,
[data-theme="dark"] .rss-copy:hover svg {
  fill: currentColor !important;
}

/* 重复的图标样式已整合到上方统一规则中 */

/* 文章标题区域样式 */
.title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.title h1 {
  flex: 1;
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  color: #333;
}

.title-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* 点赞按钮样式 */
.like-button {
  padding: 0 20px 0 10px;
  height: 32px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 7px #e7413373;
  background-color: #e74133;
  color: white;
  font-size: 17px;
  border: none;
  display: flex;
  align-items: center;
  transition: all 0.5s ease-in-out;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
}

.like-button:hover {
  background-color: #f54d3e;
  transition: all 0.5s ease-in-out;
  box-shadow: 0px 0px 5px 3px #e7413373;
}

.like-button::before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzc2LjMyIDU1Mi4zYy0wLjM4NjcyIDAtMC43ODEyNS0wLjAxNTYyNS0xLjE3MTktMC4wNTA3ODEtMS4wNzgxLTAuMDc0MjE5LTIuMTM2Ny0wLjI2NTYyLTMuMTU2Mi0wLjU0Njg4LTIuNzMwNS0wLjU5Mzc1LTUuMjkzLTEuODUxNi03LjM0MzgtMy43ODEybC0xMzcuNTQtMTI5LjY2Yy00NC40NTMtNDEuOTAyLTQ5LjQ4LTExNS40Ni0xMS4yMTUtMTYzLjk3IDE5LjA4Mi0yNC4xODQgNDUuNzctMzguNjk1IDc1LjE1Mi00MC44NTUgMjguOTMtMi4xMTcyIDU2Ljg2MyA4LjAzMTIgNzguNjggMjguNTk4bDYuMjY1NiA1LjkwMjMgNi4yNjU2LTUuOTAyM2MyMS44MzItMjAuNTcgNDkuODA1LTMwLjY5MSA3OC42OTEtMjguNTk4IDI5LjM4MyAyLjE2NDEgNTYuMDY2IDE2LjY3NiA3NS4xNDUgNDAuODU1IDM4LjI2MiA0OC41MTIgMzMuMjM0IDEyMi4wNy0xMS4yMTUgMTYzLjk3bC0xMzcuNTQgMTI5LjY3Yy0yLjk5MjIgMi44MTY0LTYuOTM3NSA0LjM3NS0xMS4wMjMgNC4zNzV6bS03Ny44MTItMzA3LjAxYy0xLjY5NTMgMC0zLjM5NDUgMC4wNjI1LTUuMTAxNiAwLjE4NzUtMjAuMjgxIDEuNDk2MS0zOC44NTIgMTEuNjkxLTUyLjI4MSAyOC43MTEtMjguMjE1IDM1Ljc3My0yNC42MTMgODkuOTEgOC4wMjczIDEyMC42OGwxMjYuODQgMTE5LjU5IDEyNi44NC0xMTkuNTljMzIuNjQ1LTMwLjc3MyAzNi4yNDYtODQuOTEgOC4wMjczLTEyMC42OC0xMy40MjItMTcuMDItMzEuOTg0LTI3LjIxNS01Mi4yNy0yOC43MTEtMTkuODI4LTEuNDY0OC0zOS4xMDUgNS42MjExLTU0LjI4NSAxOS45MzRsLTE3LjI4NSAxNi4yOTNjLTYuMTk1MyA1LjgzOTgtMTUuODU5IDUuODM5OC0yMi4wNDcgMGwtMTcuMjg1LTE2LjI5M2MtMTMuODcxLTEzLjA3OC0zMS4xNzYtMjAuMTE3LTQ5LjE4LTIwLjExN3oiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  background-size: 100%;
  background-repeat: no-repeat;
  color: transparent;
  position: relative;
  width: 30px;
  height: 30px;
  display: block;
  margin-right: 5px;
  transition: all 0.9s ease-in-out;
  flex-shrink: 0;
}

.like-button:hover::before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzY5Ljg0IDU1MC4yOGMwLjQ3MjY2IDAuNDcyNjYgMC45NDUzMSAwLjQ3MjY2IDAuOTQ1MzEgMC45NDUzMSA2NS4zNTUtNTEuNjIxIDE5My43LTE0OC4yMyAxOTMuNy0yNDkuMTEgMC01NS44ODMtNDUuNDY1LTEwMS4zNS0xMDEuMzUtMTAxLjM1LTM5Ljc4MSAwLTc0LjM1MiAyMy4yMDctOTAuOTI2IDU2LjgyOC0wLjQ3MjY2IDAuOTQ1MzEtMS40MjE5IDMuMzE2NC0xLjQyMTkgMy4zMTY0cy0wLjk0NTMxLTEuODk0NS0wLjk0NTMxLTIuMzY3MmMtMTYuMTAyLTM0LjA5LTUwLjY3Mi01Ny43Ny05MC45MjYtNTcuNzctNTUuODgzIDAtMTAxLjM1IDQ1LjQ2MS0xMDEuMzUgMTAxLjM0IDAgMTAxLjgyIDEyNy44NyAxOTcuMDEgMTkyLjI3IDI0OC4xNnoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  transition: all 0.9s ease-in-out;
  transform: rotate(-360deg);
}

.like-button.liked::before {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNzUycHQiIGhlaWdodD0iNzUycHQiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDc1MiA3NTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8cGF0aCBkPSJtMzY5Ljg0IDU1MC4yOGMwLjQ3MjY2IDAuNDcyNjYgMC45NDUzMSAwLjQ3MjY2IDAuOTQ1MzEgMC45NDUzMSA2NS4zNTUtNTEuNjIxIDE5My43LTE0OC4yMyAxOTMuNy0yNDkuMTEgMC01NS44ODMtNDUuNDY1LTEwMS4zNS0xMDEuMzUtMTAxLjM1LTM5Ljc4MSAwLTc0LjM1MiAyMy4yMDctOTAuOTI2IDU2LjgyOC0wLjQ3MjY2IDAuOTQ1MzEtMS40MjE5IDMuMzE2NC0xLjQyMTkgMy4zMTY0cy0wLjk0NTMxLTEuODk0NS0wLjk0NTMxLTIuMzY3MmMtMTYuMTAyLTM0LjA5LTUwLjY3Mi01Ny43Ny05MC45MjYtNTcuNzctNTUuODgzIDAtMTAxLjM1IDQ1LjQ2MS0xMDEuMzUgMTAxLjM0IDAgMTAxLjgyIDEyNy44NyAxOTcuMDEgMTkyLjI3IDI0OC4xNnoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
  animation: likeAnimation 0.5s ease-out;
}

@keyframes likeAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.like-count {
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
}

/* ========== 分类标签 - 简洁扁平风格 ========== */
.title-category {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.category-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #5b7fff;
  color: white;
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  border: none;
}

.category-badge:hover {
  background: #4a6eef;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(91, 127, 255, 0.3);
}

/* 多种纯色配色方案 */
.category-badge:nth-child(1) {
  background: #5b7fff;
}

.category-badge:nth-child(1):hover {
  background: #4a6eef;
  box-shadow: 0 3px 10px rgba(91, 127, 255, 0.3);
}

.category-badge:nth-child(2) {
  background: #ff6b9d;
}

.category-badge:nth-child(2):hover {
  background: #ff5a8d;
  box-shadow: 0 3px 10px rgba(255, 107, 157, 0.3);
}

.category-badge:nth-child(3) {
  background: #00d4ff;
}

.category-badge:nth-child(3):hover {
  background: #00c4ef;
  box-shadow: 0 3px 10px rgba(0, 212, 255, 0.3);
}

.category-badge:nth-child(4) {
  background: #00d9a5;
}

.category-badge:nth-child(4):hover {
  background: #00c995;
  box-shadow: 0 3px 10px rgba(0, 217, 165, 0.3);
}

.category-badge:nth-child(5) {
  background: #ffb85c;
}

.category-badge:nth-child(5):hover {
  background: #ffa84c;
  box-shadow: 0 3px 10px rgba(255, 184, 92, 0.3);
}

.category-badge:nth-child(n + 6) {
  background: #a78bfa;
}

.category-badge:nth-child(n + 6):hover {
  background: #977bea;
  box-shadow: 0 3px 10px rgba(167, 139, 250, 0.3);
}

/* 文章元信息样式 - 精简版 */
.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 15px 0;
  padding: 15px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.meta-left {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex: 1;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #888;
}

.meta-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.meta-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.keywords-section {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ========== 关键词标签 - 简洁扁平风格 ========== */
.keyword-tag {
  /* 布局 */
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 盒模型 */
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  /* 视觉 */
  background: var(--gray-50);
  color: var(--gray-600);
  /* 排版 */
  font-size: 13px;
  font-weight: 500;
  /* 交互 */
  transition: all var(--tr-quick);
}

.keyword-tag:hover {
  /* 视觉 */
  background: var(--gray-100);
  color: var(--gray-800);
  border-color: #d1d5db;
  /* 交互 */
  transform: translateY(-1px);
}

/* 暗色主题适配 */
[data-theme="dark"] .keyword-tag {
  /* 视觉 */
  background: var(--dark-surface-2);
  color: #a0aec0;
  /* 盒模型 */
  border-color: transparent;
}

[data-theme="dark"] .keyword-tag:hover {
  /* 视觉 */
  background: var(--dark-surface-hover);
  color: #cbd5e0;
  border-color: #4b5563;
}

/* 响应式设计 (<=768px)
   合并标题区域与元信息区域，减少重复 media 查询块
   - 标题/动作区栅格化
   - 元信息垂直排列
   - 标签尺寸缩放 */
@media (max-width: 768px) {
  /* 标题区域 */
  .title {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .title h1 {
    font-size: 24px;
  }
  .title-actions {
    flex-direction: row;
    gap: 8px;
    width: 100%;
    flex-wrap: wrap;
  }
  .like-button {
    padding: 0 15px 0 8px;
    height: 28px;
    font-size: 15px;
  }
  .like-button::before {
    width: 24px;
    height: 24px;
    margin-right: 4px;
  }
  .like-count {
    font-size: 14px;
  }
  .title-category {
    align-self: flex-start;
  }
  .category-badge {
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 16px;
  }

  /* 元信息区域 */
  .post-meta {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .meta-left {
    gap: 15px;
  }
  .meta-item {
    font-size: 12px;
  }
  .meta-right {
    align-self: flex-start;
    width: 100%;
  }
  .keywords-section {
    width: 100%;
  }
  .keyword-tag {
    font-size: 11px;
    padding: 5px 12px;
  }
}

/* RSS复制成功反馈效果 */
.rss-copy.copied {
  color: #4caf50 !important;
  animation: copySuccess 2s ease-in-out;
}

@keyframes copySuccess {
  0% {
    color: #4caf50;
    transform: scale(1);
  }
  50% {
    color: #4caf50;
    transform: scale(1.1);
  }
  100% {
    color: var(--text-secondary);
    transform: scale(1);
  }
}

/* RSS复制成功时的对号图标 */
.rss-copy.copied svg {
  display: none !important;
}

.rss-copy.copied::after {
  content: "";
  display: block !important;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234CAF50'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: checkmarkPulse 0.6s ease-in-out;
}

@keyframes checkmarkPulse {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 移动端主导航样式 (<960px) - 抽屉型下拉菜单 */
@media (max-width: 959px) {
  #primary-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1600;
    min-width: 280px;
    max-width: 320px;
  }

  #primary-nav[hidden] {
    display: none;
  }

  #primary-nav[data-open="true"] {
    display: block;
  }

  #primary-nav .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(-8px) scale(0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0.14, 0.3, 1);
    overflow: hidden;
  }

  #primary-nav[data-open="true"] .nav-list {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #primary-nav .nav-list > li {
    border-bottom: 1px solid var(--border-primary);
  }

  #primary-nav .nav-list > li:last-child {
    border-bottom: none;
  }

  #primary-nav .nav-list > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.2s ease;
    background: transparent;
    position: relative;
  }

  #primary-nav .nav-list > li > a:hover {
    color: var(--main-color);
  }

  #primary-nav .nav-list > li > a:active {
    color: var(--main-color);
  }

  #primary-nav .submenu-toggle {
    position: relative;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-left: 8px;
  }

  #primary-nav .submenu-toggle:before {
    content: "";
    width: 6px;
    height: 6px;
    border: 2px solid currentColor;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  #primary-nav li.open > .submenu-toggle:before {
    transform: rotate(-135deg);
  }

  #primary-nav .submenu-toggle:hover {
    background: rgba(0, 0, 0, 0.08);
  }

  #primary-nav .nav-list li.menu-item-has-children > a {
    padding-right: 20px;
  }

  #primary-nav .nav-list li ul {
    position: relative;
    top: auto;
    left: auto;
    background: rgba(0, 0, 0, 0.02);
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    min-width: auto;
    display: none;
    margin: 0;
    border-top: 1px solid var(--border-primary);
  }

  #primary-nav .nav-list li.open > ul {
    display: block;
  }

  #primary-nav .nav-list li ul a {
    display: block;
    padding: 12px 20px 12px 40px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  #primary-nav .nav-list li ul a:hover {
    color: var(--main-color);
  }

  #primary-nav .nav-list li ul li:last-child a {
    border-bottom: none;
  }

  [data-theme="dark"] #primary-nav .nav-list {
    background: #161b22;
    border-color: #30363d;
  }

  [data-theme="dark"] #primary-nav .nav-list > li {
    border-color: #30363d;
  }

  [data-theme="dark"] #primary-nav .nav-list li ul {
    background: rgba(255, 255, 255, 0.02);
    border-color: #30363d;
  }

  [data-theme="dark"] #primary-nav .nav-list > li > a:hover {
    color: var(--dark-main-color);
  }

  [data-theme="dark"] #primary-nav .nav-list > li > a:active {
    color: var(--dark-main-color);
  }

  [data-theme="dark"] #primary-nav .nav-list li ul a {
    border-color: rgba(255, 255, 255, 0.05);
  }

  [data-theme="dark"] #primary-nav .nav-list li ul a:hover {
    color: var(--dark-main-color);
  }

  [data-theme="dark"] #primary-nav .submenu-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}

/* 图标按钮 hover 强调 - 已整合到上方统一规则中 */

/* 5) 搜索抽屉(统一,去重) */
/* 默认不显示任何半透明/模糊,防止页面一直朦胧;打开时再加背景与模糊 */
/* 全屏搜索框样式 */
.search-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1600;
  transition: all var(--tr-base);
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  display: none; /* 默认隐藏 */
  visibility: hidden;
  opacity: 0;
}

.search-drawer[aria-hidden="true"],
.search-drawer[data-open="false"] {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  display: none; /* 完全隐藏关闭状态的搜索抽屉 */
  visibility: hidden;
  opacity: 0;
}

.search-drawer[data-open="true"] {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  display: block;
  visibility: visible;
  opacity: 1;
}

[data-theme="dark"] .search-drawer[data-open="true"] {
  background: rgba(0, 0, 0, 0.6);
}

/* 磨砂层背景 */
.search-drawer-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.search-drawer[data-open="true"] .search-drawer-backdrop {
  opacity: 1;
}

/* 搜索框内容区域 */
.search-drawer-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  padding: 30px 60px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-drawer[data-open="true"] .search-drawer-inner {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 搜索表单 */
.search-drawer-form {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(121, 174, 156, 0.2);
  padding: 12px 16px;
  border-radius: 12px;
  transition: all var(--tr-base);
}

.search-drawer-form:focus-within {
  border-color: var(--main-color);
  box-shadow: 0 0 0 2px rgba(121, 174, 156, 0.1);
}

.search-drawer-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 400;
}

.search-drawer-input::placeholder {
  color: var(--text-secondary);
  font-weight: 400;
}

.search-drawer-submit {
  border: none;
  background: var(--main-color);
  color: #fff;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--tr-base);
  box-shadow: 0 2px 8px rgba(121, 174, 156, 0.2);
}

.search-drawer-submit:hover {
  background: var(--dark-main-color);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(121, 174, 156, 0.3);
}

.search-drawer-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all var(--tr-base);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.search-drawer-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  transform: scale(1.1);
}

/* 关键词区域 */
.search-keywords {
  text-align: center;
}

.search-keywords h3 {
  margin: 0 0 15px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.keywords-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.keyword-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(121, 174, 156, 0.08);
  color: var(--main-color);
  border: 1px solid rgba(121, 174, 156, 0.15);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all var(--tr-base);
}

.keyword-tag:hover {
  background: var(--main-color);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(121, 174, 156, 0.2);
}

/* 暗色主题适配 */
[data-theme="dark"] .search-drawer-inner {
  background: rgba(31, 31, 31, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .search-drawer-form {
  background: rgba(31, 31, 31, 0.8);
  border-color: rgba(121, 174, 156, 0.3);
}

[data-theme="dark"] .search-drawer-backdrop {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .keyword-tag {
  background: rgba(121, 174, 156, 0.15);
  border-color: rgba(121, 174, 156, 0.3);
}

@media (max-width: 640px) {
  .search-drawer-inner {
    width: 95%;
    max-width: 400px;
    padding: 25px 50px 25px 20px;
    gap: 15px;
  }
  .search-drawer-form {
    padding: 10px 14px;
    gap: 10px;
  }
  .search-drawer-input {
    font-size: 15px;
  }
  .search-drawer-submit {
    width: 36px;
    height: 36px;
  }
  .search-drawer-close {
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
  .keywords-list {
    gap: 6px;
  }
  .keyword-tag {
    padding: 3px 8px;
    font-size: 11px;
  }
  .search-keywords h3 {
    font-size: 13px;
    margin-bottom: 12px;
  }
}

.layout-archives,
.layout-tags {
  margin-top: 20px;
}
.layout-archives .archive-list,
.layout-tags .tag-posts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 通用项目块 */
.archive-item,
.tag-post-item {
  position: relative;
  padding: 18px 20px 16px;
  border: 1px solid var(--border-primary);
  background: var(--bg-primary);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.25s, border-color 0.25s, transform 0.25s;
}
.archive-item:hover,
.tag-post-item:hover {
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.15);
  border-color: var(--main-color);
  transform: translateY(-2px);
}

/* 标题 */
.archive-title,
.tag-post-title {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
}
.archive-title a,
.tag-post-title a {
  color: var(--dark-color);
  text-decoration: none;
  background: linear-gradient(
    120deg,
    rgba(121, 174, 156, 0.18),
    rgba(82, 132, 111, 0.18)
  );
  background-size: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.25s, background-size 0.35s ease;
  padding: 2px 6px;
  border-radius: 8px;
}
.archive-title a:hover,
.tag-post-title a:hover {
  color: #fff;
  background-size: 100% 100%;
  background-image: linear-gradient(
    120deg,
    var(--main-color),
    var(--dark-main-color)
  );
}

/* Meta 信息 */
.archive-meta,
.tag-post-meta {
  font-size: 12px;
  color: var(--light-color);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.archive-meta a,
.tag-post-meta a {
  color: var(--main-color);
  text-decoration: none;
}
.archive-meta a:hover,
.tag-post-meta a:hover {
  color: var(--dark-main-color);
  text-decoration: underline;
}
.archive-meta .meta-sep {
  color: var(--lighter-color);
}

/* 分类/标签徽标可后续拓展 */
.meta-tags a,
.meta-cats a {
  font-size: 12px;
  position: relative;
}

/* 无结果提示 */
.layout-archives .no-posts,
.layout-tags .no-posts {
  margin: 40px 0;
  text-align: center;
  color: var(--light-color);
  font-size: 14px;
}

/* taxonomy header */
.taxonomy-header {
  margin: 0 0 28px;
}
.taxonomy-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--dark-color);
}
.taxonomy-description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 暗色适配 - 归档和标签页面样式（详细样式在下方"深色模式完整适配"部分） */

/* 数字分页 */
.paginator-numeric {
  margin: 36px 0 10px;
}
.paginator-numeric .page-numbers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.paginator-numeric .page-numbers-list li a,
.paginator-numeric .page-numbers-list li span {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--bg-primary);
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.2;
  transition: 0.25s;
  text-decoration: none;
}
.paginator-numeric .page-numbers-list li a:hover {
  background: linear-gradient(
    135deg,
    var(--main-color),
    var(--dark-main-color)
  );
  color: #fff;
  border-color: var(--main-color);
}
.paginator-numeric .page-numbers-list li.active span {
  background: linear-gradient(
    135deg,
    var(--main-color),
    var(--dark-main-color)
  );
  color: #fff;
  border-color: var(--main-color);
  font-weight: 600;
}
.paginator-numeric .page-numbers-list li .prev,
.paginator-numeric .page-numbers-list li .next {
  font-weight: 500;
}
[data-theme="dark"] .paginator-numeric .page-numbers-list li a,
[data-theme="dark"] .paginator-numeric .page-numbers-list li span {
  background: var(--odd-color);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}
[data-theme="dark"] .paginator-numeric .page-numbers-list li a:hover {
  border-color: var(--main-color);
  background: var(--main-color);
  color: #ffffff;
}
[data-theme="dark"] .paginator-numeric .page-numbers-list li.active span {
  border-color: var(--main-color);
  background: var(--main-color);
  color: #ffffff;
}

@media (min-width: 680px) {
  .archive-title,
  .tag-post-title {
    font-size: 20px;
  }
  .archive-item,
  .tag-post-item {
    padding: 22px 26px 20px;
  }
}

.year-header:first-child {
  margin-top: 0;
}

/* 6) 文章卡片 */
.layout-card {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 15px 0;
  border-radius: 4px;
  background: var(--odd-color);
  color: #333333;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--tr-base);
}

.layout-card:nth-child(even) {
  background: var(--even-color);
}

.layout-card:hover {
  background-color: #79ae9c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: none;
}

.layout-card:hover .card-title h2 {
  color: #ffffff;
}

.layout-card:hover .card-mate {
  color: #ffffff;
}

.layout-card .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.layout-card .card-title {
  flex: 1;
  margin: 0;
  text-decoration: none;
}

.layout-card .card-title h2 {
  margin: 0;
  font-size: 16px;
  color: #333333;
  line-height: 1.4;
  font-weight: normal;
  transition: all var(--tr-base);
  text-decoration: none;
}

.layout-card:hover .card-title h2 {
  color: #ffffff;
}

.layout-card .card-mate {
  color: var(--gray-400);
  font-size: 14px;
  white-space: nowrap;
  margin-left: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.layout-card .card-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.layout-card .card-stat-item {
  color: var(--gray-400);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s ease;
}

.layout-card:hover .post-date {
  display: none;
}

.layout-card:hover .card-stats {
  display: flex !important;
}

.layout-card:hover .card-stat-item {
  color: #ffffff;
}

.layout-paginator {
  text-align: center;
}

.layout-paginator .btn-next {
  margin: 1rem 0 0;
}

/* 文章页面样式 */
.layout-post {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 24px;
  padding: 0;
}

.layout-post-body {
  position: relative;
  margin: 0;
  padding: 24px 0;
}

.post-main {
  overflow: visible;
  line-height: 2;
  background: #ffffff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.post-header {
  margin: 0 0 1.6em;
}

.post-header .title {
  margin: 0;
  font-variant: tabular-nums;
  font-family: "LXGW WenKai", "霞鹜文楷", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft JhengHei",
    "微软正黑体", sans-serif;
  line-height: 1.5;
}

.post-header .title h1 {
  color: var(--dark-main-color);
  font-weight: 500;
  font-variant: tabular-nums;
  font-size: 24px;
  cursor: default;
}

.post-header .title h1:hover {
  color: var(--darker-main-color);
}

.post-header .mate {
  position: relative;
  display: flex;
  margin: 1rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #f4f6f9;
  font-size: 0;
}

.post-header .mate-list {
  position: relative;
  display: inline-block;
  color: rgba(0, 0, 0, 0.45);
  text-transform: capitalize;
  font-size: 14px;
  line-height: 22px;
  margin-left: 24px;
  cursor: pointer;
}

.post-header .mate-list:first-child {
  flex: 1 1;
  margin: 0;
}

.post-header .mate-list:last-child::after {
  content: "|";
  position: absolute;
  top: 0px;
  left: -14px;
}

.post-content {
  overflow: visible;
  margin: 0 0 24px;
  padding: 0;
  height: auto;
  text-align: justify;
  font-size: 14px;
  line-height: 2;
}

.post-body ul > li {
  margin-left: 20px;
  padding-left: 4px;
  list-style-type: circle;
}

/* 文章内图片自适应样式 */
.post-body img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: 2px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

/* 图片容器 */
.post-img {
  margin: 1.5em 0;
  text-align: center;
  line-height: 0;
}

.post-img a {
  display: inline-block;
  max-width: 100%;
}

.post-img img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  width: auto;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all var(--tr-base);
}

.post-img a:hover img {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* 确保图片不会溢出容器 */
.post-content img,
.post-body img {
  max-width: 100% !important;
  height: auto !important;
  width: auto !important;
}

/* 如果图片有内联宽度样式,也要自适应 */
.post-content img[style*="width"],
.post-body img[style*="width"] {
  width: auto !important;
  max-width: 100% !important;
}

/* WordPress默认图片对齐 */
.post-body .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.post-body .alignleft {
  float: left;
  margin: 0.5em 1.5em 1em 0;
}

.post-body .alignright {
  float: right;
  margin: 0.5em 0 1em 1.5em;
}

.post-body table {
  line-height: 1.7;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1em 0;
  width: 100%;
  max-width: 100%;
  border-width: 1px;
  border-style: solid;
  background-color: transparent;
  border-spacing: 0;
  word-break: normal;
}

.post-body table,
.post-body table tr,
.post-body table tr td,
.post-body table tr th {
  border-color: #e6e6e6;
}

.post-body table th {
  font-weight: bold;
  background-color: #fdfdfd;
}

.post-body tr th {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  text-align: left;
}

.post-body tr th,
.post-body tr td {
  padding: 10px 20px;
  border-right: 1px solid;
  border-bottom: 1px solid #e6e6e6;
}

.post-body tbody tr:last-child td {
  border-bottom: 0;
}

.post-body tr th:last-child,
.post-body tr td:last-child {
  border-right: 0;
}

.post-body table tbody > tr:nth-child(odd) > td,
.post-body table tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}

.post-footer {
  position: relative;
  overflow: hidden;
  margin: 1.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.post-navbar {
  position: relative;
  display: flex;
  align-items: center;
}

.post-navbar:nth-child(even) {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-color);
}

.post-navbar .title {
  font-size: 14px;
}

.post-link {
  flex: 1 1;
  text-align: right;
}

.post-link:hover h2,
.post-link:focus h2 {
  color: var(--dark-main-color);
}

.post-link h2 {
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  color: var(--main-color);
}

.post-zan {
  position: relative;
  padding: 4rem 0;
  margin-bottom: 1.5rem;
}

.zan-content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.btn-zan {
  display: block;
  width: 100%;
  font-size: 21px;
  text-align: center;
}

.zan-title {
  display: inline-block;
}

/* 回到顶部按钮 */
.layout-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--darker-main-color);
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
}

.layout-totop:hover {
  background-color: var(--main-color);
}

.layout-totop i {
  font-size: 20px;
  color: #fff;
  line-height: 1;
}

/* （去重：原重复 footer 块已合并） */

/* 4) 组件 - 点赞消息提示 (like-message) */
.like-message {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--overlay-dark);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 24px;
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  opacity: 0;
  transition: opacity var(--tr-base), transform var(--tr-base);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  backdrop-filter: blur(10px);
  max-width: 400px;
  min-width: 200px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.like-message.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
  .like-message {
    font-size: 13px;
    padding: 10px 20px;
    max-width: 90%;
  }
}

/* 4) 组件 - 悬浮操作按钮面板 */
.floating-actions {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  background: white;
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  opacity: 1;
  transition: all var(--tr-base);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.floating-actions.show {
  opacity: 1;
  transform: translateY(-50%);
}

.action-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.action-btn:hover {
  background: #5b7fff;
  color: white;
  transform: scale(1.05);
}

.action-btn:active {
  transform: scale(0.95);
}

.action-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: all var(--tr-fast);
}

/* 暗色模式适配 */
[data-theme="dark"] .floating-actions {
  background: var(--dark-surface-1);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .action-btn {
  background: var(--dark-surface-hover);
  color: #9ca3af;
}

[data-theme="dark"] .action-btn:hover {
  background: #5b7fff;
  color: white;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .floating-actions {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .floating-actions {
    right: 15px;
    padding: 10px;
    gap: 6px;
    border-radius: 10px;
  }

  .action-btn {
    width: 40px;
    height: 40px;
  }

  .action-icon {
    width: 18px;
    height: 18px;
  }
}

.floating-actions {
  right: 10px;
  padding: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
}

/* 7) 工具类 - Tooltip */
.has-tooltip {
  position: relative;
  cursor: help;
}

.has-tooltip [data-tooltip]::before,
.has-tooltip [data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--tr-quick);
  z-index: 1000;
}

/* 提示框内容 */
.has-tooltip [data-tooltip]::before {
  /* 内容 */
  content: attr(data-tooltip);
  /* 盒模型 */
  padding: 8px 12px;
  border-radius: 6px;
  /* 视觉 */
  background: var(--tooltip-bg);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* 排版 */
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  /* 定位 */
  bottom: 100%;
  left: 50%;
  margin-bottom: 8px;
  transform: translateX(-50%) translateY(-5px);
}

/* 提示框箭头 */
.has-tooltip [data-tooltip]::after {
  /* 内容 */
  content: "";
  /* 视觉 */
  border: 5px solid transparent;
  border-top-color: #1a1a1a;
  /* 定位 */
  bottom: 100%;
  left: 50%;
  margin-bottom: 3px;
  transform: translateX(-50%);
}

/* 悬停时显示 */
.has-tooltip [data-tooltip]:hover::before,
.has-tooltip [data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 暗色模式适配 */
[data-theme="dark"] .has-tooltip [data-tooltip]::before {
  background: #2d2d2d;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .has-tooltip [data-tooltip]::after {
  border-top-color: #2d2d2d;
}

/* 响应式 - 移动端 */
@media (max-width: 768px) {
  .has-tooltip [data-tooltip]::before {
    font-size: 11px;
    padding: 6px 10px;
  }

  .has-tooltip [data-tooltip]::after {
    border-width: 4px;
    margin-bottom: 2px;
  }
}

/* ========== 暗色模式下图片优化 ========== */
[data-theme="dark"] .post-img img,
[data-theme="dark"] .post-body img,
[data-theme="dark"] .post-content img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  opacity: 0.9;
}

[data-theme="dark"] .post-img a:hover img {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* ========== 移动端图片优化 ========== */
@media (max-width: 768px) {
  .post-img {
    margin: 1em 0;
  }

  .post-img img {
    border-radius: 3px;
  }

  /* 确保移动端图片不会溢出 */
  .post-content,
  .post-body {
    overflow-x: hidden;
  }

  .post-content img,
  .post-body img {
    max-width: 100% !important;
    height: auto !important;
  }
}

.post-img {
  margin: 0.8em 0;
}

.post-body .alignleft,
.post-body .alignright {
  float: none;
  display: block;
  margin: 1em auto;
}

/* 8) 深色模式完整适配 - 整站统一 */

/* 0. 深色模式CSS变量覆盖 - � 暗夜蓝调主题 */
[data-theme="dark"] {
  /* 背景色 - 深蓝灰色系 */
  --bg-primary: #0d1117; /* 深蓝灰 - 主背景 (GitHub风格) */
  --bg-secondary: #161b22; /* 中度蓝灰 - 次级背景/卡片 */

  /* 文字颜色 - 浅蓝白色系 */
  --text-primary: #c9d1d9; /* 浅蓝白 - 主要文字 */
  --text-secondary: #8b949e; /* 柔和灰蓝 - 次要文字/元信息 */

  /* 边框颜色 - 暗蓝灰 */
  --border-primary: #21262d; /* 暗蓝灰边框 */

  /* 主题强调色 - 青蓝色 */
  --main-color: #58a6ff; /* 明亮青蓝 - 主题色 */
  --main-hover: #79b8ff; /* hover状态更亮 */

  /* 链接颜色 - 明亮蓝色 */
  --link-color: #58a6ff; /* 亮蓝 - 链接 */
  --link-hover: #79b8ff; /* 更亮 - 链接hover */
}

/* 1. 全局基础 - 使用CSS变量 */
[data-theme="dark"] body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="dark"] html {
  background-color: var(--bg-primary);
}

/* 2. 布局容器 - 使用CSS变量 */
[data-theme="dark"] .layout,
[data-theme="dark"] .layout-main,
[data-theme="dark"] .layout-content {
  background-color: var(--bg-primary);
}

[data-theme="dark"] .container {
  background-color: transparent;
}

/* 3. 首页文章卡片 */
[data-theme="dark"] .layout-card {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
}

[data-theme="dark"] .layout-card:nth-child(even) {
  background: rgba(22, 27, 34, 0.6); /* 稍微透明的深蓝灰 */
}

[data-theme="dark"] .layout-card:hover {
  background-color: var(--main-color);
  border-color: var(--main-hover);
  box-shadow: 0 4px 12px rgba(88, 166, 255, 0.25); /* 蓝色光晕 */
}

[data-theme="dark"] .layout-card .card-title h2 {
  color: var(--text-primary);
}

[data-theme="dark"] .layout-card:hover .card-title h2 {
  color: #ffffff;
}

[data-theme="dark"] .layout-card .card-mate {
  color: var(--text-secondary);
}

[data-theme="dark"] .layout-card .post-date {
  color: var(--text-secondary);
}

[data-theme="dark"] .layout-card .card-stat-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .layout-card:hover .card-stat-item {
  color: #ffffff;
}

/* 4. 分类菜单 */
[data-theme="dark"] .category-menu {
  background: transparent;
}

[data-theme="dark"] .category-item {
  color: var(--text-secondary);
  background: transparent;
}

[data-theme="dark"] .category-item:not(:last-child)::after {
  color: var(--border-primary);
}

[data-theme="dark"] .category-item:hover {
  background: var(--main-color);
  color: #ffffff;
  border-color: var(--main-color);
}

/* 5. 文章页面 */
[data-theme="dark"] .layout-post,
[data-theme="dark"] .layout-post-body {
  background-color: var(--bg-primary);
}

[data-theme="dark"] .post-main {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .post-content,
[data-theme="dark"] .post-body {
  color: var(--text-primary);
}

/* 6. 文章标题和元信息 */
[data-theme="dark"] .post-header .title h1 {
  color: var(--text-primary);
}

[data-theme="dark"] .post-header .title h1:hover {
  color: var(--main-color);
}

[data-theme="dark"] .post-header .mate {
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .post-header .mate-item {
  color: var(--text-secondary);
}

[data-theme="dark"] .post-header .mate-item svg {
  fill: var(--text-secondary);
}

/* 7. 文章内容标题 */
[data-theme="dark"] .post-body h1,
[data-theme="dark"] .post-body h2,
[data-theme="dark"] .post-body h3,
[data-theme="dark"] .post-body h4,
[data-theme="dark"] .post-body h5,
[data-theme="dark"] .post-body h6 {
  color: var(--text-primary);
}

/* 8. 文章内容元素 */
[data-theme="dark"] .post-body p {
  color: var(--text-primary);
}

[data-theme="dark"] .post-body a {
  color: var(--link-color); /* 使用亮青绿色链接 */
}

[data-theme="dark"] .post-body a:hover {
  color: var(--link-hover); /* hover更亮 */
}

[data-theme="dark"] .post-body blockquote {
  background: var(--bg-secondary);
  border-left-color: var(--main-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .post-body code {
  background: rgba(110, 118, 129, 0.4); /* 深蓝灰背景 */
  color: #79c0ff; /* 浅蓝色代码 */
  border: 1px solid var(--border-primary);
}

[data-theme="dark"] .post-body pre {
  background: #161b22; /* 深蓝灰背景 */
  border: 1px solid var(--border-primary);
}

[data-theme="dark"] .post-body pre code {
  background: transparent;
  border: none;
  color: #79c0ff; /* 浅蓝色代码块 */
}

/* 9. 表格 */
[data-theme="dark"] .post-body table {
  border-color: var(--border-primary);
  background-color: var(--bg-secondary);
}

[data-theme="dark"] .post-body table th {
  background-color: var(--odd-color);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

[data-theme="dark"] .post-body table td {
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .post-body table tr:hover {
  background-color: var(--even-color);
}

/* 10. 分类和标签徽章 */
[data-theme="dark"] .category-badge {
  opacity: 0.9;
}

[data-theme="dark"] .category-badge:hover {
  opacity: 1;
  box-shadow: 0 2px 8px rgba(88, 166, 255, 0.3);
}

/* 11. 点赞按钮 */
[data-theme="dark"] .like-button {
  background: var(--odd-color);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

[data-theme="dark"] .like-button:hover {
  background: #e74133;
  border-color: #e74133;
  color: white;
}

[data-theme="dark"] .like-button.liked {
  background: #e74133;
  border-color: #e74133;
  color: white;
}

/* 14. 分页 */
[data-theme="dark"] .layout-paginator .btn-next {
  background: var(--odd-color);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .layout-paginator .btn-next:hover {
  background: var(--main-color);
  color: #ffffff;
}

[data-theme="dark"] .pagination {
  background: transparent;
}

[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
  background: var(--odd-color);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .pagination a:hover {
  background: var(--main-color);
  color: #ffffff;
  border-color: var(--main-color);
}

[data-theme="dark"] .pagination .current {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #ffffff;
}

/* 15. 归档页面 */
[data-theme="dark"] .year-header {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .archive-item {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .archive-item:hover {
  background: var(--main-color);
  border-color: var(--main-color);
}

/* 16. 搜索抽屉 */
[data-theme="dark"] .search-drawer {
  background: var(--bg-primary);
}

[data-theme="dark"] .search-input {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus {
  border-color: var(--main-color);
}

[data-theme="dark"] .search-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.6;
}

/* 17. 滚动条 - 使用浏览器默认滚动条 */

/* 18. 代码高亮块 */
[data-theme="dark"] .hljs {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .code-toolbar {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

/* 19. 目录 */
[data-theme="dark"] .toc-wrapper {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

[data-theme="dark"] .toc-title {
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .toc-list a {
  color: var(--text-secondary);
}

[data-theme="dark"] .toc-list a:hover,
[data-theme="dark"] .toc-list a.active {
  color: var(--main-color);
}

/* 20. Toast和消息提示 - 统一样式 */
[data-theme="dark"] .toast,
[data-theme="dark"] .like-message {
  background: rgba(42, 47, 53, 0.95);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* 21. 悬浮操作按钮 */
[data-theme="dark"] .floating-actions {
  background: var(--bg-secondary);
  border-color: var(--border-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .action-btn {
  background: var(--odd-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .action-btn:hover {
  background: var(--main-color);
  color: #ffffff;
}

/* 22. 链接颜色 */
[data-theme="dark"] a {
  color: var(--main-color);
}

[data-theme="dark"] a:hover {
  color: var(--light-main-color);
}

/* 23. 分隔线 */
[data-theme="dark"] hr {
  border-top-color: var(--border-primary);
}

/* 24. 选中文本 */
[data-theme="dark"] ::selection {
  background: var(--main-color);
  color: #ffffff;
}

[data-theme="dark"] ::-moz-selection {
  background: var(--main-color);
  color: #ffffff;
}

/* 9) 首页 Banner 样式 */

/* ========================================
   首页Banner样式 - 简洁版
======================================== */

.home-banner {
  position: relative;
  width: 100%;
  height: 400px;
  background: #f5f5f5;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px;
  width: 100%;
}

.banner-content {
  text-align: center;
  animation: bannerFadeIn 1s ease-out;
}

/* Slogan样式 */
.banner-slogan {
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  color: white;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  line-height: 1.6;
  animation: bannerSlideUp 0.8s ease-out;
  letter-spacing: 1px;
}

/* Banner动画 */
@keyframes bannerFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes bannerSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .home-banner {
    height: 360px;
  }

  .banner-inner {
    padding: 50px 30px;
  }

  .banner-slogan {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .home-banner {
    height: 300px;
  }

  .banner-inner {
    padding: 40px 20px;
  }

  .banner-slogan {
    font-size: 20px;
  }
}

.home-banner {
  height: 240px;
}

.banner-inner {
  padding: 30px 16px;
}

.banner-slogan {
  font-size: 18px;
  letter-spacing: 0.5px;
}

/* 深色模式适配 - Banner */
[data-theme="dark"] .home-banner {
  background: var(--bg-secondary);
}

[data-theme="dark"] .banner-slogan {
  color: var(--text-primary);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ========== Footer Minimal Restore ========== */
.site-footer {
  margin-top: 40px;
  padding: 32px 0 0;
  background: #2e4a40;
  color: #fff;
}
.site-footer .footer-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 22px 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.site-footer .footer-info {
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.9;
  text-align: left;
  flex: 1;
}
.site-footer .footer-info a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}
.site-footer .footer-info a:hover {
  opacity: 1;
  border-color: transparent;
}
.site-footer .footer-fonts,
.site-footer .footer-theme,
.site-footer .footer-credits {
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.8;
  text-align: left;
}
.site-footer .footer-fonts .font-credit,
.site-footer .footer-theme .theme-credit,
.site-footer .footer-credits .credits-text {
  display: block;
  text-align: left;
}
.site-footer .footer-fonts a,
.site-footer .footer-theme a,
.site-footer .footer-credits a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
  transition: all 0.2s ease;
}
.site-footer .footer-fonts a:hover,
.site-footer .footer-theme a:hover,
.site-footer .footer-credits a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
  opacity: 1;
}
.site-footer .footer-theme .theme-credit strong,
.site-footer .footer-credits .credits-text strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.site-footer .footer-social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: flex-start;
}
.site-footer .footer-social li {
  line-height: 1;
}
.site-footer .footer-social a {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 10px;
  font-size: 16px;
  transition: 0.25s;
}
.site-footer .footer-social a:hover {
  background: var(--main-color);
  color: #fff;
  transform: translateY(-2px);
}
[data-theme="dark"] .site-footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  color: var(--text-secondary);
}
[data-theme="dark"] .site-footer .footer-social a {
  background: rgba(88, 166, 255, 0.15); /* 蓝色半透明 */
  color: var(--text-primary);
}
[data-theme="dark"] .site-footer .footer-social a:hover {
  background: var(--link-color); /* 亮蓝色 */
  color: #ffffff;
}

/* =============================================================
   10) 响应式统一区域 - 移动端小屏优化 (≤480px)
   ============================================================= */
@media (max-width: 480px) {
  /* Header - Logo 缩小 */
  .header-inner {
    padding: 0 12px;
  }
  .logo-img {
    width: 32px;
    height: 32px;
  }

  /* 悬浮操作按钮 - 缩小右边距与尺寸 */
  .floating-actions {
    right: 10px;
    padding: 8px;
  }
  .action-btn {
    width: 36px;
    height: 36px;
  }

  /* 文章图片 - 浮动图片取消浮动 */
  .post-img {
    margin: 0.8em 0;
  }
  .post-body .alignleft,
  .post-body .alignright {
    float: none;
    display: block;
    margin: 1em auto;
  }

  /* Banner - 高度与文字缩小 */
  .home-banner {
    height: 240px;
  }
  .banner-inner {
    padding: 30px 16px;
  }
  .banner-slogan {
    font-size: 18px;
    letter-spacing: 0.5px;
  }
}