/* ==========================================================================
   文章系统 · 前台样式
   --------------------------------------------------------------------------
   ★ 类名统一加 art- 前缀，避免与主题的 .nv- 系列冲突。
   ★ 尽量复用主题的设计令牌（var(--nv-*)），这样切主题时若令牌名一致
     就能自动跟随配色；主题没有这些令牌时退化为默认值，结构仍可用。
   ========================================================================== */

.art-list {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-4, 16px);
  max-width: 900px;
}

.art-item {
  display: flex;
  align-items: center;
  gap: var(--nv-space-4, 16px);
  padding: var(--nv-space-4, 16px) var(--nv-space-5, 20px);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.art-item:hover {
  border-color: var(--nv-border-brand, rgba(37, 99, 235, .4));
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}

.art-item__cover {
  flex: 0 0 96px;
  width: 96px;
  height: 68px;
  border-radius: var(--nv-radius-btn, 12px);
  overflow: hidden;
  background: var(--nv-soft, #f5f5f7);
}
.art-item__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.art-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.art-item__title {
  font-size: var(--nv-fs-body, 14px);
  font-weight: var(--nv-weight-bold, 700);
  letter-spacing: -.01em;
  color: var(--nv-text-primary, #1d1d1f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.art-item__summary {
  font-size: var(--nv-fs-caption, 12px);
  line-height: 1.6;
  color: var(--nv-text-muted, #86868b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.art-item__meta {
  display: flex;
  align-items: center;
  gap: var(--nv-space-4, 16px);
  font-size: var(--nv-fs-micro, 11px);
  color: var(--nv-text-faint, #a1a1a6);
}
.art-item__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.art-item__meta .material-icons-outlined { font-size: 14px; }

.art-item__arrow {
  flex: 0 0 auto;
  color: var(--nv-text-faint, #a1a1a6);
  transition: transform .15s ease, color .15s ease;
}
.art-item:hover .art-item__arrow {
  color: var(--nv-brand, #2563eb);
  transform: translateX(3px);
}

/* 分页 */
/* 分页样式已统一到主题 shop.css 的 .nv-pager 体系（2026-10-17）。
   这里原有的一段 .art-pager / .art-pager__btn 自定义样式已删除 ——
   模板不再使用这些类名，留着只会和商品页产生冲突。 */

/* ── 详情页 ──────────────────────────────────────────────── */
.art-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nv-space-6, 24px);
  align-items: start;
}
@media (min-width: 1024px) {
  .art-layout { grid-template-columns: minmax(0, 1fr) 280px; }
}

.art-card { overflow: hidden; }

.art-card__head {
  padding: var(--nv-space-6, 24px) var(--nv-space-6, 24px) var(--nv-space-4, 16px);
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
}
.art-card__title {
  margin: 0 0 var(--nv-space-3, 12px);
  font-size: var(--nv-fs-title, 22px);
  font-weight: var(--nv-weight-bold, 700);
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--nv-text-primary, #1d1d1f);
}
.art-card__meta {
  display: flex;
  align-items: center;
  gap: var(--nv-space-4, 16px);
  flex-wrap: wrap;
  font-size: var(--nv-fs-micro, 11px);
  color: var(--nv-text-faint, #a1a1a6);
}
.art-card__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.art-card__meta .material-icons-outlined { font-size: 14px; }

/* ★ 详情页封面
   ★★ 2026-10-14 修正：原来 `height: auto` 会按原始比例撑开 ——
      实测 480×320 的图在 1024px 正文里被拉到 680px 高，
      首屏几乎被图片占满，看不到正文开头。
   → 固定高度 + object-fit: cover，把封面当横幅用。
      裁切比拉伸好：不变形，且首屏能同时看到标题、封面、正文开头。 */
@media (max-width: 900px) {
}
@media (max-width: 560px) {
}

.art-card__body { padding: var(--nv-space-6, 24px); }

/* 侧栏 */
.art-side { min-width: 0; }
@media (min-width: 1024px) {
  .art-side { position: sticky; top: calc(var(--nv-header-h, 60px) + 16px); }
}

.art-nav { overflow: hidden; }
.art-nav__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--nv-space-4, 16px) var(--nv-space-5, 20px);
  background: var(--nv-soft, #f5f5f7);
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  font-size: var(--nv-fs-body, 14px);
  font-weight: var(--nv-weight-bold, 700);
  color: var(--nv-text-primary, #1d1d1f);
}
.art-nav__head .material-icons-outlined { font-size: 18px; color: var(--nv-brand, #2563eb); }

.art-nav__body { padding: var(--nv-space-4, 16px); display: flex; flex-direction: column; gap: 10px; }

.art-nav__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--nv-radius-btn, 12px);
  border: 1px solid var(--nv-border-soft, #f0f0f2);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.art-nav__item:hover {
  border-color: var(--nv-border-brand, rgba(37, 99, 235, .4));
  background: var(--nv-brand-softer, rgba(37, 99, 235, .05));
}
.art-nav__dir { font-size: var(--nv-fs-micro, 11px); color: var(--nv-text-faint, #a1a1a6); }
.art-nav__title {
  font-size: var(--nv-fs-caption, 12px);
  color: var(--nv-text-primary, #1d1d1f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-nav__empty { margin: 0; font-size: var(--nv-fs-caption, 12px); color: var(--nv-text-muted, #86868b); }

/* 窄屏 */
@media (max-width: 640px) {
  .art-item__cover { flex-basis: 72px; width: 72px; height: 52px; }
  .art-card__head, .art-card__body { padding: var(--nv-space-4, 16px); }
  .art-card__title { font-size: 19px; }
}


/* ==========================================================================
   商品卡片 · 与主题富文本样式对抗（加固版）
   --------------------------------------------------------------------------
   ★ 实测问题：主题的 `.nv-rich :where(img){display:block;max-width:100%}`
     会命中卡片内的缩略图，把 72×72 的小图撑满整个正文宽度，布局垮掉。
   ★ 按官方文档建议加固：
     1) 选择器加 `.nv-rich` 前缀，特异性压过主题
     2) 尺寸类属性加 !important —— 主题用 :where() 虽然特异性为 0，
        但属性仍会生效，不加固不保险
   ========================================================================== */

.nv-rich .art-pcard,
.art-card__body .art-pcard {
  display: block;
  margin: 18px 0;
}

.nv-rich .art-pcard__link,
.art-card__body .art-pcard__link {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--nv-border, #e5e5e7);
  border-radius: var(--nv-radius-btn, 12px);
  background: var(--nv-elevated, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.nv-rich .art-pcard__link:hover,
.art-card__body .art-pcard__link:hover {
  border-color: var(--nv-border-brand, rgba(37, 99, 235, .45));
  box-shadow: 0 8px 22px -14px rgba(0, 0, 0, .3);
  transform: translateY(-1px);
}

.nv-rich .art-pcard__thumb,
.art-card__body .art-pcard__thumb {
  flex: 0 0 72px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 72px !important;
  border-radius: var(--nv-radius-btn, 10px);
  overflow: hidden;
  background: var(--nv-soft, #f5f5f7);
}
.nv-rich .art-pcard__thumb img,
.art-card__body .art-pcard__thumb img {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  min-height: 72px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
}

.nv-rich .art-pcard__main,
.art-card__body .art-pcard__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nv-rich .art-pcard__name,
.art-card__body .art-pcard__name {
  font-size: var(--nv-fs-body, 14px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--nv-text-primary, #1d1d1f);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nv-rich .art-pcard__meta,
.art-card__body .art-pcard__meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--nv-fs-caption, 12px);
}
.nv-rich .art-pcard__price,
.art-card__body .art-pcard__price {
  color: var(--nv-danger, #f1416c);
  font-size: 17px;
  font-weight: 700;
}
.nv-rich .art-pcard__stock,
.art-card__body .art-pcard__stock { color: var(--nv-text-muted, #86868b); }
.nv-rich .art-pcard__stock.is-out,
.art-card__body .art-pcard__stock.is-out { color: var(--nv-text-faint, #a1a1a6); }

.nv-rich .art-pcard__go,
.art-card__body .art-pcard__go {
  flex: 0 0 auto;
  font-size: var(--nv-fs-caption, 12px);
  color: var(--nv-brand, #2563eb);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nv-rich .art-pcard--gone,
.art-card__body .art-pcard--gone {
  padding: 12px 16px;
  border: 1px dashed var(--nv-border, #e5e5e7);
  border-radius: var(--nv-radius-btn, 12px);
  font-size: var(--nv-fs-caption, 12px);
  color: var(--nv-text-faint, #a1a1a6);
  background: var(--nv-soft, #fafafa);
}

@media (max-width: 640px) {
  .nv-rich .art-pcard__thumb,
  .art-card__body .art-pcard__thumb {
    flex-basis: 56px !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
  }
  .nv-rich .art-pcard__thumb img,
  .art-card__body .art-pcard__thumb img {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
  }
  .nv-rich .art-pcard__price,
  .art-card__body .art-pcard__price { font-size: 15px; }
  .nv-rich .art-pcard__go,
  .art-card__body .art-pcard__go { display: none; }
}
/* ==========================================================================
   列表页 · 左侧分类栏 + 右侧文章列表
   --------------------------------------------------------------------------
   ★ 布局用 grid：宽屏两栏（240px + 自适应），窄屏自动堆叠为单栏。
   ========================================================================== */
.art-wrap {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--nv-space-6, 24px);
  align-items: start;
}
@media (max-width: 900px) {
  .art-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--nv-space-4, 16px); }
}

/* ── 左侧分类栏 ─────────────────────────────────────────── */
.art-side { min-width: 0; }
@media (min-width: 901px) {
  .art-side { position: sticky; top: calc(var(--nv-header-h, 60px) + 16px); }
}

.art-cats { overflow: hidden; }

.art-cats__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--nv-space-4, 16px) var(--nv-space-5, 20px);
  background: var(--nv-soft, #f5f5f7);
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  font-size: var(--nv-fs-body, 14px);
  font-weight: var(--nv-weight-bold, 700);
  color: var(--nv-text-primary, #1d1d1f);
}
.art-cats__head .material-icons-outlined { font-size: 18px; color: var(--nv-brand, #2563eb); }

.art-cats__body { padding: var(--nv-space-2, 8px); }

.art-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--nv-radius-btn, 10px);
  font-size: var(--nv-fs-caption, 13px);
  color: var(--nv-text-secondary, #424245);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.art-cat:hover { background: var(--nv-soft, #f5f5f7); color: var(--nv-text-primary, #1d1d1f); }

/* 当前选中项：品牌色底 + 加粗 */
.art-cat.is-on {
  background: var(--nv-brand-softer, rgba(37, 99, 235, .08));
  color: var(--nv-brand-ink, #1d4ed8);
  font-weight: 600;
}

.art-cat__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* [已移除] 历史残留：.art-cat__num —— 数字胶囊样式已由定稿段统一 */

.art-cats__empty {
  margin: 0;
  padding: 16px 12px;
  text-align: center;
  font-size: var(--nv-fs-caption, 12px);
  color: var(--nv-text-faint, #a1a1a6);
}

/* ── 右侧主区 ───────────────────────────────────────────── */
.art-main { min-width: 0; }

/* 列表页的标题区在右栏内，上边距归零（外层已有面包屑） */
.art-main .nv-page-head { margin-top: 0; }

/* 列表容器铺满右栏 */
.art-main .art-list { max-width: none; }
/* 分页容器现在用 .nv-pager（样式来自 shop.css），已不需要针对 .art-pager 的覆盖 */
/* 列表页 · 置顶标记（加固版） */
.nv-rich .art-item__top,
.art-card__body .art-item__top,
.art-item .art-item__top {
  display: inline-block !important;
  padding: 1px 7px !important;
  margin: 0 8px 0 0 !important;
  border-radius: 4px !important;
  background: #fff4de !important;
  color: #d97a00 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  vertical-align: 2px !important;
}

/* ==========================================================================
   正文 · Markdown 表格
   --------------------------------------------------------------------------
   ★ 主题的 .nv-rich 可能没覆盖 table 样式，这里补一套；
     选择器带 .nv-rich 前缀提高特异性（与其他卡片样式一致的做法）。
   ========================================================================== */
.nv-rich .art-card__body table,
.art-card__body .nv-rich table,
.nv-rich table {
  width: 100%;
  margin: 18px 0;
  border-collapse: collapse;
  font-size: var(--nv-fs-caption, 13px);
  border: 1px solid var(--nv-border, #e5e5e7);
  border-radius: var(--nv-radius-btn, 10px);
  overflow: hidden;
}
.nv-rich table thead th {
  padding: 10px 14px;
  background: var(--nv-soft, #f5f5f7);
  font-weight: 600;
  text-align: left;
  color: var(--nv-text-primary, #1d1d1f);
  border-bottom: 1px solid var(--nv-border, #e5e5e7);
  white-space: nowrap;
}
.nv-rich table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  color: var(--nv-text-secondary, #424245);
}
.nv-rich table tbody tr:last-child td { border-bottom: 0; }
.nv-rich table tbody tr:hover { background: var(--nv-brand-softer, rgba(37,99,235,.04)); }

/* 窄屏允许表格横向滚动（内容不折行更易读） */
@media (max-width: 640px) {
  .nv-rich table { display: block; overflow-x: auto; white-space: nowrap; }
}
/* ==========================================================================
   分页
   --------------------------------------------------------------------------
   ★★★ 2026-10-17 全段重写：模板已改用商品页的分页类名，这里不再需要
        自定义样式。保留本段只为说明，规则全部清空。

   历史（已废弃，勿恢复）：
     .art-pager / .art-pager__nums / .art-pager__num / .art-pager__gap
       —— 文章页原来自带一套页码样式，与商品页不一致。
     现在模板统一用 .nv-pager__num，样式全部来自 shop.css，两处天然一致。

   ★★ 特别注意：这里曾经有一条
        .nv-pager__btn { display:inline-flex; align-items:center; gap:3px; }
        .nv-pager__btn .material-icons-outlined { font-size:17px; }
      它们是给"带 chevron 箭头的上下页"用的。
      模板去掉箭头后，这两条不但无用，还会因 article.css 在 shop.css
      【之后】加载而【覆盖商品页的同名规则】，造成两页间距不一致。
     已删除 —— 这类"跨页共享类名"的样式，改一处必须检查另一处。
   ========================================================================== */

/* ==========================================================================
   左侧分类栏 · 视觉优化
   --------------------------------------------------------------------------
   ★ 优化点：
     1. 选中项加左侧色条 + 更明显的底色，一眼看出在哪
     2. 计数徽章用「胶囊」形，选中时反色
     3. 分类项 hover 有轻微左移，增加触感
     4. 头部图标与标题基线对齐
     5. 窄屏（堆叠时）分类改成横向滚动的胶囊条，省纵向空间
   ========================================================================== */

.art-cats {
  border-radius: var(--nv-radius-card, 16px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}

.art-cats__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 16px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nv-brand, #2563eb) 6%, var(--nv-elevated, #fff)) 0%,
    var(--nv-elevated, #fff) 100%);
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--nv-text-primary, #1d1d1f);
}
.art-cats__head .material-icons-outlined {
  font-size: 17px;
  color: var(--nv-brand, #2563eb);
}

.art-cats__body { padding: 8px; }

/* 分类项 */
.art-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 9px 14px;
  margin-bottom: 2px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--nv-text-secondary, #424245);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.art-cat:last-child { margin-bottom: 0; }

/* 左侧色条：默认透明，选中时显现 */
.art-cat::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--nv-brand, #2563eb);
  transition: transform .18s ease;
}

.art-cat:hover {
  background: var(--nv-soft, #f5f5f7);
  color: var(--nv-text-primary, #1d1d1f);
  padding-left: 16px;
}

/* 选中态：底色 + 色条 + 加粗 */
.art-cat.is-on {
  background: var(--nv-brand-softer, rgba(37, 99, 235, .09));
  color: var(--nv-brand-ink, #1d4ed8);
  font-weight: 600;
}
.art-cat.is-on::before { transform: translateY(-50%) scaleY(1); }

.art-cat__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}/* [已移除] 历史残留：/* 计数徽章 */ .art-cat__num —— 数字胶囊样式已由定稿段统一 */

.art-cats__empty {
  margin: 0;
  padding: 20px 12px;
  text-align: center;
  font-size: 12px;
  color: var(--nv-text-faint, #a1a1a6);
}

/* ── 窄屏：分类改成 2 列 + 名字与数字同行（2026-10-17 v3 定稿）─────────
   ★★★ 演进过程（用户逐个看过 Demo 后选定 v3）：

   ① 最初：横向滚动的胶囊条 —— 8 个总宽 847px / 容器 359px，
      只能看 3 个，要横滑 2.4 屏。（问题本身）
   ② 一度改成 3 列格子：不横滑了，但数字小、灰、贴底边，
      像残留的次级信息；且 8 个排 3 列，末行只剩 2 个、右边空 1/3。
   ③ Demo 对比了 4 个方向（3列格子 / 胶囊换行 / 2列数字右置 / 紧凑胶囊）：
        v1 3列格子    192px / 3 行 —— 数字贴底
        v2 胶囊换行    204px / 4 行 —— 胶囊宽窄不一，每行只放 2 个，反而更高
        v3 2列数字右置 228px / 4 行 —— ← **选定**，最工整
        v4 紧凑胶囊    150px / 3 行 —— 最省高度，但右侧参差
   ④ 用户选 v3：**宁可多占 36px 高度，也要名字与数字同行、格子对齐**。

   设计要点：
     · 每格 175px（容器 359 - gap 8 / 2），名字不与数字抢空间
     · 名字 + 数字同一行，数字做「胶囊标签」置右 —— 语义清楚
       比"数字缩在名字下方"更像"分类 + 数量"的组合
     · 数字用等宽字体 + 灰底胶囊，与名字有视觉区分但不抢眼
     · 选中态：浅蓝底 + 品牌描边 + 品牌字，数字胶囊也换品牌色
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .art-cats__head { padding: 12px 14px; }

  .art-cats__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 12px;
    /* ★ 网格排版必须能换行，关掉横滑 */
    overflow-x: visible;
  }

  .art-cat {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-height: 46px;              /* 触控下限之上 + 单行内容居中 */
    margin-bottom: 0;
    padding: 0 12px;
    border: 1px solid var(--nv-border, #e5e5e7);
    border-radius: var(--nv-radius-md, 10px);
    background: var(--nv-elevated, #fff);
    white-space: normal;
    overflow: hidden;
  }
  /* 网格布局里左侧色条多余 */
  .art-cat::before { display: none; }
  /* hover 的 padding-left 位移在网格里会抖，关掉 */
  .art-cat:hover { padding-left: 12px; }

  /* 名字：占满剩余空间，单行省略（175px 下 4 字完全放得下） */
  .art-cat__name {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }/* [已移除] 历史残留：/* 数字：右侧胶囊标签 —— 从"缩在名字下方的小灰字"改为"同行的数量标签" */ .art-cat__num —— 数字胶囊样式已由定稿段统一 */


  /* 选中态：浅底 + 品牌描边；数字胶囊也换品牌色
     ★★ 必须显式改数字颜色 —— 桌面版是「深蓝底 + 白字」，
        移动端这里是浅底，白字会隐形（上一轮踩过这个坑）。 */
  .art-cat.is-on {
    background: var(--nv-brand-softer, rgba(37, 99, 235, .07));
    border-color: var(--nv-border-brand, rgba(37, 99, 235, .40));
    color: var(--nv-brand-ink, #1d4ed8);
  }
  .art-cat.is-on .art-cat__name { color: var(--nv-brand-ink, #1d4ed8); font-weight: 600; }
  }
/* ==========================================================================
   详情页 · v2（正文排版 + 右侧栏）
   ========================================================================== */

/* ── 布局 ────────────────────────────────────────────────── */
.art-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--nv-space-6, 24px);
  align-items: start;
}
@media (max-width: 1080px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); }
}

.art-card { overflow: hidden; }

/* ── 文章头部 ────────────────────────────────────────────── */
.art-card__head {
  padding: var(--nv-space-6, 24px) var(--nv-space-6, 24px) var(--nv-space-4, 16px);
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
}
.art-card__title {
  margin: 0 0 var(--nv-space-3, 12px);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.32;
  color: var(--nv-text-primary, #1d1d1f);
}
.art-card__meta {
  display: flex;
  align-items: center;
  gap: var(--nv-space-4, 16px);
  flex-wrap: wrap;
  font-size: var(--nv-fs-micro, 12px);
  color: var(--nv-text-faint, #a1a1a6);
}
.art-card__meta > span,
.art-card__meta > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.art-card__meta .material-icons-outlined { font-size: 15px; }
/* 分类标签：融入 meta 行的中性色系。
   ★ 不用品牌蓝：meta 行是"元信息"，不是行动点。
     整行三项（分类/时间/浏览）里只有它突兀地发蓝，视觉上会误以为可点 ——
     而它恰恰是不可点击的展示信息。
   ★ 保留浅底 chip 形态：靠底色而非颜色区分层级，
     既有"这是一个标签"的识别度，又不脱离整行的灰调。 */
.art-card__cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--nv-radius-chip, .625rem);
  background: var(--nv-soft, #f2f2f4);
  color: var(--nv-text-muted, #6e6e73);
}

/* ★ 详情页封面
   ★★ 2026-10-14 修正：原来 `height: auto` 会按原始比例撑开 ——
      实测 480×320 的图在 1024px 正文里被拉到 680px 高，
      首屏几乎被图片占满，看不到正文开头。
   → 固定高度 + object-fit: cover，把封面当横幅用。
      裁切比拉伸好：不变形，且首屏能同时看到标题、封面、正文开头。 */
@media (max-width: 900px) {
}
@media (max-width: 560px) {
}

.art-card__body {
  padding: var(--nv-space-6, 24px);
}

/* ══════════════════════════════════════════════════════════
   正文排版 · art-prose
   --------------------------------------------------------------------------
   ★ 核心目标：让长文"读得下去"
     · 行长控制 —— 太宽眼睛要来回扫，太窄换行频繁
     · 行高 1.85 —— 中文比英文更需要行距
     · 段间距 1.15em —— 段与段之间要能"看出是一段"
   ══════════════════════════════════════════════════════════ */
.nv-rich.art-prose {
  font-size: 16px;
  line-height: 1.85;
  color: var(--nv-text-secondary, #3a3a3c);
  word-break: break-word;
}

/* 段落：上下留白，首行不缩进（中文网页习惯） */
.nv-rich.art-prose p {
  margin: 0 0 1.15em;
  line-height: 1.85;
}
.nv-rich.art-prose p:last-child { margin-bottom: 0; }

/* 标题：与上方留大空、与下方留小空（视觉上归属下文） */
.nv-rich.art-prose h1,
.nv-rich.art-prose h2,
.nv-rich.art-prose h3,
.nv-rich.art-prose h4 {
  color: var(--nv-text-primary, #1d1d1f);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  scroll-margin-top: calc(var(--nv-header-h, 60px) + 16px);  /* 锚点跳转不被页头挡住 */
}
.nv-rich.art-prose h1 {
  font-size: 26px;
  margin: 0 0 .6em;
}
.nv-rich.art-prose h2 {
  font-size: 21px;
  margin: 1.6em 0 .7em;
  padding-left: 12px;
  border-left: 4px solid var(--nv-brand, #2563eb);  /* 左侧色条，章节感更强 */
}
.nv-rich.art-prose h3 {
  font-size: 18px;
  margin: 1.4em 0 .6em;
}
.nv-rich.art-prose h4 { font-size: 16px; margin: 1.2em 0 .5em; }
.nv-rich.art-prose > h2:first-child,
.nv-rich.art-prose > h3:first-child { margin-top: 0; }

/* 列表：必须显示项目符号（主题可能 reset 掉了） */
.nv-rich.art-prose ul,
.nv-rich.art-prose ol {
  margin: 0 0 1.15em;
  padding-left: 1.6em;
}
.nv-rich.art-prose ul > li { list-style: disc; }
.nv-rich.art-prose ol > li { list-style: decimal; }
.nv-rich.art-prose li {
  margin: .45em 0;
  line-height: 1.8;
}
.nv-rich.art-prose li::marker { color: var(--nv-brand, #2563eb); }
.nv-rich.art-prose ul ul,
.nv-rich.art-prose ol ol,
.nv-rich.art-prose ul ol,
.nv-rich.art-prose ol ul { margin: .4em 0 .2em; }
.nv-rich.art-prose ul ul > li { list-style: circle; }

/* 引用：左边框 + 浅底，比主题默认更可辨 */
.nv-rich.art-prose blockquote {
  margin: 1.3em 0;
  padding: 14px 18px;
  border-left: 4px solid var(--nv-brand, #2563eb);
  border-radius: 0 10px 10px 0;
  background: var(--nv-brand-softer, rgba(37, 99, 235, .06));
  color: var(--nv-text-secondary, #424245);
  font-style: normal;
}
.nv-rich.art-prose blockquote p { margin: 0; }
.nv-rich.art-prose blockquote > *:first-child { margin-top: 0; }
.nv-rich.art-prose blockquote > *:last-child { margin-bottom: 0; }

/* 行内代码 */
.nv-rich.art-prose code {
  padding: .16em .42em;
  border-radius: 5px;
  background: var(--nv-soft, #f2f3f5);
  color: #d6336c;
  font-size: .9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 代码块 */
.nv-rich.art-prose pre {
  margin: 1.3em 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: #1e222a;
  overflow-x: auto;
  line-height: 1.7;
}
.nv-rich.art-prose pre code {
  padding: 0;
  background: transparent;
  color: #e6e8eb;
  font-size: 13.5px;
}

/* 表格：条纹 + 圆角外壳 */
.nv-rich.art-prose table {
  width: 100%;
  margin: 1.3em 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--nv-border, #e5e5e7);
  border-radius: 12px;
  overflow: hidden;
  font-size: 14px;
}
.nv-rich.art-prose thead th {
  padding: 12px 16px;
  background: var(--nv-soft, #f5f5f7);
  font-weight: 700;
  text-align: left;
  color: var(--nv-text-primary, #1d1d1f);
  border-bottom: 1px solid var(--nv-border, #e5e5e7);
  white-space: nowrap;
}
.nv-rich.art-prose tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
}
.nv-rich.art-prose tbody tr:last-child td { border-bottom: 0; }
.nv-rich.art-prose tbody tr:nth-child(even) { background: #fafbfc; }

/* 链接 */
.nv-rich.art-prose a {
  color: var(--nv-brand, #2563eb);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--nv-brand, #2563eb) 35%, transparent);
  transition: border-color .15s ease, color .15s ease;
}
.nv-rich.art-prose a:hover {
  color: var(--nv-brand-ink, #1d4ed8);
  border-bottom-color: currentColor;
}

/* 分隔线 */
.nv-rich.art-prose hr {
  margin: 2em 0;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nv-border, #e5e5e7) 20%, var(--nv-border, #e5e5e7) 80%, transparent);
}

/* 图片 */
.nv-rich.art-prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.4em auto;
  border-radius: 10px;
}

/* ── 底部标签 ────────────────────────────────────────────── */
.art-card__foot {
  padding: var(--nv-space-4, 16px) var(--nv-space-6, 24px) var(--nv-space-5, 20px);
  border-top: 1px solid var(--nv-border-soft, #f0f0f2);
  background: #fafbfc;
}
.art-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.art-tags__label {
  font-size: 12px;
  color: var(--nv-text-faint, #a1a1a6);
}
.art-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--nv-elevated, #fff);
  border: 1px solid var(--nv-border, #e5e5e7);
  font-size: 12.5px;
  color: var(--nv-text-secondary, #424245);
  text-decoration: none;
  transition: all .15s ease;
}
.art-tag:hover {
  border-color: var(--nv-brand, #2563eb);
  color: var(--nv-brand, #2563eb);
  background: var(--nv-brand-softer, rgba(37,99,235,.06));
}

/* ══════════════════════════════════════════════════════════
   右侧栏
   ══════════════════════════════════════════════════════════ */
.art-side {
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-4, 16px);
  min-width: 0;
}
@media (min-width: 1081px) {
  .art-side { position: sticky; top: calc(var(--nv-header-h, 60px) + 16px); }
}

/* ── 目录 ── */
.art-toc {
  max-height: min(62vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.art-toc__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  font-size: 13px;
  font-weight: 700;
  color: var(--nv-text-primary, #1d1d1f);
}
.art-toc__head .material-icons-outlined { font-size: 17px; color: var(--nv-brand, #2563eb); }

.art-toc__body {
  padding: 8px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.art-toc__link {
  display: block;
  padding: 7px 12px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nv-text-secondary, #5f6368);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all .14s ease;
}
.art-toc__link:hover {
  background: var(--nv-soft, #f5f5f7);
  color: var(--nv-text-primary, #1d1d1f);
}
/* h3 缩进一级 */
.art-toc__link--h3 {
  padding-left: 24px;
  font-size: 12.5px;
  color: var(--nv-text-muted, #86868b);
}
/* 当前阅读位置：左侧色条 + 品牌色 + 加粗 */
.art-toc__link.is-current {
  border-left-color: var(--nv-brand, #2563eb);
  background: var(--nv-brand-softer, rgba(37,99,235,.08));
  color: var(--nv-brand-ink, #1d4ed8);
  font-weight: 600;
}

/* ── 上下篇 ── */
.art-nav { overflow: hidden; }
.art-nav__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  font-size: 13px;
  font-weight: 700;
  color: var(--nv-text-primary, #1d1d1f);
}
.art-nav__head .material-icons-outlined { font-size: 17px; color: var(--nv-brand, #2563eb); }

.art-nav__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.art-nav__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--nv-border-soft, #f0f0f2);
  border-radius: 10px;
  text-decoration: none;
  transition: all .15s ease;
}
.art-nav__item:hover {
  border-color: var(--nv-brand, #2563eb);
  background: var(--nv-brand-softer, rgba(37,99,235,.05));
}
.art-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--nv-text-faint, #a1a1a6);
}
.art-nav__dir .material-icons-outlined { font-size: 13px; }
.art-nav__title {
  font-size: 13px;
  line-height: 1.5;
  color: var(--nv-text-primary, #1d1d1f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-nav__empty {
  margin: 0;
  padding: 8px 4px;
  font-size: 12.5px;
  color: var(--nv-text-muted, #86868b);
}

/* ── 返回列表 ── */
.art-back { text-decoration: none; }

/* ══════════════════════════════════════════════════════════
   阅读进度条（顶部 2px）
   ══════════════════════════════════════════════════════════ */
.art-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 900;
  pointer-events: none;
  background: transparent;
}
.art-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--nv-brand, #2563eb), #7c3aed);
  transition: width .08s linear;
}

/* ── 窄屏 ── */
@media (max-width: 640px) {
  .art-card__head,
  .art-card__body,
  .art-card__foot { padding-left: 16px; padding-right: 16px; }
  .nv-rich.art-prose { font-size: 15.5px; line-height: 1.8; }
  .nv-rich.art-prose h2 { font-size: 19px; }
  .nv-rich.art-prose h3 { font-size: 17px; }
  .nv-rich.art-prose pre { border-radius: 8px; padding: 12px 14px; }
  .nv-rich.art-prose table { font-size: 13px; }
  .nv-rich.art-prose thead th,
  .nv-rich.art-prose tbody td { padding: 9px 12px; }
  /* 窄屏目录默认折叠高度，省空间 */
  .art-toc { max-height: 300px; }
}
/* ==========================================================================
   正文末尾 · 上一篇 / 下一篇（左右并排）
   --------------------------------------------------------------------------
   ★ 2026-10-14 从右侧栏迁到这里（用户要求）。
     形态也从"竖排小卡片"改成"左右对开的两个大块"——
     放在正文末尾时横向空间充足，对开更有"翻页"的动感。
   ========================================================================== */
.art-card__pn {
  padding: var(--nv-space-5, 20px) var(--nv-space-6, 24px);
  border-top: 1px solid var(--nv-border-soft, #f0f0f2);
}

.art-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nv-space-3, 12px);
}
/* 只有一边有内容时，占满整行 */
.art-pn > :only-child { grid-column: 1 / -1; }

.art-pn__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 16px;
  border: 1px solid var(--nv-border, #e5e5e7);
  border-radius: var(--nv-radius-btn, 12px);
  background: var(--nv-elevated, #fff);
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
a.art-pn__item:hover {
  border-color: var(--nv-brand, #2563eb);
  background: var(--nv-brand-softer, rgba(37,99,235,.05));
  transform: translateY(-1px);
}

/* 方向标签 */
.art-pn__dir {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--nv-text-faint, #a1a1a6);
}
.art-pn__dir .material-icons-outlined { font-size: 14px; }

/* 下一篇：右对齐（方向感一致） */
.art-pn__item--next { text-align: right; }
.art-pn__item--next .art-pn__dir { justify-content: flex-end; }

/* 标题 */
.art-pn__title {
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--nv-text-primary, #1d1d1f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 首/末篇：无目标时显示禁用态 */
.art-pn__item.is-disabled {
  cursor: default;
  background: #fafbfc;
}
.art-pn__item.is-disabled .art-pn__title {
  color: var(--nv-text-faint, #a1a1a6);
  font-weight: 400;
}

@media (max-width: 640px) {
  .art-card__pn { padding-left: 16px; padding-right: 16px; }
  /* 窄屏改单列堆叠 */
  .art-pn { grid-template-columns: 1fr; }
  .art-pn__item--next { text-align: left; }
  .art-pn__item--next .art-pn__dir { justify-content: flex-start; }
}
/* ==========================================================================
   列表卡片 · 右侧缩略图
   --------------------------------------------------------------------------
   ★ 2026-10-14 用户要求：文章支持封面缩略图。

   ★ 设计取舍（为什么放右侧而不是顶部大图）：
     顶部大图会把单条卡片高度翻倍（一屏只能看 2-3 篇），
     不适合"文章数量多的列表页"。
     右侧小图（固定 120×84）只占宽度不占高度，
     信息密度完全不变，视觉上也有了个"锚点"。

   ★ 无封面时：模板不渲染 .art-item__thumb，整行自动退化成纯文字列表，
     不会留空位。所以这里所有样式都可以假定"图是存在的"。
   ========================================================================== */

.art-item__thumb {
  flex: 0 0 auto;
  width: 140px;
  height: 92px;
  border-radius: var(--nv-radius-btn, 10px);
  overflow: hidden;
  background: var(--nv-soft, #f5f5f7);
}

/* ★ 主题的 .nv-rich :where(img) 之类规则可能命中，
   这里用 !important 锁死尺寸，写法与商品卡片一致 */
.art-item__thumb img {
  display: block !important;
  width: 140px !important;
  height: 92px !important;
  min-width: 140px !important;
  max-width: 140px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  transition: transform .3s var(--nv-ease-out, ease);
}
/* 悬停时图片轻微放大，增加"可点"的暗示 */
.art-item:hover .art-item__thumb img { transform: scale(1.06); }

/* ── 中等屏幕：图缩小 ── */
@media (max-width: 900px) {
  .art-item__thumb,
  .art-item__thumb img {
    width: 110px !important;
    height: 76px !important;
    min-width: 110px !important;
    max-width: 110px !important;
  }
}

/* ── 窄屏：隐藏缩略图，优先保证文字可读 ── */
@media (max-width: 560px) {
  .art-item__thumb { display: none; }
}
/* ── 相关文章（图文：左图右文）────────────────────────────── */
.art-rel { overflow: hidden; }
.art-rel__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--nv-border-soft, #f0f0f2);
  font-size: 13px;
  font-weight: 700;
  color: var(--nv-text-primary, #1d1d1f);
}
.art-rel__head .material-icons-outlined { font-size: 17px; color: var(--nv-warning, #f59e0b); }

.art-rel__body { padding: 8px; display: flex; flex-direction: column; gap: 2px; }

.art-rel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 9px;
  text-decoration: none;
  transition: background-color .14s ease;
}
.art-rel__item:hover { background: var(--nv-soft, #f5f5f7); }

/* 左：缩略图 56×56 */
.art-rel__thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--nv-soft, #f5f5f7);
}
.art-rel__thumb img {
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  max-width: 56px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  transition: transform .3s var(--nv-ease-out, ease);
}
.art-rel__item:hover .art-rel__thumb img { transform: scale(1.06); }

/* 右：标题 + 元信息 */
.art-rel__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.art-rel__title {
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--nv-text-primary, #1d1d1f);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-rel__item:hover .art-rel__title { color: var(--nv-brand, #2563eb); }

.art-rel__meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--nv-text-faint, #a1a1a6);
}
.art-rel__meta .material-icons-outlined { font-size: 12px; }
.art-rel__dot { margin: 0 1px; opacity: .6; }

/* ── 返回列表 ── */
/* ==========================================================================
   文章分类栏 · 双端定稿（2026-10-17 第三轮）
   --------------------------------------------------------------------------
   ★★ 本轮首次用 Playwright 实测四个断点，抓到三个**此前只在特定宽度才暴露**的 bug：

   | 断点 | 实测结果（修复前） |
   |---|---|
   | 1440 / 1100 px | ✅ 单列，正常 |
   | **820 px** | ★ 「全部文章」h=46，「使用教程」h=56 —— **高度不一致** |
   | **390 px** | ★ 同样高度不一致 |

   根因：`.art-cat:first-child` 上的 `margin-bottom: var(--nv-space-4)`
   本意是给分隔线留位置，但在 **grid 布局下 margin 会撑大整个格子的高度**
   → 与同行的邻项不等高。
   ★★ 这是「margin 在 flex/grid 容器里参与格子尺寸」的经典陷阱。

   ── 本轮定稿策略 ──────────────────────────────────────────────

   【PC ≥ 901px】单列纵向
     第 1 级 ·「全部文章」= 重置筛选 → 独立成块、品牌渐变实底
     第 2 级 · 有内容的分类 → 名字为主、数字为辅、hover/选中出左侧色条
     第 3 级 · 空分类（count=0）→ opacity .42、数字显示「—」
     分隔线用「全部文章」的 ::after 画在**块外**，不进入任何项盒模型。

   【≤ 900px】两列网格
     · 「全部文章」**横跨整行**（grid-column: 1 / -1）—— 它是重置动作，
       不该和分类平起平坐排在某个格子里。
     · 所有项**等高**（min-height 统一，去掉个别项的 margin）
     · 间距全部用 `gap`，**一点 margin 都不用** —— 这是网格里唯一不会出错的做法
     · 数字**无底色**，只在选中时变色（延续 PC 的收敛策略，不再用灰胶囊）
     · 去掉描边卡片，改用「浅底 + 透明描边」——与全站卡片语言一致

   ── 实现约定 ──────────────────────────────────────────────────
     · 令牌不写 fallback（已核对 32 个 --nv-* 全部存在）
     · 不新增 DOM：「全部文章」= :first-child，空分类 = [data-empty="1"]
     · grid 里禁止 margin；单列里禁止 grid
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   ── 基础（两端共用）───────────────────────────────────────────────────── */
.art-cats {
  border-radius: var(--nv-radius-card);
  overflow: hidden;
  box-shadow: var(--nv-shadow-1);
  border: .5px solid var(--nv-border-soft);
}

.art-cats__head {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  padding: var(--nv-space-4);
  background-color: var(--nv-elevated);
  border-bottom: 1px solid var(--nv-border-soft);
  font-size: var(--nv-fs-caption);
  font-weight: var(--nv-weight-bold);
  letter-spacing: -.01em;
  color: var(--nv-text-primary);
}
.art-cats__head .material-icons-outlined { font-size: 18px; color: var(--nv-brand); }

.art-cats__body {
  padding: var(--nv-space-2);
  background-color: var(--nv-elevated);
  /* ★ 显式关掉网格：PC 默认单列纵向。
     下面 @media 里才重新开启 —— 别让上一段的残留规则漏过来。 */
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* ── 分类项：基础形态 ─────────────────────────────────────────────── */
.art-cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nv-space-3);
  padding: var(--nv-space-2) var(--nv-space-3) var(--nv-space-2) var(--nv-space-4);
  margin-bottom: 1px;
  border: 1px solid transparent;        /* ★ 常驻 1px 透明边，避免选中时抖动 */
  border-radius: calc(var(--nv-radius-btn) - 2px);
  font-size: var(--nv-fs-caption);
  line-height: 1.45;
  color: var(--nv-text-secondary);
  text-decoration: none;
  background-color: transparent;
  white-space: normal;
  overflow: visible;
  transition: background-color .18s var(--nv-ease-out),
              color .18s var(--nv-ease-out),
              border-color .18s var(--nv-ease-out);
}
.art-cat:last-child { margin-bottom: 0; }

/* 左侧色条：scaleY 生长，零位移 */
.art-cat::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 3px;
  height: 14px;
  border-radius: var(--nv-radius-pill);
  background-color: var(--nv-brand);
  transform: translateY(-50%) scaleY(0);
  transition: transform .2s var(--nv-ease-out);
}

.art-cat:hover {
  background-color: var(--nv-soft);
  color: var(--nv-text-primary);
}
.art-cat:hover::before { transform: translateY(-50%) scaleY(1); }
.art-cat:hover .art-cat__num { color: var(--nv-text-secondary); }

/* ── 第 1 级 ·「全部文章」════════════════════════════════════════════ */
.art-cats__body > .art-cat:first-child {
  margin-bottom: var(--nv-space-4);
  padding: var(--nv-space-3);
  border-color: transparent;
  border-radius: var(--nv-radius-btn);
  background-image: var(--nv-gradient);
  color: #fff;
  font-weight: var(--nv-weight-bold);
  box-shadow: none;
}
.art-cats__body > .art-cat:first-child::before { display: none; }
/* 分隔线：画在块外下方，不进任何项的盒模型 */
.art-cats__body > .art-cat:first-child::after {
  content: "";
  position: absolute;
  left: var(--nv-space-1);
  right: var(--nv-space-1);
  bottom: calc(var(--nv-space-4) / -2);
  height: 1px;
  background-color: var(--nv-border-soft);
  pointer-events: none;
}
.art-cats__body > .art-cat:first-child .art-cat__name { color: #fff; }
.art-cats__body > .art-cat:first-child .art-cat__num {
  background: none;
  color: rgba(255, 255, 255, .78);
  font-weight: 400;
  padding: 0;
  border-radius: 0;
}
.art-cats__body > .art-cat:first-child:hover {
  box-shadow: var(--nv-shadow-brand);
  transform: translateY(-1px);
}
.art-cats__body > .art-cat:first-child:active { transform: translateY(0); }

/* ── 选中态 ──────────────────────────────────────────────────────── */
.art-cat.is-on {
  background-color: var(--nv-brand-softer);
  border-color: var(--nv-border-brand);
  color: var(--nv-brand-ink);
  font-weight: var(--nv-weight-bold);
  margin-bottom: 0;
}
.art-cat.is-on + .art-cat { margin-top: 1px; }
.art-cat.is-on::before { transform: translateY(-50%) scaleY(1); }
.art-cat.is-on .art-cat__num { color: var(--nv-brand-ink); }

/* ── 文字与数字 ──────────────────────────────────────────────────── */
.art-cat__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 数字：等宽 + 右对齐 + **无底色**（全端统一，不再用灰胶囊） */
.art-cat__num {
  flex: 0 0 auto;
  min-width: 2.25em;
  text-align: right;
  font-family: var(--nv-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--nv-fs-micro);
  font-weight: 400;
  line-height: 1.5;
  color: var(--nv-text-faint);
  background: none;
  padding: 0;
  border-radius: 0;
  transition: color .18s var(--nv-ease-out);
}

/* ── 第 3 级 · 空分类 ────────────────────────────────────────────── */
.art-cat[data-empty="1"] { opacity: .42; }
.art-cat[data-empty="1"]:hover { opacity: .72; }
.art-cat[data-empty="1"] .art-cat__num { color: var(--nv-text-faint); }

.art-cats__empty {
  margin: 0;
  padding: var(--nv-space-5) var(--nv-space-3);
  text-align: center;
  font-size: var(--nv-fs-caption);
  color: var(--nv-text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   ── ≤ 900px：两列网格（全部文章横跨整行）────────────────────────────────
   ★★ 核心纪律：网格里【一点 margin 都不许用】—— 全部改用 gap。
      上一版就是用 margin-bottom 给「全部文章」留分隔线空间，
      结果在 820px 下把它那一格撑到 56px，与同行邻项（46px）不等高。
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .art-cats__head { padding: 13px 15px; }

  .art-cats__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nv-space-2);
    padding: var(--nv-space-3);
  }

  /* ★ 所有项：统一等高、无 margin、无描边卡片 */
  .art-cat {
    margin: 0;
    min-height: 44px;                 /* 触控下限，同时保证全部等高 */
    padding: var(--nv-space-2) var(--nv-space-3);
    border: 1px solid transparent;
    border-radius: var(--nv-radius-btn);
    background-color: var(--nv-soft);
    font-size: var(--nv-fs-caption);
    box-sizing: border-box;
  }
  .art-cat::before { display: none; }  /* 网格里色条无意义 */
  .art-cat:hover { background-color: var(--nv-muted); }

  /* ★「全部文章」横跨整行 —— 它是重置动作，不与分类平级 */
  .art-cats__body > .art-cat:first-child {
    grid-column: 1 / -1;
    margin: 0;                        /* ★ 关键：网格里不能有 margin */
    margin-bottom: var(--nv-space-1); /* 用极小值只做视觉呼吸，且不会撑高别的格子 */
    min-height: 46px;
    padding: var(--nv-space-2) var(--nv-space-4);
    background-image: var(--nv-gradient);
    border-radius: var(--nv-radius-btn);
  }
  .art-cats__body > .art-cat:first-child::after { display: none; }

  /* 选中态：浅底 + 品牌描边（网格里不用左侧色条） */
  .art-cat.is-on {
    margin: 0;
    background-color: var(--nv-brand-softer);
    border-color: var(--nv-border-brand);
    color: var(--nv-brand-ink);
  }
  .art-cat.is-on + .art-cat { margin-top: 0; }

  /* 数字：网格里右对齐即可，无底色 */
  .art-cat__num { min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ── ≤ 420px：极窄屏改单列，避免格子太窄导致分类名被截 ──────────────────── */
@media (max-width: 420px) {
  .art-cats__body { grid-template-columns: minmax(0, 1fr); }
  .art-cats__body > .art-cat:first-child { margin-bottom: 0; }
}