/**
 * custom-fancy.css — 极光玻璃风:流光渐变底 + 玻璃拟态面板
 *
 * 暗色为主,柔和极光在深处缓慢流动,内容浮于磨砂玻璃之上。
 * 通过 _config.fluid.yml 的 custom_css 注入,加载在 main.css 之后。
 *
 * v3 改动(极光/玻璃拟态渐进打磨):
 *   - §0 设计令牌:新增极光色板、玻璃材质、辉光、渐变三重奏变量
 *   - §1 背景:扫描线退场,改为四层极光光斑缓慢漂移 + 保留噪点
 *   - §4/5/8 表面:导航栏、标签、按钮升级为磨砂玻璃 + 悬浮辉光
 *   - §13 阅读进度条:青→靛→紫渐变 + 微光
 *   - §15 新增:#board 主面板玻璃化、TOC/分类侧栏玻璃卡片、
 *     banner 底部渐隐融合、页脚渐变发丝线、正文链接下划线生长动画
 *
 * 尊重 prefers-reduced-motion:动画在该设置下自动降级。
 */

/* ============================================================
 * 0. 设计令牌:自定义颜色与字体的唯一来源
 *    暗色为默认;亮色 = 手动切换 + 系统偏好兜底
 * ============================================================ */

:root {
  /* 强调色(链接 hover、进度条、箭头等) */
  --fx-accent: #7eb6e8;
  --fx-accent-bg: rgba(126, 182, 232, 0.08);
  --fx-accent-border: rgba(126, 182, 232, 0.5);
  --fx-accent-glow: rgba(126, 182, 232, 0.28);

  /* 渐变三重奏:青 → 靛 → 紫(进度条、装饰线) */
  --fx-grad-1: #67e8f9;
  --fx-grad-2: #818cf8;
  --fx-grad-3: #c084fc;

  /* 玻璃材质(面板 / 侧栏 / 挂件) */
  --fx-glass-bg: rgba(23, 29, 44, 0.58);
  --fx-glass-bg-soft: rgba(23, 29, 44, 0.42);
  --fx-glass-bg-heavy: rgba(18, 23, 36, 0.78);
  --fx-glass-border: rgba(140, 165, 210, 0.14);
  --fx-glass-shadow: 0 16px 48px rgba(0, 0, 0, 0.38);
  --fx-glass-blur: 18px;
  --fx-nav-bg: rgba(16, 21, 34, 0.55);

  /* banner 底部渐隐融合色(与 html 底色衔接) */
  --fx-banner-fade: rgba(11, 15, 26, 0.92);
  /* banner 白色罩纱(仅亮色模式使用,暗色为透明) */
  --fx-banner-veil: rgba(255, 255, 255, 0);
  /* 正文图片投影 */
  --fx-img-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

  /* 分隔线三级强度 */
  --fx-line: rgba(120, 140, 180, 0.12);
  --fx-line-subtle: rgba(120, 140, 180, 0.08);
  --fx-line-strong: rgba(120, 140, 180, 0.25);

  /* 状态色(分享按钮反馈) */
  --fx-ok: #67c08a;
  --fx-ok-bg: rgba(103, 192, 138, 0.08);
  --fx-ok-border: rgba(103, 192, 138, 0.5);
  --fx-err: #e07b7b;
  --fx-err-bg: rgba(224, 123, 123, 0.08);
  --fx-err-border: rgba(224, 123, 123, 0.5);

  /* 选区 */
  --fx-selection-bg: rgba(126, 182, 232, 0.28);

  /* 滚动条 */
  --fx-scrollbar: #3a4658;
  --fx-scrollbar-hover: #5a6a82;

  /* 回到顶部按钮 */
  --fx-btn-bg: #2a3548;
  --fx-btn-bg-hover: #3a4658;

  /* Google 翻译挂件 */
  --fx-gt-bg: rgba(20, 24, 33, 0.92);
  --fx-gt-text: #d0d6df;
  --fx-gt-option-bg: #1a1f2e;

  /* 表格斑马纹 */
  --fx-zebra: rgba(126, 182, 232, 0.045);

  /* 字体 */
  --fx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Helvetica Neue", Arial, sans-serif;
  --fx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* 亮色(手动切换) */
[data-user-color-scheme="light"] {
  --fx-accent: #2a6ca8;
  --fx-accent-bg: rgba(42, 108, 168, 0.07);
  --fx-accent-border: rgba(42, 108, 168, 0.45);
  --fx-accent-glow: rgba(42, 108, 168, 0.22);

  --fx-grad-1: #0891b2;
  --fx-grad-2: #4f46e5;
  --fx-grad-3: #9333ea;

  --fx-glass-bg: rgba(255, 255, 255, 0.8);
  --fx-glass-bg-soft: rgba(244, 246, 250, 0.7);
  --fx-glass-bg-heavy: rgba(250, 251, 253, 0.88);
  --fx-glass-border: rgba(30, 50, 80, 0.08);
  --fx-glass-shadow: 0 20px 60px rgba(80, 100, 140, 0.14);
  --fx-nav-bg: rgba(252, 253, 255, 0.72);

  --fx-banner-fade: rgba(238, 242, 248, 0.96);
  --fx-banner-veil: rgba(255, 255, 255, 0.1);
  --fx-img-shadow: 0 10px 30px rgba(80, 100, 140, 0.2);

  --fx-line: rgba(40, 60, 90, 0.14);
  --fx-line-subtle: rgba(40, 60, 90, 0.08);
  --fx-line-strong: rgba(40, 60, 90, 0.28);

  --fx-ok: #2f7d4f;
  --fx-ok-bg: rgba(47, 125, 79, 0.08);
  --fx-ok-border: rgba(47, 125, 79, 0.45);
  --fx-err: #b33a3a;
  --fx-err-bg: rgba(179, 58, 58, 0.07);
  --fx-err-border: rgba(179, 58, 58, 0.45);

  --fx-selection-bg: rgba(42, 108, 168, 0.22);

  --fx-scrollbar: #b8bfca;
  --fx-scrollbar-hover: #98a2b0;

  --fx-btn-bg: #e2e6ec;
  --fx-btn-bg-hover: #d2d8e0;

  --fx-gt-bg: rgba(246, 247, 249, 0.96);
  --fx-gt-text: #3c4858;
  --fx-gt-option-bg: #ffffff;

  --fx-zebra: rgba(42, 108, 168, 0.04);
}

/* 亮色(系统偏好兜底:auto 模式下未手动选择时) */
@media (prefers-color-scheme: light) {
  :root:not([data-user-color-scheme]) {
    --fx-accent: #2a6ca8;
    --fx-accent-bg: rgba(42, 108, 168, 0.07);
    --fx-accent-border: rgba(42, 108, 168, 0.45);
    --fx-accent-glow: rgba(42, 108, 168, 0.22);

    --fx-grad-1: #0891b2;
    --fx-grad-2: #4f46e5;
    --fx-grad-3: #9333ea;

    --fx-glass-bg: rgba(255, 255, 255, 0.8);
    --fx-glass-bg-soft: rgba(244, 246, 250, 0.7);
    --fx-glass-bg-heavy: rgba(250, 251, 253, 0.88);
    --fx-glass-border: rgba(30, 50, 80, 0.08);
    --fx-glass-shadow: 0 20px 60px rgba(80, 100, 140, 0.14);
    --fx-nav-bg: rgba(252, 253, 255, 0.72);

    --fx-banner-fade: rgba(238, 242, 248, 0.96);
    --fx-banner-veil: rgba(255, 255, 255, 0.1);
    --fx-img-shadow: 0 10px 30px rgba(80, 100, 140, 0.2);

    --fx-line: rgba(40, 60, 90, 0.14);
    --fx-line-subtle: rgba(40, 60, 90, 0.08);
    --fx-line-strong: rgba(40, 60, 90, 0.28);

    --fx-ok: #2f7d4f;
    --fx-ok-bg: rgba(47, 125, 79, 0.08);
    --fx-ok-border: rgba(47, 125, 79, 0.45);
    --fx-err: #b33a3a;
    --fx-err-bg: rgba(179, 58, 58, 0.07);
    --fx-err-border: rgba(179, 58, 58, 0.45);

    --fx-selection-bg: rgba(42, 108, 168, 0.22);

    --fx-scrollbar: #b8bfca;
    --fx-scrollbar-hover: #98a2b0;

    --fx-btn-bg: #e2e6ec;
    --fx-btn-bg-hover: #d2d8e0;

    --fx-gt-bg: rgba(246, 247, 249, 0.96);
    --fx-gt-text: #3c4858;
    --fx-gt-option-bg: #ffffff;

    --fx-zebra: rgba(42, 108, 168, 0.04);
  }
}

/* ============================================================
 * 1. 背景:深空渐变底 + 极光光斑缓慢漂移 + 噪点
 *    html 承载底色;body::before = 极光层(大尺寸 + 模糊 + 位移动画,
 *    transform 走 GPU 合成,不会每帧重算模糊);body::after = 噪点
 * ============================================================ */

html {
  background-color: #0b0f1a;
  background-image:
    radial-gradient(140% 100% at 50% -10%, rgba(99, 102, 241, 0.1), transparent 60%),
    linear-gradient(180deg, #131a2c 0%, #0b0f1a 100%);
  background-attachment: fixed;
  transition: background-color 0.4s ease;
}
body {
  background-color: transparent !important;
  background-image: none;
  font-family: var(--fx-sans);
}

/* 极光层:四层色光斑,超出视口 30% 以便漂移不露边 */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(40% 44% at 20% 26%, rgba(99, 102, 241, 0.3), transparent 70%),
    radial-gradient(36% 40% at 80% 20%, rgba(34, 211, 238, 0.22), transparent 70%),
    radial-gradient(44% 48% at 66% 80%, rgba(168, 85, 247, 0.22), transparent 70%),
    radial-gradient(32% 34% at 28% 84%, rgba(59, 130, 246, 0.18), transparent 70%);
  filter: blur(56px);
  will-change: transform;
  animation: fx-aurora 36s ease-in-out infinite alternate;
}
@keyframes fx-aurora {
  0% {
    transform: translate3d(-2.5%, -1.5%, 0) rotate(-1.2deg) scale(1);
  }
  50% {
    transform: translate3d(2%, 1.5%, 0) rotate(1deg) scale(1.04);
  }
  100% {
    transform: translate3d(-1%, 2.5%, 0) rotate(-0.6deg) scale(1.02);
  }
}

/* 噪点纹理层:SVG fractalNoise,极淡,给极光与玻璃增加纸感 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 亮色模式:冷蓝调浅底 + 减法极光(同色系、约束在顶部区域) */
[data-user-color-scheme="light"] {
  background-color: #f3f6fa;
  background-image: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
  background-attachment: fixed;
}
[data-user-color-scheme="light"] body::before {
  background-image:
    radial-gradient(52% 46% at 18% 6%, rgba(147, 197, 253, 0.34), transparent 70%),
    radial-gradient(46% 42% at 82% 2%, rgba(196, 181, 253, 0.24), transparent 70%),
    radial-gradient(44% 38% at 55% 24%, rgba(186, 230, 253, 0.2), transparent 70%);
  filter: blur(72px);
}
[data-user-color-scheme="light"] body::after {
  opacity: 0.025;
}
/* auto 模式下系统为亮色时的兜底 */
@media (prefers-color-scheme: light) {
  :root:not([data-user-color-scheme]) {
    background-color: #f3f6fa;
    background-image: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
    background-attachment: fixed;
  }
  :root:not([data-user-color-scheme]) body::before {
    background-image:
      radial-gradient(52% 46% at 18% 6%, rgba(147, 197, 253, 0.34), transparent 70%),
      radial-gradient(46% 42% at 82% 2%, rgba(196, 181, 253, 0.24), transparent 70%),
      radial-gradient(44% 38% at 55% 24%, rgba(186, 230, 253, 0.2), transparent 70%);
    filter: blur(72px);
  }
  :root:not([data-user-color-scheme]) body::after {
    opacity: 0.025;
  }
}

a,
button,
.nav-link,
.navbar-brand {
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

/* ============================================================
 * 2. 滚动条:单色细条,去渐变
 * ============================================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--fx-scrollbar);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fx-scrollbar-hover);
}

/* ============================================================
 * 3. 首页文章列表:无卡片,纯分隔线 + hover 箭头滑入
 * ============================================================ */

.index-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--fx-line) !important;
  margin-bottom: 0;
  padding: 2.2rem 0 !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 清掉原高光条 */
.index-card::before,
.index-card::after {
  display: none !important;
  content: none !important;
}
/* hover 不上浮,标题变色 + 箭头滑入 + 底部分隔线染色 */
.index-card:hover {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: var(--fx-accent-border) !important;
}
.index-header a {
  text-decoration: none;
}
.index-header a::after {
  content: "\2192"; /* → */
  display: inline-block;
  margin-left: 0.5rem;
  color: var(--fx-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.index-header a:hover::after {
  opacity: 1;
  transform: translateX(0);
}
.index-header a:hover {
  color: var(--fx-accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--fx-accent) !important;
}

/* ============================================================
 * 4. 导航栏:滚动后进入磨砂玻璃态(模糊 + 饱和 + 细底线)
 * ============================================================ */

.navbar.scrolling-navbar {
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
}
#navbar.top-nav-collapse,
#navbar.navbar-col-show {
  background-color: var(--fx-nav-bg) !important;
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--fx-glass-border) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18) !important;
}
[data-user-color-scheme="light"] #navbar.top-nav-collapse,
[data-user-color-scheme="light"] #navbar.navbar-col-show {
  box-shadow: 0 8px 30px rgba(80, 100, 140, 0.14) !important;
}
.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
  text-shadow: none !important;
}

/* ============================================================
 * 5. 标签 / 按钮:磨砂玻璃小件,hover 泛起强调色辉光
 * ============================================================ */

.post-meta a {
  border-radius: 999px !important;
  padding: 2px 10px !important;
  background: var(--fx-glass-bg-soft) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--fx-glass-border) !important;
}
.post-meta a:hover {
  background: var(--fx-accent-bg) !important;
  color: var(--fx-accent) !important;
  border-color: var(--fx-accent-border) !important;
  box-shadow: 0 0 0 1px var(--fx-accent-border),
    0 4px 16px var(--fx-accent-glow) !important;
}

#scroll-top-button {
  background: var(--fx-glass-bg-heavy) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--fx-glass-border) !important;
  border-radius: 12px !important;
}
#scroll-top-button:hover {
  background: var(--fx-btn-bg-hover) !important;
  box-shadow: 0 0 0 1px var(--fx-accent-border),
    0 6px 20px var(--fx-accent-glow) !important;
  transform: none !important;
}

/* ============================================================
 * 6. 副标题:极光柔光(远光晕 + 近处压暗保证可读)
 * ============================================================ */

#subtitle {
  text-shadow: 0 2px 26px rgba(120, 170, 255, 0.38),
    0 1px 6px rgba(0, 0, 0, 0.35) !important;
}

/* ============================================================
 * 7. 无障碍:尊重 prefers-reduced-motion
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html,
  a,
  button {
    transition: none;
  }
  body::before {
    animation: none;
  }
  .index-header a::after {
    transition: none;
  }
  .fx-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
 * 8. 文章页：相关文章 + 分享按钮
 *    分享按钮脱离 .markdown-body，移到 prevnext 之后作为独立模块
 * ============================================================ */

.post-related {
  margin: 2.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--fx-line);
}
.post-related-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 0.8rem;
  color: inherit;
}
.post-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-related-list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--fx-line-subtle);
}
.post-related-list li:last-child {
  border-bottom: none;
}
.post-related-list a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.5rem 0;
  color: inherit;
}
.post-related-list a:hover {
  color: var(--fx-accent) !important;
  background: none !important;
  -webkit-text-fill-color: var(--fx-accent) !important;
}
.post-related-date {
  flex: 0 0 auto;
  font-family: var(--fx-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  opacity: 0.55;
}
.post-related-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分享条 — 独立模块，与 markdown-body 视觉分离 */
.post-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.6rem 0 0.4rem;
  padding: 1rem 0 0;
  border-top: 1px solid var(--fx-line);
}
.post-share-label {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.42;
  margin-right: 0.5rem;
  font-family: var(--fx-mono);
}
.post-share-btn {
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--fx-line);
  border-radius: 999px; /* 胶囊状，区别于 tag 描边方块 */
  padding: 0.34rem 0.9rem;
  transition: color 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease, opacity 0.2s ease;
}
.post-share-btn:hover {
  opacity: 1;
  color: var(--fx-accent);
  border-color: var(--fx-accent-border);
  background: var(--fx-accent-bg);
  box-shadow: 0 0 0 1px var(--fx-accent-border),
    0 4px 16px var(--fx-accent-glow);
}
.post-share-btn--done {
  color: var(--fx-ok) !important;
  opacity: 1 !important;
  border-color: var(--fx-ok-border) !important;
  background: var(--fx-ok-bg) !important;
}
.post-share-btn--fail {
  color: var(--fx-err) !important;
  opacity: 1 !important;
  border-color: var(--fx-err-border) !important;
  background: var(--fx-err-bg) !important;
}

/* ============================================================
 * 9. Google 翻译低调挂件
 *    默认低透明度浮在右下角，hover 才凸显
 * ============================================================ */

.gt-minimal {
  position: fixed;
  right: 18px;
  bottom: 56px; /* 避开回到顶部的箭头 */
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.gt-minimal-btn {
  font: inherit;
  font-size: 14px;
  line-height: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  color: inherit;
  opacity: 0.35;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--fx-line);
  border-radius: 50%;
  transition: opacity 0.2s ease, border-color 0.2s ease,
    background-color 0.2s ease;
}
.gt-minimal-btn:hover {
  opacity: 1;
  border-color: var(--fx-accent-border);
  background: var(--fx-accent-bg);
}
.gt-minimal-host {
  background: var(--fx-glass-bg-heavy);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--fx-glass-border);
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.gt-minimal-host[hidden] {
  display: none !important;
}

/* Google 翻译 select 美化 — 与主题暗色风契合 */
.gt-minimal-host .goog-te-combo,
.gt-minimal-host select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent !important;
  color: var(--fx-gt-text) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 26px 4px 8px !important;
  font-size: 12px !important;
  font-family: var(--fx-mono) !important;
  letter-spacing: 0.02em;
  width: auto !important;
  min-width: 110px;
  outline: none !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%237eb6e8' d='M0 0h8L4 5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}
.gt-minimal-host .goog-te-combo:hover,
.gt-minimal-host select:hover {
  color: var(--fx-accent) !important;
}
.gt-minimal-host .goog-te-combo option,
.gt-minimal-host select option {
  background-color: var(--fx-gt-option-bg) !important;
  color: var(--fx-gt-text) !important;
}

/* ============================================================
 * 10. 排版:行高、等宽日期、字体细节
 * ============================================================ */

/* 正文:中文阅读舒适行高(主题默认 1.6 对中文偏紧) */
.markdown-body {
  font-family: var(--fx-sans);
  line-height: 1.85;
}
.markdown-body > p,
.markdown-body > ul,
.markdown-body > ol {
  margin-bottom: 1.15em;
}
.markdown-body li + li {
  margin-top: 0.3em;
}

/* 所有发布时间:等宽字体,与相关文章/分享标签统一的终端感 */
time[pubdate] {
  font-family: var(--fx-mono);
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

/* ============================================================
 * 11. 内容元素:KaTeX / 表格 / 引用块
 * ============================================================ */

/* 长公式移动端横向滚动,不再撑破版心 */
.markdown-body .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
  scrollbar-width: thin;
}

/* 表格:细描边 + 表头加粗下线 + 斑马纹;移动端自身横向滚动 */
.markdown-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.markdown-body table th,
.markdown-body table td {
  border: 1px solid var(--fx-line-strong);
  padding: 0.45rem 0.85rem;
}
.markdown-body table thead th {
  border-bottom-width: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.markdown-body table tbody tr:nth-child(2n) {
  background-color: var(--fx-zebra);
}

/* 引用块:强调色细边 + 极淡底色 */
.markdown-body blockquote {
  border-left: 3px solid var(--fx-accent-border);
  background: var(--fx-accent-bg);
  padding: 0.8rem 1.1rem;
  border-radius: 0 4px 4px 0;
}
.markdown-body blockquote > p:last-child {
  margin-bottom: 0;
}

/* 代码块:细描边 + 大圆角,压进玻璃面板的层次里 */
.markdown-body pre,
.markdown-body .highlight {
  border: 1px solid var(--fx-line);
  border-radius: 10px;
}

/* 行内代码:玻璃小片 */
.markdown-body :not(pre) > code {
  background: var(--fx-accent-bg);
  border: 1px solid var(--fx-line);
  border-radius: 5px;
  padding: 0.1em 0.38em;
}

/* 正文图片:圆角 + 描边 + 柔和投影,浮于玻璃之上 */
.markdown-body img {
  border-radius: 10px;
  border: 1px solid var(--fx-line-subtle);
  box-shadow: var(--fx-img-shadow);
}

/* ============================================================
 * 12. 选区配色
 * ============================================================ */

::selection {
  background: var(--fx-selection-bg);
  color: inherit;
}

/* ============================================================
 * 13. 阅读进度条(文章页,js/motion.js 注入)
 * ============================================================ */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1071; /* 压过 fixed navbar */
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--fx-grad-1),
    var(--fx-grad-2) 55%,
    var(--fx-grad-3)
  );
  box-shadow: 0 0 10px var(--fx-accent-glow);
  opacity: 0.95;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@media print {
  .read-progress {
    display: none;
  }
}

/* ============================================================
 * 14. 滚动淡入(js/motion.js 驱动)
 *     JS 才加 .fx-fade,禁用 JS 时内容始终可见
 * ============================================================ */

.fx-fade {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.fx-fade.fx-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
 * 15. 玻璃拟态核心:主面板 / 侧栏 / banner 融合 / 细节
 * ============================================================ */

/* 主面板:磨砂玻璃浮于极光之上 */
#board {
  background-color: var(--fx-glass-bg) !important;
  backdrop-filter: blur(var(--fx-glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--fx-glass-blur)) saturate(1.35);
  border: 1px solid var(--fx-glass-border);
  border-radius: 16px;
  box-shadow: var(--fx-glass-shadow);
}

/* 文章页 TOC / 分类侧栏:玻璃小卡片 */
#toc,
aside.sidebar.category-bar {
  background: var(--fx-glass-bg-soft);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--fx-glass-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
}
#toc-body .tocbot-active-link {
  color: var(--fx-accent) !important;
  font-weight: 600;
}

/* banner 底部渐隐,融入页面底色,消除硬切边 */
#banner .mask {
  background-image: linear-gradient(
    180deg,
    transparent 58%,
    var(--fx-banner-fade) 100%
  );
}
/* 亮色模式:整张图盖白罩纱提亮成"薄雾感",底部渐隐到页面底色 */
[data-user-color-scheme="light"] #banner .mask {
  background-image: linear-gradient(
    180deg,
    var(--fx-banner-veil) 0%,
    rgba(255, 255, 255, 0.05) 42%,
    var(--fx-banner-fade) 96%
  );
}
@media (prefers-color-scheme: light) {
  :root:not([data-user-color-scheme]) #banner .mask {
    background-image: linear-gradient(
      180deg,
      var(--fx-banner-veil) 0%,
      rgba(255, 255, 255, 0.05) 42%,
      var(--fx-banner-fade) 96%
    );
  }
}

/* 亮色刷新防闪:亮色头图未替换完成前隐藏 banner,JS 就绪后淡入 */
#banner {
  transition: opacity 0.45s ease;
}
[data-user-color-scheme="light"] #banner:not([data-fx-ready]) {
  opacity: 0;
}

/* 亮色:浅色头图上白色导航字加暗投影保证可读(仅顶部透明态) */
[data-user-color-scheme="light"] #navbar:not(.top-nav-collapse) .navbar-brand,
[data-user-color-scheme="light"] #navbar:not(.top-nav-collapse) .navbar-nav .nav-link {
  text-shadow: 0 1px 10px rgba(35, 50, 75, 0.45);
}

/* 亮色:罩纱减弱后,头图标题补一道深投影 */
[data-user-color-scheme="light"] #subtitle {
  text-shadow: 0 1px 14px rgba(25, 40, 65, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.35) !important;
}
@media (prefers-color-scheme: light) {
  :root:not([data-user-color-scheme]) #navbar:not(.top-nav-collapse) .navbar-brand,
  :root:not([data-user-color-scheme]) #navbar:not(.top-nav-collapse) .navbar-nav .nav-link {
    text-shadow: 0 1px 10px rgba(35, 50, 75, 0.45);
  }
  :root:not([data-user-color-scheme]) #subtitle {
    text-shadow: 0 1px 14px rgba(25, 40, 65, 0.55),
      0 1px 4px rgba(0, 0, 0, 0.35) !important;
  }
}

/* 页脚:渐变发丝线,两端消隐 */
.footer-inner {
  position: relative;
  padding-top: 2rem;
}
.footer-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, 80%);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--fx-accent-border),
    transparent
  );
}

/* 归档列表:透明化条目,hover 染上极淡强调色 */
.list-group-item {
  background: transparent !important;
  border-color: var(--fx-line) !important;
}
.list-group-item-action:hover {
  background: var(--fx-accent-bg) !important;
}

/* 标签云:hover 泛起辉光 */
.tagcloud a {
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.tagcloud a:hover {
  text-shadow: 0 0 18px var(--fx-accent-glow);
}

/* 键盘导航:清晰可见的焦点环 */
:focus-visible {
  outline: 2px solid var(--fx-accent-border);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 正文链接:下划线从左向右生长(排除锚点图标与图片链接) */
.markdown-body p a:not(.anchorjs-link):not(.fancybox),
.markdown-body li a:not(.anchorjs-link):not(.fancybox) {
  text-decoration: none !important;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--fx-accent), var(--fx-accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.2s ease;
}
.markdown-body p a:not(.anchorjs-link):not(.fancybox):hover,
.markdown-body li a:not(.anchorjs-link):not(.fancybox):hover {
  background-size: 100% 1px;
}