/* ==========================================================================
   Fuwari 响应式增强层
   覆盖断点：360 / 480 / 640 / 768 / 1024 / 1280 / 1440 / 1920+
   修复已知问题：
     - 768px 附近顶栏品牌名与导航重叠
     - 侧边栏在平板档过宽/过窄
     - 卡片内边距与字号在不同档位不协调
     - 悬浮按钮在小屏挤压
   ========================================================================== */

/* ==========================================================================
   ① 超小屏（<= 360px）：最紧凑
   ========================================================================== */
@media (max-width: 374px) {
  .fw-site .fw-navbar {
    height: 3.5rem;
    padding: 0 .5rem;
    gap: .375rem;
    border-radius: .75rem;
  }
  .fw-site .fw-brand { font-size: 1rem; }
  .fw-site .fw-brand svg { width: 1.125rem; height: 1.125rem; }
  .fw-site .fw-icon-btn { width: 2.125rem; height: 2.125rem; }
  .fw-site .fw-btn { height: 2.125rem; padding: 0 .625rem; font-size: .875rem; }
  .fw-site .fw-burger { padding: .25rem; }
  .fw-site .iso-search-input { font-size: 15px; }

  .fw-site .fw-card-body { padding: 1rem .75rem 1rem 1.25rem; }
  .fw-site .fw-card-title { font-size: 1.125rem; }
  .fw-site .fw-card-title::before { left: -.5rem; top: .35rem; height: .875rem; width: .1875rem; }
  .fw-site .fw-card-excerpt { font-size: .875rem; -webkit-line-clamp: 3; }
  .fw-site .fw-card-meta,
  .fw-site .fw-card-foot { font-size: .8125rem; }

  .fw-site .fw-widget { padding: .625rem; }
  .fw-site .fw-widget-title { font-size: .9375rem; }
  .fw-site .fw-cat-list a { font-size: .875rem; padding: .4375rem .5rem; }
  .fw-site .fw-tag { font-size: .75rem; padding: .25rem .5rem; }

  .fw-site .fw-pagination a,
  .fw-site .fw-pagination span { min-width: 2.25rem; height: 2.25rem; font-size: .875rem; }

  :root { --fw-float-gap: 60px; --fw-float-size: 44px; --fw-tabbar-h: 58px; }
}

/* ==========================================================================
   ② 手机（375 ~ 639px）
   ========================================================================== */
@media (min-width: 375px) and (max-width: 639px) {
  .fw-site .fw-card-body { padding: 1.125rem 1rem 1.125rem 1.5rem; }
  .fw-site .fw-card-title { font-size: 1.25rem; }
  .fw-site .fw-card-excerpt { -webkit-line-clamp: 3; }
}

/* ==========================================================================
   ③ 大手机 / 小平板（640 ~ 767px）
   ========================================================================== */
@media (min-width: 640px) and (max-width: 767px) {
  .fw-site .fw-card-title { font-size: 1.375rem; }
  .fw-site .fw-cat-list { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
  .fw-site .fw-tag-cloud { gap: .5rem; }
}

/* ==========================================================================
   ④ 平板（768 ~ 1023px）：关键修复区
   问题：此区间导航栏显示但空间不足，品牌名会被导航压住
   方案：品牌名收缩 + 导航字号减小 + 搜索框收窄
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .fw-site .fw-navbar {
    padding: 0 .875rem;
    gap: .5rem;
  }
  /* 品牌名允许收缩，且不与导航抢空间 */
  .fw-site .fw-brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 9rem;
    font-size: 1.0625rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 导航居中且可横向压缩 */
  .fw-site .fw-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
  }
  .fw-site .fw-nav ul,
  .fw-site .fw-nav .nav {
    flex-wrap: nowrap;
    gap: 0;
  }
  .fw-site .fw-nav a,
  .fw-site .fw-nav .nav > li > a {
    height: 2.5rem;
    padding: 0 .5rem;
    font-size: .875rem;
  }
  /* 右侧操作区收窄 */
  .fw-site .fw-nav-right { gap: .25rem; }
  .fw-site .fw-search-box {
    min-width: 0;
    width: 2.75rem;
    padding: 0;
    justify-content: center;
  }
  .fw-site .fw-search-box span { display: none; }   /* 只留图标 */
  .fw-site .fw-icon-btn { width: 2.5rem; height: 2.5rem; }
  .fw-site .fw-btn { height: 2.5rem; padding: 0 .75rem; font-size: .875rem; }
  .fw-site .fw-signin { font-size: .875rem; padding: 0 .375rem; }

  /* 侧边栏稍窄 */
  :root { --fw-sidebar-w: 15rem; }
}

/* ==========================================================================
   ⑤ 中屏（1024 ~ 1279px）：侧边栏常规宽度
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --fw-sidebar-w: 16rem; --fw-gap: .875rem; }
  .fw-site .fw-card-title { font-size: 1.625rem; }
  .fw-site .fw-nav a { padding: 0 .625rem; font-size: .9375rem; }
}

/* ==========================================================================
   ⑥ 大屏（1280 ~ 1599px）：标准布局
   ========================================================================== */
@media (min-width: 1280px) and (max-width: 1599px) {
  :root { --fw-sidebar-w: 17.5rem; --fw-gap: 1rem; }
}

/* ==========================================================================
   ⑦ 超大屏（>= 1600px）：内容居中，避免拉伸过长
   ========================================================================== */
@media (min-width: 1600px) {
  :root {
    --fw-page-width: 84rem;       /* 1344px */
    --fw-sidebar-w: 18.5rem;
    --fw-gap: 1.25rem;
  }
  .fw-site .fw-card-title { font-size: 1.75rem; }
  .fw-site .fw-card-excerpt { font-size: 1.0625rem; }
  .fw-site .fw-article-title { font-size: 2.25rem; }
  .fw-site .fw-content { font-size: 1.0625rem; line-height: 1.85; }
}

/* ==========================================================================
   ⑧ 横屏手机（高度小、宽度大）：压缩纵向空间
   ========================================================================== */
@media (max-height: 480px) and (orientation: landscape) {
  .fw-site .fw-navbar { height: 3.25rem; }
  .fw-site .fw-sidebar { position: static; }
  :root { --fw-float-gap: 40px; }
}

/* ==========================================================================
   ⑨ 触摸设备：加大可点区域
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  .fw-site .fw-nav a,
  .fw-site .fw-nav .nav > li > a { min-height: 2.75rem; }
  .fw-site .fw-icon-btn { min-width: 2.75rem; min-height: 2.75rem; }
  .fw-site .fw-cat-list a { min-height: 2.75rem; }
  .fw-site .fw-tag { min-height: 2.25rem; }
  .fw-site .fw-pagination a,
  .fw-site .fw-pagination span { min-width: 2.75rem; min-height: 2.75rem; }
  /* 触摸设备取消 hover 位移，避免误触 */
  .fw-site .fw-cat-list a:hover { transform: none; }
  .fw-site .fw-tag:hover { transform: none; }
}

/* ==========================================================================
   ⑩ 打印：去掉装饰，还原可读性
   ========================================================================== */
@media print {
  .fw-site .fw-navbar-wrap,
  .fw-site .fw-sidebar,
  .fw-site .fw-footer,
  .fw-site .iso-tabbar,
  .fw-site .iso-back-to-top,
  .fw-site .iso-contact-wrap,
  .fw-site .iso-article-toc,
  .fw-site .fw-pagination { display: none !important; }
  .fw-site .fw-layout { display: block; padding: 0; }
  .fw-site .fw-article,
  .fw-site .fw-card { box-shadow: none; border: 0; background: transparent; }
  .fw-site .fw-content pre { background: #f5f5f5 !important; color: #111 !important; border: 1px solid #ddd; }
  .fw-site .fw-content code { background: #f0f0f0 !important; color: #111 !important; }
}

/* ==========================================================================
   ⑪ 高对比度 / 强制色彩模式
   ========================================================================== */
@media (prefers-contrast: more) {
  .fw-site .fw-card,
  .fw-site .fw-widget { border: 2px solid currentColor; }
  .fw-site .fw-card-excerpt,
  .fw-site .fw-card-meta,
  .fw-site .fw-card-foot { color: var(--fw-deep-text); }
}

@media (forced-colors: active) {
  .fw-site .fw-card,
  .fw-site .fw-widget { border: 1px solid CanvasText; }
  .fw-site .fw-btn { border: 1px solid ButtonText; }
}

/* ==========================================================================
   ⑫ 容器查询兜底：卡片容器过窄时降级
   ========================================================================== */
@supports (container-type: inline-size) {
  .fw-site .fw-feed { container-type: inline-size; }

  @container (max-width: 420px) {
    .fw-card-title { font-size: 1.125rem; }
    .fw-card-body { padding: 1rem .75rem 1rem 1.25rem; }
    .fw-card-excerpt { -webkit-line-clamp: 3; }
  }

  @container (min-width: 900px) {
    .fw-card-title { font-size: 1.875rem; }
    .fw-card-body { padding: 1.75rem 2rem 1.5rem 2.25rem; }
  }
}

/* ==========================================================================
   ⑭ 文章目录（TOC）定位修复
   问题：ruby 时代的 TOC 用 right: calc((100vw - 1240px)/2) 悬浮在正文右侧，
         是按 1240px 内容宽算的；Fuwari 内容区 1200px，导致 TOC 压住正文。
   数学：需要 1200 + 236*2 + 2*20 = 1712px 才能"正文两侧都放 TOC"，
         但只需右侧一个 TOC：1200/2 + 236 + 20 = 856 → 视口 >= 1712px
   方案：
     - >= 1712px：TOC 贴正文右外侧，完整展开
     - <  1712px：TOC 收敛到视口右上角，且加毛玻璃让正文可见；宽度自适应
     - <  1024px：完全交给 ruby 的移动端折叠逻辑
   ========================================================================== */

/* ---------- 中等宽度（1024~1711）：整块布局让位给 TOC ----------
   1440px 物理上放不下「1200px 正文 + 208px TOC」
   方案：有 TOC 的文章页，主内容网格整体收窄，TOC 占据腾出的通道
   ---------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1711px) {
  /* ① 文章页：主内容网格收窄，右侧腾出 TOC 通道 */
  body.post-template .fw-site .fw-layout {
    max-width: calc(75rem - 15rem) !important;   /* 1200 - 240 = 960px */
    margin-left: auto;
    margin-right: 15rem;                          /* 右侧留 240px 给 TOC */
    padding-right: 1rem;
  }
  /* ② 文章卡片不需要额外内边距了（已由网格让位） */
  .fw-site .fw-article {
    padding-right: 1.25rem !important;
  }
  /* ③ TOC 稳稳落在腾出的通道里 */
  .fw-site .iso-article-toc {
    right: 1rem !important;
    top: 88px !important;
    width: 208px !important;
  }
  .fw-site .iso-article-toc-panel { width: 208px !important; }
  .fw-site .iso-article-toc-link {
    font-size: 12.5px !important;
    padding: 7px 9px 7px 17px !important;
  }
  .fw-site .iso-article-toc-heading {
    font-size: 12.5px !important;
    padding: 13px 15px 10px !important;
  }
  .fw-site .iso-article-toc-list {
    max-height: min(54vh, 420px) !important;
    padding: 5px 8px 11px !important;
  }
}

/* 1024~1279px：空间更紧 */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.post-template .fw-site .fw-layout {
    max-width: calc(75rem - 13rem) !important;
    margin-right: 13rem;
  }
  .fw-site .iso-article-toc {
    width: 184px !important;
    right: .75rem !important;
  }
  .fw-site .iso-article-toc-panel { width: 184px !important; }
  .fw-site .iso-article-toc-link { font-size: 12px !important; }
}

/* ---------- 超宽屏：TOC 完全在正文之外，无需让位 ---------- */


/* 非文章页不受影响：恢复居中 */
@media (min-width: 1024px) and (max-width: 1711px) {
  body:not(.post-template) .fw-site .fw-layout {
    max-width: 75rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 窄屏：不干预，用 ruby 的折叠逻辑 ---------- */
@media (max-width: 1023px) {
  .fw-site .iso-article-toc {
    width: auto !important;
  }
}

/* ==========================================================================
   ⑯ 顶栏导航链接颜色兜底
   问题：`.fw-nav .nav-current > a` 未命中，当前页链接回退到浏览器默认链接色（蓝），
         与站点主色（红 #e82127）不一致。
   方案：给顶栏所有链接显式上色，覆盖浏览器默认 UA 样式。
   ========================================================================== */
.fw-site .fw-nav a,
.fw-site .fw-nav .nav a,
.fw-site .fw-nav ul li a {
  color: var(--fw-text);
  text-decoration: none;
}
.fw-site .fw-nav a:visited { color: var(--fw-text); }

.fw-site .fw-nav a:hover,
.fw-site .fw-nav ul li a:hover {
  color: var(--fw-primary);
}

/* 当前页高亮：覆盖所有层级写法 */
.fw-site .fw-nav .nav-current > a,
.fw-site .fw-nav .nav-current a,
.fw-site .fw-nav li.nav-current > a,
.fw-site .fw-nav a.active {
  color: var(--fw-primary);
  font-weight: 700;
}
.fw-site .fw-nav .nav-current > a:visited,
.fw-site .fw-nav li.nav-current > a:visited {
  color: var(--fw-primary);
}
/* 当前页加一个主色下划线，视觉更明确 */
.fw-site .fw-nav .nav-current > a {
  position: relative;
}
.fw-site .fw-nav .nav-current > a::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .35rem;
  height: .125rem;
  background: var(--fw-primary);
  border-radius: 999px;
  opacity: .85;
}

/* 移动端抽屉里的导航同样上色 */
@media (max-width: 767px) {
  body.fw-nav-open .fw-site .fw-nav a,
  body.fw-nav-open .fw-site .fw-nav a:visited { color: var(--fw-text); }
  body.fw-nav-open .fw-site .fw-nav .nav-current > a { color: var(--fw-primary); }
}

/* ==========================================================================
   ⑰ 深色模式页面底色修复
   问题：ruby 时代的 `html body:not(.is-shop-page)` 规则给页面刷了浅色渐变底，
         它通过内联 <style> 加载（晚于 screen.css），把深色模式的 --fw-page-bg 顶掉。
         实测深色模式下页面背景 RGB(244,246,252) 纯白，与深色卡片强烈割裂。
   方案：用同权重+更晚加载的规则 + !important 强制切回深色底。
   ========================================================================== */
html[data-fw-theme="dark"] body,
html[data-fw-theme="dark"] body:not(.is-shop-page) {
  background: var(--fw-page-bg) !important;
  color: var(--fw-text);
}

/* 深色模式下页脚/内容区也不应残留浅底 */
html[data-fw-theme="dark"] .fw-site .fw-footer {
  background: transparent;
  color: var(--fw-text-2);
}

/* 顶栏在深色下用卡片色，避免与页面底色糊在一起 */
html[data-fw-theme="dark"] .fw-navbar {
  background: var(--fw-card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

/* 浅色模式同样显式声明，避免 ruby 渐变底干扰 */
html:not([data-fw-theme="dark"]) body,
html:not([data-fw-theme="dark"]) body:not(.is-shop-page) {
  background: var(--fw-page-bg) !important;
}

/* ==========================================================================
   ⑱ 可访问性修复：标题语义与视觉层级
   ========================================================================== */

/* ---------- ① 正文里的 h1 降级显示 ----------
   问题：文章正文中若重复出现 h1（作者误用），会与文章标题形成两个 h1，
         语义重复、屏幕阅读器困惑。
   方案：正文内的 h1 视觉上按 h2 呈现（字号/边距），减少重复感。
         （语义层无法用 CSS 改，但视觉一致性可保证） */
.fw-content h1 {
  margin-top: 1.75em;
  margin-bottom: .6em;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--fw-deep-text);
  scroll-margin-top: 6rem;
}

/* ---------- ② 正文首个 h1 与文章标题重复时隐藏 ---------- */
.fw-content > h1:first-child {
  display: none;
}

/* ---------- ③ 卡片元信息行：图标与文字同行 ----------
   问题：`.fw-meta-group` 用 inline-flex，但其内部的 <a> 被 Ghost 渲染后
        导致 flex 布局失效，图标与分类名分两行（实测 390px 移动端）。
   方案：改用纯 inline 布局 + vertical-align，完全不依赖 flex，
        这是最稳的方案（不受子元素类型影响）。 */
.fw-site .fw-card-meta,
.fw-site .fw-card-foot {
  display: block;
  line-height: 1.9;
}
.fw-site .fw-card-meta > span,
.fw-site .fw-card-meta > .fw-meta-group,
.fw-site .fw-card-foot > span,
.fw-site .fw-card-foot > .fw-meta-group {
  display: inline;
  white-space: nowrap;
  margin-right: .75rem;
}
.fw-site .fw-card-meta svg,
.fw-site .fw-card-foot svg {
  display: inline-block !important;
  width: .875rem !important;
  height: .875rem !important;
  vertical-align: -.125rem;
  margin-right: .25rem;
  flex: none !important;
}
.fw-site .fw-card-meta a,
.fw-site .fw-card-foot a,
.fw-site .fw-card-meta time,
.fw-site .fw-card-foot span {
  display: inline !important;
  white-space: nowrap;
  vertical-align: baseline;
}

@media (max-width: 480px) {
  .fw-site .fw-card-meta,
  .fw-site .fw-card-foot { font-size: .8125rem; }
  .fw-site .fw-card-meta > span,
  .fw-site .fw-card-meta > .fw-meta-group,
  .fw-site .fw-card-foot > span,
  .fw-site .fw-card-foot > .fw-meta-group { margin-right: .5rem; }
  .fw-site .fw-card-meta svg,
  .fw-site .fw-card-foot svg {
    width: .75rem !important;
    height: .75rem !important;
  }
}

/* ---------- ④ 焦点可见性（键盘导航） ---------- */
.fw-site a:focus-visible,
.fw-site button:focus-visible,
.fw-site input:focus-visible,
.fw-site [tabindex]:focus-visible {
  outline: 3px solid var(--fw-primary);
  outline-offset: 2px;
  border-radius: .25rem;
}
.fw-site .fw-card-link:focus-visible {
  outline: 3px solid var(--fw-primary);
  outline-offset: -3px;
}

/* ---------- ⑤ 跳转到主内容（屏幕阅读器/键盘用户） ---------- */
.fw-skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 999;
  padding: .75rem 1.25rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
  background: var(--fw-primary);
  border-radius: .5rem;
  text-decoration: none;
  transition: top .15s;
}
.fw-skip-link:focus { top: 1rem; }

/* ---------- ⑥ 减少动效偏好（补全 ruby 未覆盖的部分） ---------- */
@media (prefers-reduced-motion: reduce) {
  .fw-site .fw-card,
  .fw-site .fw-card-media img,
  .fw-site .fw-card-chevron,
  .fw-site .fw-cat-list a,
  .fw-site .fw-tag,
  .fw-site .fw-postnav-item,
  .fw-site .iso-back-to-top,
  .fw-site .iso-contact-toggle { transition: none !important; transform: none !important; }
  .fw-site .fw-card-link:hover .fw-card-chevron { opacity: 1; transform: none; }
}

/* ---------- ⑦ 链接下划线可见性（色盲友好） ---------- */
.fw-content a:not(.fw-tag):not(.kg-bookmark-container) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* 商城深色适配已移至 custom-shop.hbs 的 shop-dark-theme 块。
   原因：shop-extracted.css 在 body 内加载、晚于本文件，
   同优先级下后者胜出，故必须紧随 shop-extracted.css 定义。 */

/* ==========================================================================
   ㉑ 深色模式正文可读性修复（严重）
   问题：stripe-light-theme.css 里有 8 处 `color: #1e293b !important`（浅色主题的深色字），
         深色模式下正文成为 深蓝灰 #1e293b 压在 深黑底 #241a19 上，
         实测对比度仅 1.16:1（WCAG AA 要求 >= 4.5），几乎不可读。
   方案：高特异性 + !important 覆盖正文所有文字层级。
   ========================================================================== */
html[data-fw-theme="dark"] .fw-site .fw-content,
html[data-fw-theme="dark"] .fw-site .fw-content p,
html[data-fw-theme="dark"] .fw-site .fw-content li,
html[data-fw-theme="dark"] .fw-site .fw-content td,
html[data-fw-theme="dark"] .fw-site .fw-content dd,
html[data-fw-theme="dark"] .fw-site .fw-content dt,
html[data-fw-theme="dark"] .fw-site .fw-content blockquote,
html[data-fw-theme="dark"] .fw-site .gh-content,
html[data-fw-theme="dark"] .fw-site .gh-content p,
html[data-fw-theme="dark"] .fw-site .gh-content li,
html[data-fw-theme="dark"] .fw-site .gh-content td,
html[data-fw-theme="dark"] .fw-site .gh-content blockquote {
  color: var(--fw-text) !important;
}

/* 标题与加粗 */
html[data-fw-theme="dark"] .fw-site .fw-content h1,
html[data-fw-theme="dark"] .fw-site .fw-content h2,
html[data-fw-theme="dark"] .fw-site .fw-content h3,
html[data-fw-theme="dark"] .fw-site .fw-content h4,
html[data-fw-theme="dark"] .fw-site .fw-content h5,
html[data-fw-theme="dark"] .fw-site .fw-content h6,
html[data-fw-theme="dark"] .fw-site .fw-content strong,
html[data-fw-theme="dark"] .fw-site .fw-content b,
html[data-fw-theme="dark"] .fw-site .fw-content th,
html[data-fw-theme="dark"] .fw-site .gh-content h1,
html[data-fw-theme="dark"] .fw-site .gh-content h2,
html[data-fw-theme="dark"] .fw-site .gh-content h3,
html[data-fw-theme="dark"] .fw-site .gh-content strong,
html[data-fw-theme="dark"] .fw-site .gh-content th {
  color: var(--fw-deep-text) !important;
}

/* 行内链接与行内代码 */
html[data-fw-theme="dark"] .fw-site .fw-content a,
html[data-fw-theme="dark"] .fw-site .gh-content a {
  color: var(--fw-primary) !important;
}
html[data-fw-theme="dark"] .fw-site .fw-content code,
html[data-fw-theme="dark"] .fw-site .gh-content code {
  color: var(--fw-primary) !important;
  background: color-mix(in srgb, var(--fw-primary) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--fw-primary) 28%, transparent) !important;
}
/* 代码块内的 code 保持代码块自身配色 */
html[data-fw-theme="dark"] .fw-site .fw-content pre code,
html[data-fw-theme="dark"] .fw-site .gh-content pre code {
  color: inherit !important;
  background: none !important;
  border: 0 !important;
}

/* 引用块 */
html[data-fw-theme="dark"] .fw-site .fw-content blockquote {
  color: var(--fw-text-2) !important;
  border-left-color: var(--fw-primary) !important;
  background: color-mix(in srgb, var(--fw-card) 55%, transparent);
}

/* 表格边框与表头 */
html[data-fw-theme="dark"] .fw-site .fw-content table,
html[data-fw-theme="dark"] .fw-site .gh-content table {
  border-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .fw-content th,
html[data-fw-theme="dark"] .fw-site .gh-content th {
  background: var(--fw-btn-bg) !important;
  border-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .fw-content td,
html[data-fw-theme="dark"] .fw-site .gh-content td {
  border-color: var(--fw-line) !important;
}

/* 分割线 */
html[data-fw-theme="dark"] .fw-site .fw-content hr,
html[data-fw-theme="dark"] .fw-site .gh-content hr {
  border-top-color: var(--fw-line) !important;
  background: var(--fw-line) !important;
}

/* 图片：深色下加淡边框区分边界 */
html[data-fw-theme="dark"] .fw-site .fw-content img,
html[data-fw-theme="dark"] .fw-site .gh-content img {
  border: 1px solid var(--fw-line);
  background: var(--fw-card);
}

/* ==========================================================================
   ㉒ 页脚文字对比度修复
   问题：--fw-text-2 (#6b7280) 压在粉调页脚底 (--fw-page-bg 派生色) 上，
         实测对比度 4.16:1，略低于 WCAG AA 的 4.5。
   方案：页脚专用文字色，实测 5.83:1。
   ========================================================================== */
.fw-site .fw-footer {
  color: #525c6b;
}
html[data-fw-theme="dark"] .fw-site .fw-footer {
  color: var(--fw-text-2);
}
.fw-site .fw-footer a {
  color: var(--fw-primary);
}

/* ==========================================================================
   ㉔ 小屏：悬浮按钮不遮挡卡片内容
   问题：客服与 Portal 头像悬浮在右下角，压住卡片正文（实测 768px 明显）。
   方案：
     1. 大幅度压缩悬浮按钮并紧贴右下角
     2. 卡片正文底部留出足够安全区
     3. 正文里的宽内容（表格/代码）右侧也留白
   ========================================================================== */
@media (max-width: 1023px) {
  /* 悬浮按钮缩小到 40px，贴近边缘 */
  :root {
    --fw-float-size: 40px;
    --fw-float-gap: 14px;
    --fw-float-stack: 14px;
    --fw-tabbar-h: 0px;
  }
  /* 卡片底部安全区：容纳 Portal 头像 + 客服按钮 */
  .fw-site .fw-card-body {
    padding-bottom: 1.75rem;
  }
  /* 卡片底部那一行文字（时长/标签）右侧也避开按钮 */
  .fw-site .fw-card-foot {
    padding-right: 3rem;
  }
  /* 正文表格允许横向滚动，不撑到按钮下面 */
  .fw-site .fw-content table {
    max-width: calc(100% - 3.25rem);
  }
}

@media (max-width: 767px) {
  :root {
    --fw-float-size: 40px;
    --fw-float-gap: 12px;
    --fw-float-stack: 12px;
    --fw-tabbar-h: 58px;
  }
  .fw-site .fw-card-body { padding-bottom: 1.5rem; }
  .fw-site .fw-footer { padding-bottom: 100px; }
}

/* 卡片间距：小屏适当加大，提升呼吸感 */
@media (max-width: 767px) {
  .fw-site .fw-feed { gap: 1.125rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fw-site .fw-feed { gap: 1.25rem; }
}

/* ==========================================================================
   ㉕ 深色模式：文章摘要块配色修复（严重）
   问题：ruby 的 .gh-article-excerpt 在深色模式下背景仍是浅灰 #f8fafc，
         而文字色是给深色主题设计的浅色，导致浅字压浅底：
         实测对比度 2.24 / 1.11 / 2.25，全部 FAIL，几乎不可读。
   方案：深色模式下给摘要块深色底 + 合适的浅色字。
   ========================================================================== */
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt,
html[data-fw-theme="dark"] .fw-site .fw-article .gh-article-excerpt {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 90%, transparent) !important;
  background-image: none !important;
  border-left-color: var(--fw-primary) !important;
  border-radius: 0 var(--fw-radius-sm) var(--fw-radius-sm) 0;
  padding: .75rem 1rem .75rem 1.125rem !important;
}
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt strong,
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt b {
  color: var(--fw-deep-text) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt em,
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt i {
  color: var(--fw-text-2) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt a {
  color: var(--fw-primary) !important;
}
/* 文章头部的摘要（模板里用 .fw-card-excerpt，但这里是文章级的引言块，
   不是卡片摘要 —— 深色下需要独立配色） */
html[data-fw-theme="dark"] .fw-site .fw-article-header .fw-card-excerpt,
html[data-fw-theme="dark"] .fw-site .fw-article-header p.fw-card-excerpt {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 88%, transparent) !important;
  background-image: none !important;
  border-left: 3px solid var(--fw-primary);
  border-radius: 0 var(--fw-radius-sm) var(--fw-radius-sm) 0;
  padding: .75rem 1rem .75rem 1.125rem !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
}
html[data-fw-theme="dark"] .fw-site .fw-article-header .fw-card-excerpt strong,
html[data-fw-theme="dark"] .fw-site .fw-article-header .fw-card-excerpt b {
  color: var(--fw-deep-text) !important;
}

/* 其他摘要变体 */
html[data-fw-theme="dark"] .fw-site .gh-article-excerpt,
html[data-fw-theme="dark"] .fw-site .iso-article-excerpt,
html[data-fw-theme="dark"] .fw-site .article-excerpt {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 88%, transparent) !important;
  background-image: none !important;
}

/* ==========================================================================
   ㉖ 防止横向溢出（全站兜底）
   ========================================================================== */
.fw-site,
.fw-site .fw-layout,
.fw-site .fw-main,
.fw-site .fw-card,
.fw-site .fw-article {
  max-width: 100%;
  min-width: 0;
}
.fw-site .fw-content pre { max-width: 100%; }
.fw-site .fw-content img,
.fw-site .fw-content iframe,
.fw-site .fw-content video { max-width: 100%; }
.fw-site .fw-content table { display: block; overflow-x: auto; }

/* ==========================================================================
   ㉖ 深色模式：正文引用块配色修复（严重）
   问题：post.hbs 里有一组「浅色阅读面」规则，把 blockquote 刷成白底 #f8fafc
         + 深色字 #334155。深色模式下这组规则仍在生效，导致浅底浅字，
         实测对比度 ~2.2，几乎不可读。
   方案：深色模式下强制覆盖为深色底 + 浅色字。
   ========================================================================== */
html[data-fw-theme="dark"] .fw-site .gh-content blockquote,
html[data-fw-theme="dark"] .fw-site .gh-content blockquote p,
html[data-fw-theme="dark"] body.post-template .gh-content blockquote,
html[data-fw-theme="dark"] body.post-template .gh-content blockquote p {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 88%, transparent) !important;
  background-image: none !important;
  border-color: var(--fw-line) !important;
  border-left: 4px solid var(--fw-primary) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-content blockquote strong,
html[data-fw-theme="dark"] .fw-site .gh-content blockquote b,
html[data-fw-theme="dark"] body.post-template .gh-content blockquote strong {
  color: var(--fw-deep-text) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-content blockquote a,
html[data-fw-theme="dark"] body.post-template .gh-content blockquote a {
  color: var(--fw-primary) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-content blockquote em,
html[data-fw-theme="dark"] .fw-site .gh-content blockquote i {
  color: var(--fw-text-2) !important;
}
/* 引用块内的代码/行内元素 */
html[data-fw-theme="dark"] .fw-site .gh-content blockquote code {
  color: var(--fw-primary) !important;
  background: color-mix(in srgb, var(--fw-primary) 16%, transparent) !important;
}

/* ==========================================================================
   ㉗ 深色模式：页面背景延伸至全高
   问题：截图发现页脚下方有大片纯白空白（y=2025-4000 约 2000px）。
         原因：body 背景只覆盖内容高度，视口之外（滚动到超长截图时）露白。
   方案：html 与 body 都设背景，且用 min-height 保证覆盖。
   ========================================================================== */
html {
  background: var(--fw-page-bg);
  min-height: 100%;
}
html[data-fw-theme="dark"] {
  background: var(--fw-page-bg);
}
html[data-fw-theme="dark"] body {
  background: var(--fw-page-bg) !important;
  min-height: 100vh;
}
/* 页面最外层容器也补背景，避免任何缝隙露白 */
html[data-fw-theme="dark"] .fw-site {
  background: var(--fw-page-bg);
  min-height: 100vh;
}
/* 浅色模式同样处理 */
html:not([data-fw-theme="dark"]) body {
  background: var(--fw-page-bg) !important;
}
html:not([data-fw-theme="dark"]) .fw-site {
  background: var(--fw-page-bg);
}

/* ==========================================================================
   ㉘ 深色模式：AI 摘要卡配色修复
   问题：post.hbs 里 html body.post-template .iso-ai-citation-summary
         把卡片刷成白底 #ffffff + 深色字 #334155，且带 !important。
         该选择器特异性高（3 个元素 + 1 个类），普通覆盖无效。
   方案：用同等特异性的选择器 + !important。
   ========================================================================== */
html[data-fw-theme="dark"] body.post-template .iso-ai-citation-summary,
html[data-fw-theme="dark"] body .iso-ai-citation-summary,
html[data-fw-theme="dark"] .fw-site .iso-ai-citation-summary {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 92%, transparent) !important;
  background-image: none !important;
  border: 1px solid var(--fw-line) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .35) !important;
}

/* 卡片内文字层级 */
html[data-fw-theme="dark"] body.post-template .iso-ai-citation-summary p,
html[data-fw-theme="dark"] .fw-site .iso-ai-citation-summary p,
html[data-fw-theme="dark"] .fw-site .iso-ai-summary-body,
html[data-fw-theme="dark"] .fw-site .iso-ai-summary-body p {
  color: var(--fw-text) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-ai-summary-body strong,
html[data-fw-theme="dark"] .fw-site .iso-ai-citation-summary strong {
  color: var(--fw-deep-text) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-ai-summary-body a,
html[data-fw-theme="dark"] .fw-site .iso-ai-citation-summary a {
  color: var(--fw-primary) !important;
}

/* 徽标与许可证说明 */
html[data-fw-theme="dark"] .fw-site .iso-ai-summary-badge {
  color: var(--fw-primary) !important;
  background: color-mix(in srgb, var(--fw-primary) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--fw-primary) 30%, transparent) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-ai-summary-license {
  color: var(--fw-text-2) !important;
}

/* ==========================================================================
   ㉙ 深色模式：评论区登录引导卡
   ========================================================================== */
html[data-fw-theme="dark"] body.post-template .iso-comments-login,
html[data-fw-theme="dark"] .fw-site .iso-comments-login {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 92%, transparent) !important;
  background-image: none !important;
  border-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-comments-login h3 {
  color: var(--fw-deep-text) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-comments-login p {
  color: var(--fw-text-2) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-comments-kicker {
  color: var(--fw-primary) !important;
}

/* ==========================================================================
   ㉚ 深色模式：文章「本文资源」折叠卡
   问题：.iso-resource-folders 硬编码 background:#fff，深色下是白底。
   ========================================================================== */
html[data-fw-theme="dark"] .fw-site .iso-resource-folders {
  background: color-mix(in srgb, var(--fw-card) 92%, transparent) !important;
  border-color: var(--fw-line) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-resource-folder-toggle {
  color: var(--fw-text) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-resource-folder-list {
  background: color-mix(in srgb, var(--fw-soft) 70%, transparent) !important;
  border-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-resource-folder-list a {
  color: var(--fw-text) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-resource-folder-list a:hover {
  color: var(--fw-primary) !important;
}

/* 步骤播放器（同为文章内定制组件） */
html[data-fw-theme="dark"] .fw-site .iso-step-player {
  background: color-mix(in srgb, var(--fw-card) 92%, transparent) !important;
  border-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-step-player-head,
html[data-fw-theme="dark"] .fw-site .iso-step-tab {
  color: var(--fw-text) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-step-tab.is-active {
  color: #fff !important;
  background: var(--fw-primary) !important;
}

/* 阅读进度条与状态 */
html[data-fw-theme="dark"] .fw-site #iso-reading-progress,
html[data-fw-theme="dark"] .fw-site .iso-reading-status {
  background: color-mix(in srgb, var(--fw-card) 88%, transparent) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-reading-status span {
  color: var(--fw-text-2) !important;
}

/* ==========================================================================
   ㉛ 桌面端 TOC 面板定位修复
   问题：post.hbs 里 .iso-article-toc-panel 有一条为「移动端折叠态」写的规则：
           position: absolute; right: 0; width: min(300px, calc(100vw - 28px));
         这条规则在桌面端也生效，导致面板宽 300px 却挂在仅 208px 的容器里，
         实测面板几乎完全移出视口右侧（1440px 下仅 17px 可见）。
   方案：桌面端把 panel 恢复为静态布局，宽度跟随容器。
   ========================================================================== */
@media (min-width: 1024px) {
  .fw-site .iso-article-toc {
    position: fixed;          /* 容器保持 fixed */
  }
  .fw-site .iso-article-toc .iso-article-toc-panel {
    position: static !important;     /* 面板回到文档流 */
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* 折叠态下按钮与面板的显隐交由原逻辑处理 */
  .fw-site .iso-article-toc.is-bottom-collapsed .iso-article-toc-panel {
    position: static !important;
    width: auto !important;
  }
  .fw-site .iso-article-toc.is-bottom-collapsed:not(.is-bottom-open) .iso-article-toc-panel {
    display: none !important;
  }
  .fw-site .iso-article-toc.is-bottom-collapsed.is-bottom-open .iso-article-toc-panel {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: 480px;
  }
}

/* ==========================================================================
   ㉜ 文章级摘要：取消行数限制（浅色/深色一致）
   问题：文章头部的摘要复用了 .fw-card-excerpt 的样式，
         该样式有 -webkit-line-clamp: 2（卡片摘要用），
         导致文章级摘要被截断成 2-3 行 + 省略号；
         而深色模式下我的覆盖规则取消了限制，造成两种模式表现不一致。
   方案：文章级摘要统一不限行，且两种模式样式一致。
   ========================================================================== */
.fw-site .fw-article-header .fw-card-excerpt,
.fw-site .fw-article-header p.fw-card-excerpt {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  overflow: visible !important;
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-card) 88%, transparent);
  border-left: 3px solid var(--fw-primary);
  border-radius: 0 var(--fw-radius-sm) var(--fw-radius-sm) 0;
  padding: .75rem 1rem .75rem 1.125rem;
  font-size: 1rem !important;
  line-height: 1.7;
}

/* 移动端：摘要字号与内边距适配 */
@media (max-width: 767px) {
  .fw-site .fw-article-header .fw-card-excerpt,
  .fw-site .fw-article-header p.fw-card-excerpt {
    font-size: .9375rem !important;
    padding: .625rem .875rem .625rem 1rem;
    margin-bottom: 1rem;
  }
}

/* ==========================================================================
   ㉝ 移动端：文章内卡片避开悬浮按钮
   问题：客服/Portal 悬浮按钮压在文章内的 AI 摘要卡、「本文资源」卡上。
   方案：小屏下这些卡片右侧留安全区；同时把悬浮按钮再往边缘推。
   ========================================================================== */
@media (max-width: 1023px) {
  /* 文章内所有卡片右侧留出按钮宽度 */
  .fw-site .iso-ai-citation-summary,
  .fw-site .iso-resource-folders,
  .fw-site .iso-step-player,
  .fw-site .iso-comments-login {
    margin-right: 3.25rem !important;
  }
  /* 卡片内文字也不要顶到边缘 */
  .fw-site .iso-ai-summary-header,
  .fw-site .iso-ai-summary-body {
    padding-right: .25rem;
  }
}

@media (max-width: 767px) {
  .fw-site .iso-ai-citation-summary,
  .fw-site .iso-resource-folders,
  .fw-site .iso-step-player,
  .fw-site .iso-comments-login {
    margin-right: 2.75rem !important;
  }
  /* 摘要卡的徽标在小屏换行显示，避免挤压 */
  .fw-site .iso-ai-summary-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
  }
  .fw-site .iso-ai-summary-license {
    font-size: .75rem;
  }
}

/* ==========================================================================
   ㉞ 卡片 hover 反馈补齐
   问题：.fw-card 只有标题变色，卡片本体无任何视觉反馈，
         鼠标悬停时"感觉不到可点"。而 .fw-cat-list a / .fw-tag 都有 hover 效果，不一致。
   方案：加低干扰的边框 + 阴影反馈（不做位移，避免抖动）。
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .fw-site .fw-card {
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    border: 1px solid transparent;
  }
  .fw-site .fw-card:hover {
    border-color: color-mix(in srgb, var(--fw-primary) 22%, transparent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
  }
  html[data-fw-theme="dark"] .fw-site .fw-card:hover {
    border-color: color-mix(in srgb, var(--fw-primary) 32%, transparent);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  }
  /* 文章页上下篇导航同样补齐 */
  .fw-site .fw-postnav-item:hover {
    border-color: color-mix(in srgb, var(--fw-primary) 22%, transparent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
  }
}

/* 减少动效时取消过渡（保留即时反馈） */
@media (prefers-reduced-motion: reduce) {
  .fw-site .fw-card {
    transition: none !important;
  }
}

/* ==========================================================================
   ㉟ 代码块横向溢出修复（严重）
   问题：文章页的 <pre> 没有 overflow-x 设置，
         实测含长命令行的文章会撑宽文档（scrollWidth 1786 vs clientWidth 1425），
         导致整页出现横向滚动条，且代码被裁切不可读。
   方案：给 pre 加横向滚动，并限制宽度不超出容器。
   ========================================================================== */
.fw-site .fw-content pre,
.fw-site .gh-content pre {
  overflow-x: auto !important;
  overflow-y: hidden;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}
/* 代码块内的 code 不要换行（保持命令原样），由 pre 滚动 */
.fw-site .fw-content pre code,
.fw-site .gh-content pre code {
  white-space: pre !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* 折叠态时保持 hidden（覆盖上面的 auto） */
.fw-site .fw-content pre.is-collapsed,
.fw-site .gh-content pre.is-collapsed {
  overflow: hidden !important;
}
/* 行内代码：允许换行 + 限制宽度，避免畸形 HTML 撑破布局
   （实测某篇文章的反引号嵌套被错误解析，产生跨 252 字符的未闭合 <code>） */
.fw-site .fw-content :not(pre) > code,
.fw-site .gh-content :not(pre) > code {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  max-width: 100% !important;
  display: inline;
}
/* 兜底：任何意外超宽的 code 也不撑破页面 */
.fw-site .fw-content code,
.fw-site .gh-content code {
  max-width: 100%;
  box-sizing: border-box;
}
/* 段落层兜底：防止未闭合标签把整段撑宽 */
.fw-site .fw-content p,
.fw-site .fw-content li,
.fw-site .fw-content td,
.fw-site .gh-content p,
.fw-site .gh-content li,
.fw-site .gh-content td {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* 给滚动条一个协调的样式 */
.fw-site .fw-content pre::-webkit-scrollbar {
  height: 8px;
}
.fw-site .fw-content pre::-webkit-scrollbar-track {
  background: rgba(128, 128, 128, .12);
  border-radius: 4px;
}
.fw-site .fw-content pre::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, .35);
  border-radius: 4px;
}
.fw-site .fw-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, .55);
}

/* ==========================================================================
   ㊱ 深色模式：TOC 目录面板白底修复（严重）
   问题：post.hbs 里有一条针对浅色主题写的规则
           .iso-article-toc-panel { background: #ffffff !important; }
         而我的深色覆盖只作用于容器 .iso-article-toc，没覆盖面板本身，
         导致深色模式下右侧目录面板是纯白底（实测 y=150-550 全白）。
   方案：深色模式下覆盖面板背景（同等特异性 + !important）。
   ========================================================================== */
html[data-fw-theme="dark"] .fw-site .iso-article-toc-panel,
html[data-fw-theme="dark"] .fw-site .iso-article-toc .iso-article-toc-panel,
html[data-fw-theme="dark"] body.post-template .iso-article-toc-panel {
  background: var(--fw-float-panel) !important;
  background-image: none !important;
  border-color: var(--fw-line) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .45) !important;
  color: var(--fw-text) !important;
}
/* 面板内的标题、条目、计数 */
html[data-fw-theme="dark"] .fw-site .iso-article-toc-heading,
html[data-fw-theme="dark"] body.post-template .iso-article-toc-heading {
  color: var(--fw-deep-text) !important;
  border-bottom-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-article-toc-list {
  border-color: var(--fw-line) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-article-toc-link {
  color: var(--fw-text-2) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-article-toc-link:hover {
  color: var(--fw-text) !important;
  background: color-mix(in srgb, var(--fw-primary) 14%, transparent) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-article-toc-link.is-active {
  color: var(--fw-primary) !important;
  background: color-mix(in srgb, var(--fw-primary) 18%, transparent) !important;
}
html[data-fw-theme="dark"] .fw-site .iso-article-toc-count {
  color: var(--fw-primary) !important;
  background: color-mix(in srgb, var(--fw-primary) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--fw-primary) 30%, transparent) !important;
}
/* 折叠态的目录按钮（移动端/窄屏） */
html[data-fw-theme="dark"] .fw-site .iso-article-toc-toggle,
html[data-fw-theme="dark"] .fw-site .iso-article-toc-toggle-btn {
  background: var(--fw-float-panel) !important;
  color: var(--fw-text) !important;
  border-color: var(--fw-line) !important;
}

/* ==========================================================================
   ㊲ 深色模式：付费内容门禁（Ghost 会员升级引导）白底修复（严重）
   问题：Ghost 通过 {{ghost_head}} 注入的 gh-members-styles 里，
         .gh-post-upgrade-cta 只设了 color:#ffffff（假设背景是深色/品牌色），
         但主题在这个容器上没有背景，深色模式下露出浅色页面底，
         导致「白底 + 白字」→ 内容完全不可读（实测 100119 等付费文章）。
   方案：给门禁容器补上深色背景，让白字可读。
   ========================================================================== */
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta,
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta-content,
html[data-fw-theme="dark"] body .gh-post-upgrade-cta,
html[data-fw-theme="dark"] body .gh-post-upgrade-cta-content {
  background: color-mix(in srgb, var(--fw-card) 92%, transparent) !important;
  background-image: none !important;
  border: 1px solid var(--fw-line) !important;
  border-radius: var(--fw-radius-sm) !important;
  color: var(--fw-text) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta h2,
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta p,
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta small,
html[data-fw-theme="dark"] body .gh-post-upgrade-cta h2 {
  color: var(--fw-deep-text) !important;
}
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta a:not(.gh-btn),
html[data-fw-theme="dark"] body .gh-post-upgrade-cta a:not(.gh-btn) {
  color: var(--fw-primary) !important;
}
/* 主按钮在深色下用品牌色 + 白字 */
html[data-fw-theme="dark"] .fw-site .gh-post-upgrade-cta a.gh-btn,
html[data-fw-theme="dark"] body .gh-post-upgrade-cta a.gh-btn {
  background: var(--fw-primary) !important;
  color: #fff !important;
  border-color: var(--fw-primary) !important;
}

/* 浅色模式：同样给个明确的浅色卡片底，避免白字压白底 */
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta,
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta-content {
  background: var(--fw-card);
  border: 1px solid var(--fw-line);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-text) !important;
}
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta h2,
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta p,
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta small {
  color: var(--fw-deep-text) !important;
}
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta a:not(.gh-btn) {
  color: var(--fw-primary) !important;
}
html:not([data-fw-theme="dark"]) .fw-site .gh-post-upgrade-cta a.gh-btn {
  background: var(--fw-primary) !important;
  color: #fff !important;
}

/* ==========================================================================
   ㊳ 作者页 / 标签页头部重新设计
   问题：原 .fw-term 只有一个 h1 标题，右侧大片空白，信息密度过低
         （实测 1440px 下作者名「Isoziyuan」孤零零占整行）。
   方案：加图标 + 分类标签（作者/标签）+ 文章计数，改为左右布局。
   ========================================================================== */
.fw-site .fw-term {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem 1.5rem;
}
.fw-site .fw-term-main {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-width: 0;
}
.fw-site .fw-term-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--fw-primary);
  background: color-mix(in srgb, var(--fw-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--fw-primary) 25%, transparent);
}
.fw-site .fw-term-body { min-width: 0; }
.fw-site .fw-term-kicker {
  margin: 0 0 .125rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fw-primary);
}
.fw-site .fw-term-name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--fw-deep-text);
  overflow-wrap: break-word;
}
.fw-site .fw-term-desc {
  margin: .375rem 0 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--fw-text-2);
}
.fw-site .fw-term-stats {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 0 0 auto;
}
.fw-site .fw-term-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
}
.fw-site .fw-term-stat strong {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--fw-primary);
}
.fw-site .fw-term-stat em {
  font-size: .75rem;
  font-style: normal;
  color: var(--fw-text-2);
}

/* 移动端：改为竖排 */
@media (max-width: 640px) {
  .fw-site .fw-term {
    padding: 1rem 1.125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }
  .fw-site .fw-term-icon { width: 38px; height: 38px; border-radius: 10px; }
  .fw-site .fw-term-icon svg { width: 18px; height: 18px; }
  .fw-site .fw-term-name { font-size: 1.25rem; }
  .fw-site .fw-term-stats { align-self: flex-start; }
}

/* ==========================================================================
   ㊴ 超宽屏布局居中修复（回归缺陷）
   问题：非文章页的居中规则写在 @media (min-width:1024px) and (max-width:1711px)
         里，视口 >=1712px 时该媒体查询不匹配 ⇒ 规则失效，
         顶层某条 max-width:100% 接管 ⇒ 内容铺满全宽、不再居中
         （实测 1920px：layout 宽 1905px、margin 0，而不是 1200px 居中）。
   方案：把非文章页的居中规则提到不受断点限制的位置，覆盖所有宽度。
   ========================================================================== */
body:not(.post-template) .fw-site .fw-layout {
  max-width: var(--fw-page-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* 文章页：宽屏（>=1712px）走全宽 + 外部 TOC，窄屏走收窄通道 */
@media (min-width: 1712px) {
  /* 文章页宽屏布局：内容对称居中 + 右侧 TOC 通道
     ─────────────────────────────────────────────────
     最终方案：layout 用不对称 padding 把内容推左，TOC 挂在通道内。
     历史教训（三次失败）：
       ① 只设 max-width+auto    ⇒ 内容被 TOC 压住
       ② left:calc(50%+…)       ⇒ 坐标算错，重叠更多
       ③ transform:translateX   ⇒ TOC 的 right 变负，重叠依旧
     ───────────────────────────────────────────────── */
  body.post-template .fw-site .fw-layout {
    max-width: var(--fw-page-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-right: 14rem !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  body.post-template .fw-site .fw-main {
    max-width: 100% !important;
  }
  body.post-template .fw-site .fw-article {
    padding-right: .75rem !important;
  }
  body.post-template .fw-site .iso-article-toc {
    left: auto !important;
    right: calc((100vw - var(--fw-page-width)) / 2 - 1rem) !important;
    width: 208px !important;
    top: 96px !important;
  }
  body.post-template .fw-site .iso-article-toc-panel { width: 208px !important; }
}