/* ============================================================
   财经博客 · 喜庆暖色版样式（v3）
   暖米底 + 中国红/朱红主色 + 金橙点缀
   移动端适配 + 轻动效 + 可访问性
   ============================================================ */

/* 字体策略：不加载网络字体（Google Fonts 国内访问不稳定且阻塞渲染），
   全站走系统字体栈回退——本机装有 Noto 系列则优先使用，否则回退各平台系统字体 */

:root {
  --font-serif: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --font-sans: 'Noto Sans SC', 'Source Han Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;

  /* 统一间距尺度（0.25rem 基准递增，提升一致性） */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */

  /* 喜庆暖色调（保持暖色喜庆，更明快精致） */
  --color-primary: #d23b2c;        /* 中国红（明快喜庆）— 导航/页脚/Banner */
  --color-primary-2: #e0653d;      /* 暖朱橙 — 渐变辅助 */
  --color-primary-bright: #ec533b; /* 更亮的红/橙红 — hover/强调 */
  --color-accent: #cf9a2e;         /* 金 — 点缀/边框（略提亮更协调） */
  --color-accent-light: #f0d9a8;   /* 浅金 */
  --color-accent-text: #96660f;    /* 深金 — 仅用于小字号金色文字（白底对比度≈4.9:1，达 WCAG AA） */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 12%, #fff);
  --color-secondary: #e8743b;      /* 暖橙 — 次级强调 */

  --color-text: #3a2a20;           /* 暖近黑棕（正文，对比度≈13:1） */
  --color-text-light: #7c665a;     /* 暖灰褐（次要文字，对比度≈5:1） */
  --color-bg: #fdf6ec;             /* 暖米底 */
  --color-card: #fffdf9;           /* 暖白卡片 */
  --color-border: #f0e2d0;        /* 暖边线 */

  /* 阴影减重：更轻更柔（subtle，1–2 层，避免沉重投影） */
  --shadow-sm: 0 1px 3px rgba(150, 75, 40, 0.07);
  --shadow-md: 0 4px 16px rgba(150, 75, 40, 0.08);
  --shadow-lg: 0 10px 28px rgba(150, 75, 40, 0.12);

  --radius: 12px;
  --radius-sm: 8px;
  --content-width: 760px;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------------- 导航栏 ---------------- */
.navbar {
  background: var(--color-primary) !important;
  /* 底部 1px 金线 + 更轻阴影，避免沉重投影 */
  box-shadow: 0 1px 0 rgba(207, 154, 46, 0.45), var(--shadow-sm) !important;
  padding: 0.8rem 0;
}

.navbar-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: #fff !important;
}

.navbar-brand:hover { color: var(--color-accent-light) !important; }

/* 导航链接：金色下划线滑入动效（150–400ms ease-out） */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
  transition: width 0.25s ease-out;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-accent-light) !important;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

/* ---------------- 移动端网格菜单（品牌金色点缀） ---------------- */
#mobile-grid-menu .mobile-grid-item i {
  color: var(--color-accent-light);
}

#mobile-grid-menu .mobile-grid-item {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------------- 访问统计徽章 ---------------- */
.visit-badge {
  position: fixed;
  top: 70px;
  left: 15px;
  z-index: 1000;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--color-text-light);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.visit-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-secondary);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

.visit-item strong {
  color: var(--color-primary);
  font-weight: 700;
}

.visit-sep {
  color: var(--color-border);
  margin: 0 1px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* ---------------- Banner — 渐变底 + banner-art.png 图案层叠（解决纯渐变留白太多） ---------------- */
.banner {
  /* home-banner-new.jpg（专属财经主题插画，K线+金币+祥云）作为顶层图案 */
  /* 底层保留渐变作为 fallback + 边缘色彩统一过渡 */
  background:
    url(/img/home-banner-new.webp) center / cover no-repeat,
    radial-gradient(120% 80% at 85% 12%, rgba(255,245,220,0.25) 0%, transparent 55%),
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);

  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 装饰性金色圆环/光斑（伪元素，增加节日氛围） */
.banner::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 2px solid rgba(207, 154, 46, 0.18);
  pointer-events: none;
}

.banner::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 10%;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 120, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* 极轻蒙版：保证白色标题在图案任何区域都清晰可读，同时保留图案可见度 */
.banner .mask {
  background-color: rgba(0, 0, 0, 0.22) !important;
}

/* 标题文字：白字 + 柔和阴影（纯色渐变背景上不需要重阴影） */
.banner-text {
  font-family: var(--font-serif);
  text-shadow: 0 2px 12px rgba(120, 20, 15, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.banner-text h1 {
  letter-spacing: 2px;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(120, 20, 15, 0.45), 0 1px 3px rgba(0, 0, 0, 0.2);
}

#subtitle {
  font-size: 1.1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92) !important;
  letter-spacing: 3px;
  text-shadow: 0 1px 6px rgba(120, 20, 15, 0.35);
}

/* ---------------- 首页文章列表卡片 ---------------- */
/* 实际 DOM：div.row.index-card > article.index-info（无 .card 类） */
.index-card {
  position: relative;
  background: var(--color-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid transparent;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

/* 顶部喜庆渐变装饰条 */
.index-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  border-radius: var(--radius) var(--radius) 0 0;
  z-index: 2;
  pointer-events: none;
  transition: background 0.3s ease;
}

.index-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 32px rgba(150, 75, 40, 0.12),
    0 4px 12px rgba(207, 154, 46, 0.08);
  border-color: var(--color-accent-light);
}

.index-card:hover::before {
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-accent));
}

/* 卡片内容区（覆盖 Fluid 默认的 0.5rem 上下 padding + Bootstrap col 15px 左右） */
.index-info {
  padding: 1.5rem 1.6rem 1.2rem;
}

.index-header {
  white-space: normal;  /* 覆盖 Fluid 的 nowrap 截断，允许标题换行 */
}

.index-header a {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.index-header a:hover { color: var(--color-primary-bright); }

.index-excerpt {
  color: var(--color-text-light);
  line-height: 1.85;
  letter-spacing: 0.2px;
  text-decoration: none !important;
  transition: color 0.2s ease;
}

.index-excerpt:hover { color: var(--color-text); }

/* 底部元信息（日期 + 标签），实际类名 .index-btm / .post-meta */
.index-btm { font-size: 0.85rem; color: var(--color-text-light); }
.index-btm a,
.post-metas a { color: var(--color-accent-text); text-decoration: none; transition: color 0.2s ease; }
.index-btm a:hover,
.post-metas a:hover { color: var(--color-primary); }

/* ---------------- 分页（实际 DOM：.page-number / .current / .extend） ---------------- */
.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination .page-number,
.pagination .extend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pagination .page-number:hover,
.pagination .extend:hover {
  background: var(--color-card);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.pagination .current {
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

/* ---------------- 文章页侧边栏（TOC 目录） ---------------- */
.side-col .sidebar {
  position: sticky;
  top: 80px;
}

.toc-header {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  position: relative;
}

/* 左侧短金条装饰 */
.toc-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

.toc-body {
  font-size: 0.88rem;
  line-height: 1.8;
}

.toc-body a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.toc-body a:hover {
  color: var(--color-primary);
}

/* ============================================================
   文章正文
   ============================================================ */
.post-content {
  font-family: var(--font-sans);
  line-height: 2;
  max-width: var(--content-width);
}

.post-content h1,
.post-content h2,
.post-content h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* 流式字号：移动端到大屏平滑缩放 */
.post-content h1 { font-size: clamp(1.6rem, 4.2vw, 2.1rem); }
.post-content h2 { font-size: clamp(1.35rem, 3.6vw, 1.7rem); }
.post-content h3 { font-size: clamp(1.15rem, 3vw, 1.35rem); }
.post-content p,
.post-content li { font-size: clamp(1rem, 2.6vw, 1.05rem); }

.post-content h2 {
  position: relative;
  padding-left: 14px;
}

/* 短竖线装饰：只取文字高度（1em）并垂直居中，避免整行高度的长竖线 */
.post-content h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  border-radius: 2px;
  background: var(--color-accent);
}

.post-content p { margin-bottom: 1.2rem; }

/* 关键：长 URL 必须能换行，避免移动端横向溢出 */
.post-content p,
.post-content li,
.post-content a {
  overflow-wrap: break-word;
  word-break: break-word;
}

.post-content a {
  display: inline-block;
  max-width: 100%;
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent-light);
  text-underline-offset: 3px;
}

.post-content a:hover {
  color: var(--color-primary-bright);
  text-decoration-color: var(--color-primary-bright);
}

/* 引用块 -> 暖金资源卡片 */
.post-content blockquote {
  border-left: 4px solid var(--color-accent);
  background: linear-gradient(90deg, var(--color-accent-soft), #fff 70%);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  color: var(--color-text-light);
  box-shadow: var(--shadow-sm);
}

.post-content del { color: #c4b3a6; }

.post-content pre {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  font-size: 0.9em;
}

.post-content img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

/* 行内代码：暖金胶囊 */
.post-content code:not(pre code) {
  background: var(--color-accent-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-accent-light);
  border-radius: 5px;
  padding: 0.12em 0.4em;
  font-size: 0.88em;
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  word-break: break-word;
}

/* 分隔线：渐变细线 + 居中菱形装饰 */
.post-content hr {
  border: none;
  height: 1px;
  margin: 2.2rem auto;
  background: linear-gradient(90deg, transparent, var(--color-accent) 30%, var(--color-accent) 70%, transparent);
  position: relative;
  max-width: 320px;
}

.post-content hr::after {
  content: '◆';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-accent);
  font-size: 0.7rem;
  background: var(--color-card);
  padding: 0 10px;
  line-height: 1;
}

/* 图片说明文字（image_caption 开启时生成） */
.post-content .image-caption,
.markdown-body .image-caption {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: 0.5rem;
  font-style: italic;
}

/* 表格响应式：移动端水平滚动，避免溢出 */
.post-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.92em;
}

.post-content table thead,
.post-content table tbody {
  display: table;
  width: 100%;
  table-layout: auto;
}

.post-content table th {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 0.8rem;
  text-align: left;
  white-space: nowrap;
}

.post-content table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--color-border);
}

.post-content table tbody tr:nth-child(even) {
  background: rgba(240, 226, 208, 0.25);
}

.post-content table tbody tr:hover {
  background: var(--color-accent-soft);
}

/* 表格标题：辅助技术识别表格用途，视觉上弱化避免干扰 */
.post-content table caption {
  caption-side: top;
  text-align: left;
  padding: 0.4rem 0.6rem;
  font-size: 0.88em;
  color: var(--color-text-light);
  font-style: italic;
  border-bottom: 1px dashed var(--color-border);
  margin-bottom: 0.3rem;
}

/* ---------------- 版权信息框 ---------------- */
.license-box {
  background: linear-gradient(135deg, var(--color-card), var(--color-accent-soft));
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  box-shadow: var(--shadow-sm);
}

.license-title {
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.6rem;
  line-height: 1.6;
  word-break: break-all;
}

.license-title div:last-child {
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-light);
}

.license-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  color: var(--color-text-light);
}

.license-meta-item div:first-child {
  font-size: 0.75rem;
  color: var(--color-text-light);
}

.license-meta-item div:last-child {
  color: var(--color-text);
  font-weight: 500;
}

/* ---------------- 上一篇 / 下一篇导航 ---------------- */
.post-prevnext {
  display: flex;
  gap: 0.8rem;
}

.post-prev,
.post-next {
  flex: 1;
  min-width: 0;
}

.post-prev a,
.post-next a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none !important;
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}

.post-next a {
  justify-content: flex-end;
  text-align: right;
}

.post-prev a:hover,
.post-next a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
  color: var(--color-primary);
}

.post-prev a i,
.post-next a i {
  color: var(--color-accent);
  flex-shrink: 0;
}

.post-prev a span,
.post-next a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 正文入场动效 */
.post-content { animation: fadeInUp 0.5s ease-out both; }

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

/* 首页卡片错落入场 */
.index-card { animation: fadeInUp 0.5s ease-out both; }
.index-card:nth-of-type(2) { animation-delay: 0.06s; }
.index-card:nth-of-type(3) { animation-delay: 0.12s; }
.index-card:nth-of-type(4) { animation-delay: 0.18s; }

/* ---------------- 页脚 ---------------- */
footer {
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.75);
  padding: 2rem 0;
}

footer a { color: var(--color-accent-light); }
footer a:hover { color: #fff; }

/* ---------------- 标签 ---------------- */
.tagcloud a {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 0.85rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tagcloud a:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* ---------------- 可访问性：键盘焦点 ---------------- */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   首页工具入口
   ============================================================ */
.home-tools-wrap {
  padding: 1.5rem 0 0;
  position: relative;
}

.home-tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1rem;
}

.home-tool-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  position: relative;
  overflow: hidden;
  /* 统一暖白底 + 金边 */
  background: linear-gradient(135deg, #fffdf9 0%, #fff8ee 100%) !important;
  border: 1px solid var(--color-accent-light) !important;
  box-shadow: var(--shadow-sm);
}

/* 左侧彩色装饰条（用 ::before 实现，不破坏布局） */
.home-tool-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* hover：金光阴影 + 轻微上浮 + 左侧条加粗 */
.home-tool-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 24px rgba(207, 154, 46, 0.18),
    0 2px 8px rgba(150, 75, 40, 0.08);
  border-color: var(--color-accent) !important;
}

.home-tool-card:hover::before {
  width: 6px;
}

/* 各工具卡片左侧装饰条颜色 */
.tool-calc::before    { background: linear-gradient(180deg, #d23b2c, #e0653d); }
.tool-position::before{ background: linear-gradient(180deg, #cf9a2e, #e8b54e); }
.tool-trading::before { background: linear-gradient(180deg, #e8743b, #f0985e); }
.tool-leek::before    { background: linear-gradient(180deg, #4ba377, #6bc09a); }
.tool-mbti::before    { background: linear-gradient(180deg, #7b5ea7, #9d80c4); }

.tool-icon {
  font-size: 1.8rem;
  line-height: 1;
  flex-shrink: 0;
  /* 图标轻微浮动动效 */
  transition: transform 0.3s ease;
}

.home-tool-card:hover .tool-icon {
  transform: scale(1.15) rotate(-5deg);
}

.tool-body { flex: 1; min-width: 0; }

.tool-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}

.tool-desc {
  font-size: 0.78rem;
  color: var(--color-text-light);
  line-height: 1.4;
}

/* 工具区与文章区视觉分隔 */
.tools-articles-divider {
  display: flex;
  align-items: center;
  max-width: 760px;
  margin: 1.8rem auto 1.2rem;
  padding: 0 1rem;
  gap: 12px;
}

.tools-articles-divider::before,
.tools-articles-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.tools-articles-divider span {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-light);
  white-space: nowrap;
  letter-spacing: 2px;
}

/* ============================================================
   导航栏字体放大
   ============================================================ */
.navbar .nav-link {
  font-size: 1rem !important;
  font-weight: 500;
}

.navbar .navbar-brand {
  font-size: 1.35rem !important;
}

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 768px) {
  .visit-badge {
    top: auto;
    bottom: 14px;
    left: 14px;
    font-size: 11px;
    padding: 5px 11px;
  }

  .home-tools-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .home-tool-card {
    padding: 0.9rem 1rem;
    gap: 0.7rem;
  }

  .tool-icon { font-size: 1.5rem; }
  .tool-title { font-size: 0.95rem; }
  .tool-desc { font-size: 0.72rem; }
  .tools-articles-divider { margin: 1.2rem auto 0.8rem; }

  .banner-text h1 { font-size: 1.5rem; }
  #subtitle { font-size: 0.9rem; }

  /* 移动端 Banner 构图偏上（竖屏时标题在上部区域） */
  .banner { background-position: center 30%; }

  .post-content { padding-left: 0.25rem; padding-right: 0.25rem; }
  .card-body { padding: 1.1rem; }
}

/* 尊重「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- 滚动条美化 ---------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }

/* ---------------- 选中文字 ---------------- */
::selection { background: var(--color-accent-light); color: var(--color-primary); }

/* ============================================================
   全站固定悬浮「返回」按钮（左上角，智能返回）
   位置说明：避开顶部 navbar（约 64px）与左上角访问统计徽章
   （.visit-badge 位于 top:70px / left:15px，约 36px 高），
   桌面端置于徽章下方（top:112px）以避免视觉重叠；
   移动端徽章移至底部，按钮回到 navbar 下方左角。
   ============================================================ */
#blog-back-btn {
  position: fixed;
  top: 112px;
  left: 16px;
  z-index: 999; /* 高于普通内容，低于 navbar(约1030)与 visit-badge(1000) */

  display: inline-flex;
  align-items: center;
  gap: 4px;

  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  white-space: nowrap;

  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
  border: 1px solid var(--color-accent); /* 金边 */
  border-radius: 999px;                  /* 胶囊形 */
  box-shadow: var(--shadow-md);

  padding: 10px 16px;
  min-height: 40px;                      /* 桌面触控目标 */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#blog-back-btn .blog-back-arrow {
  display: inline-block;
  font-size: 16px;
  line-height: 1;
}

#blog-back-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  filter: brightness(1.05);
}

#blog-back-btn:active {
  transform: scale(0.97);
}

/* 键盘焦点：金色描边（与现有 focus-visible 风格一致） */
#blog-back-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* 移动端：访问徽章已移至底部，按钮回到 navbar 下方左角 */
@media (max-width: 768px) {
  #blog-back-btn {
    top: 64px;
    left: 12px;
    padding: 9px 14px;
    font-size: 13px;
    min-height: 40px; /* 满足移动端 >= 40px 触控目标 */
  }
}

/* 尊重「减少动效」偏好：关闭按钮的 transform 动效（与现有守卫风格一致） */
@media (prefers-reduced-motion: reduce) {
  #blog-back-btn {
    transition: none;
  }
  #blog-back-btn:hover,
  #blog-back-btn:active {
    transform: none;
  }
}

/* ============================================================
   回到顶部按钮 —— 复用 Fluid 内置 #scroll-top-button
   （位置 bottom/right 由主题 JS 内联控制，这里只美化外观，
     避免与自绘按钮重复，故不再注入 #blog-top-btn）
   ============================================================ */
#scroll-top-button {
  background: linear-gradient(135deg, var(--color-accent), var(--color-secondary)) !important;
  border-radius: 50% !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px;
  height: 44px;
  box-shadow: var(--shadow-md) !important;
  transition: bottom 0.3s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
  -webkit-tap-highlight-color: transparent;
}

#scroll-top-button i {
  color: #fff !important;
  font-size: 24px !important;
}

#scroll-top-button:hover {
  box-shadow: var(--shadow-lg) !important;
  filter: brightness(1.06);
}

#scroll-top-button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #scroll-top-button {
    transition: none !important;
  }
}

/* Z 哥介绍页入口 —— 左上角标题右侧醒目胶囊按钮 */
.nav-link.zge-nav-link {
  color: #fff !important;
  background: var(--color-accent);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 1px;
  padding: 4px 16px !important;
  margin-left: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  line-height: 1.25;
  align-self: center;
  transition: background .2s ease, transform .2s ease;
}
.nav-link.zge-nav-link:hover,
.nav-link.zge-nav-link:focus-visible {
  color: #fff !important;
  background: var(--color-primary-bright);
  transform: translateY(-1px);
}

/* 关闭 Fluid 默认 .nav-link::after 下划线滑入，避免胶囊底部多余金线 */
.nav-link.zge-nav-link::after {
  display: none !important;
}

/* ============================================================
   阅读进度条（文章页顶部固定）
   ============================================================ */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 9999;
  opacity: 0;
  transition: width 0.1s linear, opacity 0.3s ease;
  box-shadow: 0 0 8px rgba(207, 154, 46, 0.5);
  pointer-events: none;
}

/* ============================================================
   暗色模式适配
   Fluid 主题机制：在 <html> 元素上设置 data-user-color-scheme="dark"
   （见 node_modules/hexo-theme-fluid/source/js/color-schema.js）
   CSS 变量覆盖需挂在 :root[data-user-color-scheme="dark"] 上
   保持暖色调基因，转为深色底 + 暖金强调
   ============================================================ */
:root[data-user-color-scheme="dark"] {
  --color-primary: #e85a4a;          /* 提亮的中国红，深底上更醒目 */
  --color-primary-2: #f08060;        /* 暖朱橙 */
  --color-primary-bright: #ff6b50;   /* hover 强调 */
  --color-accent: #e0b85c;           /* 提亮的金 */
  --color-accent-light: #4a3a1a;     /* 深金底色（用于选中背景等） */
  --color-accent-text: #e0b85c;      /* 暗底上亮金对比度≈9:1，文字可直接用 */
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 14%, #1a1410);
  --color-secondary: #f08850;        /* 暖橙 */

  --color-text: #e8dccc;             /* 暖白文字 */
  --color-text-light: #a89888;       /* 暖灰次要文字 */
  --color-bg: #1a1410;               /* 深暖棕底 */
  --color-card: #221a14;             /* 深暖卡片 */
  --color-border: #3a2a1e;           /* 深暖边线 */

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.5);
}

/* body 背景与文字色（变量已由 :root 覆盖，这里显式应用） */
html[data-user-color-scheme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

/* 导航栏暗色 */
html[data-user-color-scheme="dark"] .navbar {
  background: rgba(26, 20, 16, 0.92) !important;
  border-bottom-color: var(--color-border);
}
html[data-user-color-scheme="dark"] .navbar .nav-link {
  color: var(--color-text) !important;
}
html[data-user-color-scheme="dark"] .navbar .navbar-brand {
  color: var(--color-text) !important;
}
html[data-user-color-scheme="dark"] .navbar .nav-link:hover {
  color: var(--color-accent) !important;
}

/* 文章卡片暗色 */
html[data-user-color-scheme="dark"] .post-content,
html[data-user-color-scheme="dark"] #board > .container > .row > div {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
}
html[data-user-color-scheme="dark"] .post-content h1,
html[data-user-color-scheme="dark"] .post-content h2,
html[data-user-color-scheme="dark"] .post-content h3,
html[data-user-color-scheme="dark"] .post-content h4 {
  color: var(--color-text) !important;
}
html[data-user-color-scheme="dark"] .post-content a {
  color: var(--color-accent);
}
html[data-user-color-scheme="dark"] .post-content blockquote {
  background: var(--color-accent-soft);
  border-left-color: var(--color-accent);
  color: var(--color-text-light);
}

/* 表格暗色 */
html[data-user-color-scheme="dark"] .post-content table th {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2));
}
html[data-user-color-scheme="dark"] .post-content table tbody tr:nth-child(even) {
  background: rgba(60, 45, 30, 0.3);
}
html[data-user-color-scheme="dark"] .post-content table tbody tr:hover {
  background: var(--color-accent-soft);
}
html[data-user-color-scheme="dark"] .post-content table td {
  border-bottom-color: var(--color-border);
}

/* 代码块暗色（仅块级 pre，行内 code 单独处理） */
html[data-user-color-scheme="dark"] pre,
html[data-user-color-scheme="dark"] pre code {
  background: #0f0a08 !important;
  color: var(--color-text) !important;
}

/* 行内代码暗色：保持金胶囊但加深底色 */
html[data-user-color-scheme="dark"] .post-content code:not(pre code) {
  background: rgba(224, 184, 92, 0.12) !important;
  border-color: rgba(224, 184, 92, 0.25);
  color: var(--color-accent) !important;
}

/* 版权框 / 上下篇 / 分隔线暗色 */
html[data-user-color-scheme="dark"] .license-box {
  background: linear-gradient(135deg, var(--color-card), var(--color-accent-soft));
  border-color: var(--color-border);
  border-left-color: var(--color-accent);
}
html[data-user-color-scheme="dark"] .post-prev a,
html[data-user-color-scheme="dark"] .post-next a {
  background: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text);
}
html[data-user-color-scheme="dark"] .post-prev a:hover,
html[data-user-color-scheme="dark"] .post-next a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
html[data-user-color-scheme="dark"] .post-content hr::after {
  background: var(--color-card);
}

/* 目录暗色 */
html[data-user-color-scheme="dark"] .toc-header {
  color: var(--color-accent);
  border-bottom-color: var(--color-border);
}
html[data-user-color-scheme="dark"] .toc-body a {
  color: var(--color-text-light);
}
html[data-user-color-scheme="dark"] .toc-body a:hover {
  color: var(--color-accent);
}

/* 目录侧边栏暗色 */
html[data-user-color-scheme="dark"] #toc,
html[data-user-color-scheme="dark"] .toc-bot,
html[data-user-color-scheme="dark"] .post-toc {
  background: var(--color-card) !important;
  color: var(--color-text) !important;
}
html[data-user-color-scheme="dark"] #toc a,
html[data-user-color-scheme="dark"] .toc-bot a,
html[data-user-color-scheme="dark"] .post-toc a {
  color: var(--color-text-light) !important;
}
html[data-user-color-scheme="dark"] #toc a:hover,
html[data-user-color-scheme="dark"] .post-toc a:hover {
  color: var(--color-accent) !important;
}

/* 首页文章卡片暗色 */
html[data-user-color-scheme="dark"] .index-card {
  background: var(--color-card) !important;
  border-color: var(--color-border);
}
html[data-user-color-scheme="dark"] .index-card:hover {
  border-color: var(--color-accent);
}
html[data-user-color-scheme="dark"] .index-header a {
  color: var(--color-primary) !important;
}
html[data-user-color-scheme="dark"] .index-excerpt {
  color: var(--color-text-light) !important;
}
html[data-user-color-scheme="dark"] .index-btm,
html[data-user-color-scheme="dark"] .post-meta {
  color: var(--color-text-light) !important;
}

/* 工具卡片暗色 */
html[data-user-color-scheme="dark"] .home-tool-card {
  background: var(--color-card);
  border-color: var(--color-border);
}
html[data-user-color-scheme="dark"] .home-tool-card:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

/* 页脚暗色 */
html[data-user-color-scheme="dark"] footer,
html[data-user-color-scheme="dark"] .footer {
  background: #0f0a08 !important;
  color: var(--color-text-light) !important;
}
html[data-user-color-scheme="dark"] footer a,
html[data-user-color-scheme="dark"] .footer a {
  color: var(--color-text-light) !important;
}

/* 访问徽章暗色 */
html[data-user-color-scheme="dark"] .visit-badge {
  background: rgba(26, 20, 16, 0.92) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-border) !important;
}

/* 返回按钮暗色（保持渐变，金边不变） */
html[data-user-color-scheme="dark"] #blog-back-btn {
  box-shadow: var(--shadow-md);
}

/* Z 哥导航胶囊暗色 */
html[data-user-color-scheme="dark"] .nav-link.zge-nav-link {
  background: var(--color-accent);
  color: #1a1410 !important;
  border-color: rgba(232, 90, 74, 0.4);
}

/* 选中文字暗色 */
html[data-user-color-scheme="dark"] ::selection {
  background: var(--color-accent-light);
  color: var(--color-accent);
}

/* 滚动条暗色 */
html[data-user-color-scheme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg);
}
html[data-user-color-scheme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-primary);
}

/* ============================================================
   P1-4: 触摸目标优化（WCAG 44px 最小标准）
   ============================================================ */

/* 导航链接：增大点击区域 */
.navbar .nav-link {
  padding: 0.5rem 1rem !important;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* 分页按钮：增大点击区域 */
/* （Fluid 1.9.9 分页 DOM 为 .page-number/.current/.extend，
     触控尺寸已在上方"分页"章节保障，无 .page-link 类） */

/* 标签云：增大点击区域 */
.tagcloud a {
  padding: 8px 16px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* 搜索按钮、暗色切换按钮 */
.navbar .nav-item > a {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 返回按钮确保 44px */
.blog-back-btn {
  min-width: 44px !important;
  min-height: 44px !important;
}

/* ============================================================
   P1-6: 表格缺失值样式优化
   ============================================================ */

/* 表格中的缺失值标记（—、-、N/A）用浅灰斜体，降低视觉权重 */

/* 1. 空单元格：用 ::before 插入 — 占位符 */
.post-content table td.missing-value:empty::before {
  content: '—';
  color: var(--color-text-light);
  opacity: 0.4;
  font-style: italic;
  font-weight: 300;
}

/* 2. 含 — / - / N/A 的单元格：直接应用浅灰斜体样式 */
.post-content table td.missing-value {
  color: var(--color-text-light);
  opacity: 0.5;
  font-style: italic;
  font-weight: 300;
}

/* ============================================================
   P2-8: 首屏动效编排（Banner 文字渐入）
   ============================================================ */

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

@keyframes bannerSubtitleFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 0.92;
    transform: translateY(0);
  }
}

.banner-text h1 {
  animation: bannerFadeIn 0.8s ease-out both;
}

#subtitle {
  animation: bannerSubtitleFadeIn 0.8s ease-out 0.3s both;
}

/* Banner 装饰圆环缓慢旋转 */
.banner::before {
  animation: rotate 30s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================
   P3: 品牌图形语言 — 统一装饰元素
   ============================================================ */

/* 文章正文首字下沉（增强阅读体验，仅对长文章第一段生效） */
.post-content .markdown-body > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 2.6em;
  font-weight: 700;
  color: var(--color-primary);
  float: left;
  line-height: 0.9;
  margin: 0.1em 0.1em 0 0;
}

/* 暗色模式下首字颜色 */
html[data-user-color-scheme="dark"] .post-content .markdown-body > p:first-of-type::first-letter {
  color: var(--color-accent);
}

/* ============================================================
   录播资源卡片化样式
   ============================================================ */

/* 资源卡片容器 */
.post-content .resource-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  margin: 0.6rem 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fffdf9 0%, #fff8ee 100%);
  border: 1px solid var(--color-accent-light);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.post-content .resource-card:hover {
  border-color: var(--color-accent);
  box-shadow:
    0 4px 12px rgba(207, 154, 46, 0.15),
    0 1px 4px rgba(150, 75, 40, 0.06);
}

/* 卡片顶部：网盘标签 + 主复制按钮 */
.post-content .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* 网盘类型标签 */
.post-content .disk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 链接区域：外显完整 URL，可换行 */
.post-content .resource-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(207, 154, 46, 0.08);
  color: var(--color-primary) !important;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: background 0.2s ease;
  word-break: break-all;
  overflow-wrap: break-word;
}

.post-content .resource-link:hover {
  background: rgba(207, 154, 46, 0.15);
  color: var(--color-primary-bright) !important;
}

.post-content .link-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.post-content .link-text {
  word-break: break-all;
  overflow-wrap: break-word;
  font-family: 'Courier New', 'Consolas', monospace;
}

/* 口令/提取码区域 */
.post-content .resource-code-wrap,
.post-content .pwd-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(207, 154, 46, 0.08);
}

.post-content .code-label,
.post-content .pwd-label {
  font-size: 0.72rem;
  color: var(--color-text-light);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-content .code-text,
.post-content .pwd-text {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 0.82rem;
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: all;
  word-break: break-all;
  flex: 1;
  min-width: 0;
}

/* 复制按钮 */
.post-content .copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border: none;
  border-radius: 6px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.post-content .copy-btn:hover {
  background: var(--color-primary);
  transform: scale(1.05);
}

.post-content .copy-btn:active {
  transform: scale(0.95);
}

.post-content .copy-btn.copied {
  background: var(--color-primary-bright);
}

/* 主复制按钮（复制完整信息）：更显眼 */
.post-content .copy-btn.copy-main {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  padding: 4px 12px;
  font-size: 0.74rem;
  min-height: 28px;
}

.post-content .copy-btn.copy-main:hover {
  filter: brightness(1.08);
}

/* 小复制按钮（仅复制口令/提取码） */
.post-content .copy-btn.copy-sub {
  min-height: 24px;
}

/* 文件名说明 */
.post-content .file-name {
  width: 100%;
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 0.2rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--color-accent-light);
  word-break: break-all;
}

/* 暗色模式适配 */
html[data-user-color-scheme="dark"] .post-content .resource-card {
  background: linear-gradient(135deg, #2a2018 0%, #1f1812 100%);
  border-color: rgba(207, 154, 46, 0.2);
}

html[data-user-color-scheme="dark"] .post-content .resource-link {
  background: rgba(207, 154, 46, 0.1);
}

html[data-user-color-scheme="dark"] .post-content .resource-code-wrap,
html[data-user-color-scheme="dark"] .post-content .pwd-wrap {
  background: rgba(207, 154, 46, 0.12);
}

html[data-user-color-scheme="dark"] .post-content .code-text,
html[data-user-color-scheme="dark"] .post-content .pwd-text {
  color: var(--color-accent);
}

/* 移动端适配：卡片内容纵向排列 */
@media (max-width: 575.98px) {
  .post-content .resource-card {
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
  }

  .post-content .resource-code-wrap,
  .post-content .pwd-wrap {
    flex-wrap: wrap;
  }

  .post-content .code-text,
  .post-content .pwd-text {
    flex: 1 1 100%;
  }
}

/* ============================================================
   快速导航卡片网格（录播资源汇总页，由 resource-card.js 生成）
   ============================================================ */
.post-content .quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 1rem 0 1.5rem;
}

.post-content .quick-nav-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0.6rem 0.85rem;
  background: linear-gradient(135deg, #fffdf9 0%, #fff6e8 100%);
  border: 1px solid var(--color-accent-light);
  border-radius: 10px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-content .quick-nav-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(207, 154, 46, 0.18);
}

.post-content .qn-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.35;
}

.post-content .quick-nav-item:hover .qn-name {
  color: var(--color-primary-bright);
}

.post-content .qn-desc {
  font-size: 0.74rem;
  color: var(--color-text-light);
  line-height: 1.45;
  word-break: break-word;
}

@media (min-width: 768px) {
  .post-content .quick-nav-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 暗色模式 */
html[data-user-color-scheme="dark"] .post-content .quick-nav-item {
  background: linear-gradient(135deg, #2a2018 0%, #241c14 100%);
  border-color: rgba(207, 154, 46, 0.25);
}

/* 锚点跳转时为固定导航栏留出空间，避免章节标题被顶栏遮住 */
.post-content h2,
.post-content h3 {
  scroll-margin-top: 72px;
}