/* ============================================================
   社区化提案 v3 · 精确复刻样式表（2026-10-26）
   对应设计稿：design/proposal-community-v3.html
     画板 A · 桌面首页（1440）
     画板 B · 桌面帖子详情
     画板 C · 移动端首页（390）

   为什么单独开一个文件、而不是继续往 website-site.css 里塞：
   website.css 是原型的**逐字节副本**（不许改），website-site.css 是全站共用片段的
   适配层（2125 行，已经在服务 20+ 个页面）。提案 v3 的桌面/移动两套版式是**整页**
   级别的重构，塞进共用层会让「一个类名改一处、全站 20 个页面跟着变」。

   作用域约定（关键）：
     .v3   —— 桌面端（画板 A / B）。由 templates/website/post/{list,detail}.html
              通过 {% block body_class %}v3 v3-home / v3 v3-detail{% endblock %} 挂上。
     .v3m  —— 移动端（画板 C）。由 templates/mobile/post/list.html 挂上。
   所有规则都写在这两个作用域内，**不污染**其它页面（website.css / website-site.css /
   mobile.css 里已有的同名类如 .row / .tabs / .crumb / .field 都不会被误伤）。

   色板：严格照搬提案 09-30 实测，零新增颜色。
     页面底 #f7f7f5 / 卡片 #fff / 发丝线 #ececea
     普鲁士蓝 #326891（深 #24506f / 浅印 #e9f0f6）/ 链接蓝 #0067c0
     橙红 #c7593e（浅底 #fdf3ef）/ 中性底 #f2f2f0 / 描边 #e0e0e0
   两处刻意偏离提案（都是 WCAG AA 硬约束，不是审美选择）：
     ① 在线绿 #2f9e44 → #2e7d32：#2f9e44 在白底仅 3.4:1，12px 小字不达 AA；
        #2e7d32 为 5.1:1。已在 MEMORY 记档。
     ② 移动段弱化文字：走 mobile.css 的 --color-fade（浅 #707070 / 暗 #939393），
        不用桌面提案的 #9a9a9a（白底仅 2.81:1）。
   桌面段仍保留 #9a9a9a：它与 website-site.css 已上线的整站 chrome（.pulse-latest /
   .breadcrumb / .shead small / .count-badge.zero / .rank-no）同色，改一边就会让
   新组件和存量组件对不上，且站长已确认「严格照搬提案色板」。全局改灰需单独决策。
   已知取舍（保留提案原值，未改）：头像首字母色块 .a-3 #2f9e44（白字 3.45:1）、
   .a-4 #c29b40（白字 2.61:1）——头像字母属装饰性标识（等同一张头像图），
   桌面端作者名始终并列显示。若要达 AA，需站长授权把这两个色块压暗。
   ============================================================ */

/* ------------------------------------------------------------
   0. 设计令牌
   ------------------------------------------------------------ */
.v3,
.v3m {
  /* 底与面 */
  --v3-page: #f7f7f5;
  --v3-card: #ffffff;
  --v3-line: #ececea;        /* 卡片外框 */
  --v3-line-soft: #f0f0ee;   /* 列表行 / 卡内分隔 */
  --v3-hover: #f5f5f3;       /* 行 hover 底 */
  --v3-neutral: #f2f2f0;     /* 中性 chip 底 */
  --v3-border: #e0e0e0;      /* 输入框 / 次按钮描边 */

  /* 文字 */
  --v3-ink: #121212;
  --v3-ink-2: #5a5a5a;
  --v3-ink-3: #9a9a9a;

  /* 主色（普鲁士蓝三阶） */
  --v3-blue: #326891;
  --v3-blue-deep: #24506f;
  --v3-blue-pale: #e9f0f6;

  /* 语义色 */
  --v3-link: #0067c0;
  --v3-red: #c7593e;
  --v3-red-pale: #fdf3ef;
  --v3-green: #2e7d32;

  /* 字体 */
  --v3-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --v3-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------
   1. 画板 A · 桌面首页
   ------------------------------------------------------------ */

/* 1.1 顶栏（提案 .topbar）：白底 + 发丝线 + 56px 内容高
   —— 结构仍由 templates/website/base.html 提供（全站共用），
   这里只把提案的尺寸/色值落上去，不改 DOM。 */
.v3 .topnav {
  background: #ffffff;
  border-bottom: 1px solid var(--v3-line);
}
.v3 .topnav-inner {
  max-width: 1200px;
  height: 56px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
/* 品牌：提案 .brand .seal（30px 普鲁士蓝方块）+ .name（18px/800） */
.v3 .logo { gap: 9px; }
.v3 .logo-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--v3-blue);
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}
.v3 .logo-text { font-size: 18px; font-weight: 800; line-height: 1.2; }
/* 提案的品牌只有「印章 + 站名」，没有副标 —— v3 页面隐藏副标 */
.v3 .logo-slogan { display: none; }

/* 栏目导航：提案 .nav a.on = 普鲁士蓝字 + 浅蓝胶囊 + 600 */
.v3 .nav-links { gap: 2px; }
.v3 .nav-links a {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--v3-ink-2);
  border-radius: 4px;
  border-bottom: 0;
}
.v3 .nav-links a:hover { color: var(--v3-blue); }
.v3 .nav-links a.active {
  color: var(--v3-blue);
  background: var(--v3-blue-pale);
  font-weight: 600;
  border-bottom: 0;
}

/* 搜索框：提案 .top-right input（190×32 / #f2f2f0 底 / 6px 圆角） */
.v3 .search input {
  width: 190px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  background: var(--v3-neutral);
  border: 1px solid var(--v3-border);
  border-radius: 6px;
}
.v3 .search input::placeholder { color: var(--v3-ink-3); }

/* 未登录态：提案 .btn-login（文字链）+ .btn-solid（实底蓝按钮） */
.v3 .auth-btns { gap: 10px; }
.v3 .auth-btns .top-login {
  padding: 0;
  font-size: 13px;
  color: var(--v3-ink-2);
  background: none;
  border: 0;
  border-radius: 0;
}
.v3 .auth-btns .top-login:hover { color: var(--v3-blue); background: none; }
.v3 .auth-btns .top-register {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--v3-blue);
  border: 0;
  border-radius: 6px;
  line-height: 32px;
  transition: transform .12s ease, background .15s ease;
}
.v3 .auth-btns .top-register:hover { background: var(--v3-blue-deep); color: #ffffff; }
.v3 .auth-btns .top-register:active { transform: scale(.97); }

/* 1.2 社区脉搏条（提案 .pulse）：贴在顶栏下的白条
   —— DOM 由 base.html 提供（context_processor: community_pulse），
   这里只做提案的尺寸/间距对齐。 */
.v3 .pulse { background: #ffffff; border-bottom: 1px solid var(--v3-line); }
.v3 .pulse-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: var(--v3-ink-2);
}
.v3 .pulse-in b { color: var(--v3-ink); font-weight: 700; }
.v3 .pulse-live { color: var(--v3-green); }
.v3 .pulse-live b { color: var(--v3-green); }
.v3 .pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v3-green);
  margin-right: 5px;
  vertical-align: 1px;
}
.v3 .pulse-sep { color: var(--v3-line); }
.v3 .pulse-latest { margin-left: auto; color: var(--v3-ink-3); }
.v3 .pulse-latest:hover { color: var(--v3-link); }

/* 1.3 骨架（提案 .columns）：内容区 1200px + 右栏 340px + 20px 间距 */
.v3 .columns {
  max-width: 1200px;
  margin: 18px auto 0;
  padding: 0 10px 40px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.v3 .main { flex: 1 1 auto; min-width: 0; }
.v3 .side { flex: 0 0 340px; }

/* 1.4 介绍卡（提案 .hero） */
.v3 .hero {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 6px;
  padding: 20px 24px;
  margin-bottom: 14px;
}
.v3 .hero h2 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.v3 .hero .desc { font-size: 13px; color: var(--v3-ink-2); line-height: 1.7; margin: 0; }
.v3 .hero ol {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.v3 .hero li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: var(--v3-ink-2);
  align-items: baseline;
}
.v3 .hero li i {
  font-style: normal;
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--v3-neutral);
  border-radius: 4px;
  font-family: var(--v3-mono);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--v3-ink-2);
}
.v3 .hero .cta { display: flex; gap: 10px; margin-top: 4px; }

/* 主按钮（提案 .btn-solid）：实底普鲁士蓝 + 6px + 按下缩放 */
.v3 .btn-solid {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--v3-blue);
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease;
}
.v3 .btn-solid:hover { background: var(--v3-blue-deep); color: #ffffff; }
.v3 .btn-solid:active { transform: scale(.97); }
.v3 .btn-solid.lg { height: 36px; padding: 0 20px; }

/* 次按钮（提案 .btn-ghost2）：透明底 + 描边 */
.v3 .btn-ghost2 {
  height: 36px;
  padding: 0 18px;
  font-size: 13px;
  color: var(--v3-ink-2);
  background: transparent;
  border: 1px solid var(--v3-border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.v3 .btn-ghost2:hover { color: var(--v3-blue); border-color: var(--v3-blue); }

/* 1.4b 站内提示条（引导条 / 欢迎语）：不是介绍卡，用独立类避免混用 .hero */
.v3 .v3-notice {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--v3-ink-2);
  line-height: 1.6;
}
.v3 .v3-notice.warm { background: #faf8f5; border-color: #f0ebe0; }

/* 1.4c 官方每日精选（运营打标位，设计稿没有，站点功能不能丢）
   —— 白卡 + 13px 粗标题，条目一行一条：标题可点 + 右侧作者 */
.v3 .picks {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.v3 .picks-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--v3-ink);
  margin-bottom: 8px;
}
.v3 .picks .pick-list { list-style: none; margin: 0; padding: 0; }
.v3 .picks .pick-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 1px solid var(--v3-line-soft);
}
.v3 .picks .pick-item:last-child { border-bottom: 0; }
.v3 .picks .pick-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--v3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3 .picks .pick-title:hover { color: var(--v3-blue); }
.v3 .picks .pick-author {
  flex: none;
  font-size: 12px;
  color: var(--v3-ink-3);
  white-space: nowrap;
}

/* 1.5 排序 Tab（提案 .tabs）：白卡 + 顶部圆角，激活为普鲁士蓝下划线 */
.v3 .tabs {
  display: flex;
  gap: 2px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 6px 6px 0 0;
  padding: 0 8px;
}
.v3 .tabs a {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--v3-ink-2);
  border-bottom: 2px solid transparent;
  position: relative;
  top: 1px;
  text-decoration: none;
}
.v3 .tabs a:hover { color: var(--v3-blue); }
.v3 .tabs a.on {
  color: var(--v3-blue);
  font-weight: 700;
  border-bottom-color: var(--v3-blue);
}

/* 1.6 分类 chips（提案 .chip-row）：链接蓝字 + 中性底 */
.v3 .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-top: 0;
  padding: 9px 12px;
}
.v3 .chip-row a {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 4px;
  color: var(--v3-link);
  background: var(--v3-neutral);
  text-decoration: none;
}
.v3 .chip-row a:hover { background: var(--v3-blue-pale); }
.v3 .chip-row a.on {
  color: #ffffff;
  background: var(--v3-blue);
  font-weight: 600;
}

/* 1.7 列表（提案 .rows + .row）：白卡容器 + 发丝线分行 + hover 浅底 */
.v3 .rows {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.v3 .row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--v3-line-soft);
  text-decoration: none;
  color: inherit;
}
.v3 .row:last-child { border-bottom: 0; }
.v3 .row:hover { background: var(--v3-hover); }

/* 方形头像（提案 .ava）：6px 圆角，色阶由 .a-1 ~ .a-6 给 */
.v3 .ava {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
}
.v3 .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3 .ava.a-1 { background: #326891; }
.v3 .ava.a-2 { background: #24506f; }
.v3 .ava.a-3 { background: #2f9e44; }
.v3 .ava.a-4 { background: #c29b40; }
.v3 .ava.a-5 { background: #b22222; }
.v3 .ava.a-6 { background: #5a5a5a; }

.v3 .row-main { flex: 1 1 auto; min-width: 0; }
.v3 .row-title {
  font-size: 15px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--v3-ink);
}
.v3 .row:hover .row-title { color: var(--v3-blue); }
.v3 .row-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--v3-ink-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.v3 .row-meta .cat { color: var(--v3-link); }
.v3 .row-meta .t { font-family: var(--v3-mono); font-size: 11px; }
.v3 .row-meta b { color: var(--v3-ink-2); font-weight: 500; }
.v3 .row-meta .meta-ico { display: inline-flex; align-items: center; gap: 4px; }
.v3 .row-meta .meta-ico .ifi { width: 13px; height: 13px; flex: none; color: var(--v3-ink-3); }

/* 右侧回复数徽标（提案 .count-badge）：等宽数字 + hover 变蓝 */
.v3 .count-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 7px;
  background: var(--v3-neutral);
  border-radius: 4px;
  font-family: var(--v3-mono);
  font-size: 13px;
  color: var(--v3-ink-2);
}
.v3 .count-badge.zero { color: var(--v3-ink-3); }
.v3 .row:hover .count-badge { background: var(--v3-blue-pale); color: var(--v3-blue); }

/* 列表里的徽章（置顶 / 精华 / 求助 …）：沿用全站口径，v3 只调圆角与字号 */
.v3 .badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
}

/* 1.7.1 神评论（行内形态）—— 2026-10-26 站长指示：「放在标题下面的栏目、作者那一行，
   跟这一行同位显示」。

   ⚠️ 形制来源：website-site.css §35 的「神评论置顶条」是**独占一栏的 pull-quote 整块**
   （渐变底 + 左侧 3px 紫引导条 + 装饰引号 ::before + 两行 clamp 正文 + 底部 meta 行）。
   那套形制在「单独成栏」时成立；一旦压进 meta 行（作者那一行）就会撑破行高，
   引号和左缘条也会挤乱整行节奏。

   所以这里在 .v3 作用域内把神评论改写为**行内 chip**：
   - 去掉 pull-quote 的块级外壳（渐变底 / 描边 / 圆角 / ::before 大引号 / ::after 左缘条）
   - 徽标缩为 10px 的实心紫角标，正文单行 clamp
   - 票数 + 神评作者压成一行尾部，灰化到 ink-3，不与作者名抢视觉
   - 与作者名之间用 · 分隔（跟 meta 行既有的分隔符一致）

   ⚠️ 只在 .v3 内覆盖：classic / kimi 皮肤仍走 website-site.css §35 的整块形态，
   两个皮肤互不影响。 */
.v3 .row-meta .post-divine {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-size: 12px;
  line-height: 1.35;
  color: var(--v3-ink-3);
  animation: none;
  vertical-align: middle;
  /* ⚠️ flex-basis 必须给 0（不是 auto）：
     flex 的「换行判定」发生在「收缩」之前，用的是 hypothetical main size
     （= flex-basis 被 min/max 夹住后的值）。若 basis:auto，chip 的 hypothetical
     宽度 = 内容宽（约 376px），加上前面分类/时间/作者约 225px > 行宽 594px，
     整块 chip 就被判为「放不下」→ 挤到第二行，作者行断成两行。
     basis:0 让 hypothetical = 0 → 永不触发换行；再由 grow 分配剩余空间，
     max-width 封顶保证宽屏下 chip 不会被拉得过长（chip 无底色无边框，
     留白在视觉上不可见）。 */
  min-width: 0;
  flex: 1 1 0%;
  max-width: 30em;
}
/* 去掉 pull-quote 的装饰引号与左侧紫引导条 */
.v3 .row-meta .post-divine::before,
.v3 .row-meta .post-divine::after { content: none; }

/* 徽标：绝对定位改为行内实心紫角标 */
.v3 .row-meta .post-divine .badge-divine {
  position: static;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* 行高与徽标字号一起压到 1.2：徽标是 chip 里最高的元素，
     不压行高整个列表行会凭空长高（实测 64px → 69px），行距就齐了 */
  line-height: 1.2;
  border-radius: 3px;
  background: #7b1fa2;
  color: #ffffff;
  box-shadow: none;
  flex: none;
}

/* 正文：两行 clamp 改单行 clamp，行内不断行。
   ⚠️ 颜色用 ink（#121212，19.9:1）而不是 ink-3：神评正文是这一行里的**高亮内容**，
   比周围 meta 灰要重；而 11px 的 @神评作者用 ink-3（#9a9a9a）只有 2.81:1 不达 AA，
   故作者名改用 ink-2（#5a5a5a，6.90:1）。 */
.v3 .row-meta .post-divine-text {
  display: block;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--v3-ink);
  position: static;
  z-index: auto;
  flex: 1 1 auto;
  min-width: 0;
  /* 上限给 22em：这是「神评正文该有多长」的编辑上限；
     真正的宽度约束由外层 chip（flex:1 1 0% + max-width）决定，
     窄屏时 chip 收窄，正文靠 ellipsis 收尾，不会撑破作者行。 */
  max-width: 22em;
  /* 行高压到 1.35：让整个 chip 的高度不超过 meta 行原有的 16px 行盒，
     否则列表行会凭空长高 5px（实测 64px → 69px），行距不齐。 */
  line-height: 1.35;
}

/* 票数 + 神评作者：压成行尾，灰化一档，不与作者名抢主视觉 */
.v3 .row-meta .post-divine-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--v3-ink-2);
  flex: none;
}
.v3 .row-meta .post-divine-votes { color: #7b1fa2; font-weight: 600; }
.v3 .row-meta .post-divine-author { color: var(--v3-ink-2); font-size: 11px; }

/* hover：徽标微浮起（§35 整块形态的微互动保留，行内形态改成不改变文字对比度） */
.v3 .row:hover .row-meta .post-divine .badge-divine {
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(123, 31, 162, 0.3);
}
.v3 .row-meta .post-divine .badge-divine {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* 窄屏：神评论正文进一步压缩，避免把作者行挤到换行 */
@media (max-width: 900px) {
  .v3 .row-meta .post-divine-text { max-width: 14em; }
}

/* 1.7.2 列表页复用基因（搜索 / 标签 / 用户主页 / 订阅动态 / 话题页 / 发现页）
   —— 这几处的列表都嵌在既有 .card 容器里，卡片边框由外层 card 提供，
   因此 .rows 要去掉自身的卡边框与圆角，只保留行的发丝线（否则会「卡中卡」）。
   行内元素（.ava / .row-title / .row-meta / .cat / .t / .count-badge /
   神评论行内 chip）全部与 1.7 段同源，改样式只需改这一处。
   ⚠️ 行左右 padding 归零是为了让行内容（头像 / 标题）与卡片里的标题、Tab 左对齐，
   不要再给行加左右 padding，否则列表会比标题多缩进一截。 */
.v3 .rows.plain { background: transparent; border: 0; border-radius: 0; }
.v3 .rows.plain .row { padding-left: 0; padding-right: 0; }

/* 摘要行：首页按设计稿不带摘要，其余列表页保留（搜索要靠摘要判断相关性）。
   单行截断 + 三级灰，避免把行撑高。 */
.v3 .row-excerpt {
  margin-top: 2px;
  font-size: 12px;
  color: var(--v3-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 列表页里的 tabs / chips 也不做成卡片：外层 card 已经给了边框，
   这里只保留「激活项蓝字 + 蓝下划线」这个基因，避免卡片套卡片。
   （首页的 .tabs / .chip-row 与 .rows 是上下扣成一整张卡的，两者形态不同。） */
.v3 .tabs.plain {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  border-bottom: 1px solid var(--v3-line);
  gap: 4px;
}
.v3 .tabs.plain a { padding: 8px 12px; }
.v3 .chip-row.plain { background: transparent; border: 0; padding: 9px 0; }

/* 列表页通用排版：这些页原本用内联 style 把字号颜色写死，基因散在各处，
   统一到 v3 色阶后改配色只需改变量。 */
.v3 .v3-title { font-size: 20px; font-weight: 800; color: var(--v3-ink); margin: 0 0 4px; }
.v3 .v3-sub { font-size: 12px; color: var(--v3-ink-3); margin: 0 0 12px; }
.v3 .v3-empty { text-align: center; padding: 24px 0; font-size: 13px; color: var(--v3-ink-3); }
.v3 .v3-empty a { color: var(--v3-link); }
.v3 .v3-more { text-align: center; padding: 12px 0; font-size: 13px; color: var(--v3-ink-3); }
.v3 .v3-more a { color: var(--v3-link); }

/* 1.7.3 紧凑媒体行（产品 / 资源在标签页、搜索、产品库、资源库里的行形态）
   —— 与帖子行 .row 同构：左侧方图 + 主区（标题 + 一行摘要）+ 右侧计数，
   只是把方形头像换成 40px 方图。原先各页有的用 60px 大图卡片、有的用 40px
   紧凑行，同一类内容两种密度，统一到这一处。 */
.v3 .media-row {
  display: flex;
  gap: 12px;
  align-items: center;
  /* 左右内边距由外层 card 统一给（card 用 padding:0 16px），
     否则产品行会比帖子行 .row 多缩进 16px，两栏对不齐。 */
  padding: 12px 0;
  border-bottom: 1px solid var(--v3-line-soft);
  color: inherit;
  text-decoration: none;
}
.v3 .media-row:last-child { border-bottom: 0; }
.v3 .media-row:hover { background: var(--v3-hover); }
.v3 .media-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.v3 .media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 关注 / 粉丝行把 _avatar.html 塞进来：该片段自带 inline 宽高与圆形圆角，
   这里强制铺满方形 thumb，否则同一列里头像有圆有方、尺寸还不齐。 */
.v3 .media-thumb .avatar-img,
.v3 .media-thumb .avatar-letter {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
  font-size: 16px !important;
}
.v3 .media-main { flex: 1 1 auto; min-width: 0; }
.v3 .media-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--v3-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3 .media-desc {
  font-size: 12px;
  color: var(--v3-ink-2);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3 .media-side { flex: none; font-size: 12px; color: var(--v3-ink-3); }
.v3 .media-side .meta-ico + .meta-ico { margin-left: 8px; }
.v3 .media-row:hover .media-title { color: var(--v3-blue); }
/* 可选的第三行：搜索结果要显示 @作者 · 时间，标签页不需要，所以做成可选 */
.v3 .media-meta { margin-top: 2px; font-size: 11px; color: var(--v3-ink-3); }

/* 1.7.4 分类网格（趣处索引页 / 发现页的 .cat-grid + .cat-card）
   —— 原型是 8px 圆角 + #eee 边框、hover 只换边框色；统一到 v3 的 6px + #ececea，
   hover 给浅底（与列表行 .row:hover 同一个反馈语言）。列宽改成自适应填充，
   窄屏不用再靠媒体查询一列列砍。 */
.v3 .cat-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.v3 .cat-card {
  border-radius: 6px;
  border-color: var(--v3-line);
  padding: 14px 16px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.v3 .cat-card:hover { background: var(--v3-hover); border-color: var(--v3-border); }
.v3 .cat-card .tag { color: var(--v3-ink); font-weight: 700; font-size: 14px; }
.v3 .cat-desc { font-size: 12px; color: var(--v3-ink-2); margin-top: 8px; }
.v3 .v3-h3 { font-size: 14px; font-weight: 800; color: var(--v3-ink); margin: 20px 0 12px; }

/* 产品库列表行右侧的「直达官网」小按钮：产品行是 <div> 而不是 <a>
   （行内要同时嵌详情页链接和站内 /go 计数外链，整行包 <a> 会禁止嵌套外链），
   所以这个按钮单独给一套样式，不复用 .media-row 的整行链接态。 */
.v3 .media-go {
  flex: none;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v3-border);
  border-radius: 6px;
  color: var(--v3-ink-3);
  font-size: 13px;
  text-decoration: none;
}
.v3 .media-go:hover { background: var(--v3-hover); color: var(--v3-blue); }

/* 1.8 翻页（提案 .pager）：描边小方块，当前页实底蓝 */
.v3 .pager {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
  flex-wrap: wrap;
}
.v3 .pager a,
.v3 .pager span {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v3-border);
  border-radius: 4px;
  font-size: 12px;
  color: var(--v3-ink-2);
  background: #ffffff;
  text-decoration: none;
}
.v3 .pager a:hover { background: var(--v3-hover); color: var(--v3-blue); }
.v3 .pager a.on,
.v3 .pager .page-current {
  background: var(--v3-blue);
  color: #ffffff;
  border-color: var(--v3-blue);
  font-weight: 700;
}
.v3 .pager .page-gap,
.v3 .pager .is-disabled {
  border-color: transparent;
  background: none;
  color: var(--v3-ink-3);
}

/* 1.9 侧栏卡（提案 .scard） */
.v3 .scard {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 6px;
  margin-bottom: 14px;
}
.v3 .scard .inner { padding: 16px 18px; }
.v3 .shead {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--v3-ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.v3 .shead small { font-size: 11px; color: var(--v3-ink-3); font-weight: 400; }
.v3 .shead small a { color: var(--v3-blue); }

/* 1.10 登录卡（提案 .field + .btn-block + .sub-links） */
.v3 .field { margin-bottom: 10px; }
.v3 .field input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--v3-border);
  background: var(--v3-neutral);
  border-radius: 6px;
  padding: 0 12px;
  font-size: 13px;
  font-family: inherit;
}
.v3 .field input::placeholder { color: var(--v3-ink-3); }
.v3 .btn-block {
  width: 100%;
  height: 36px;
  color: #ffffff;
  background: var(--v3-blue);
  border: 0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  line-height: 36px;
  transition: background .15s ease;
}
.v3 .btn-block:hover { background: var(--v3-blue-deep); color: #ffffff; }
.v3 .sub-links {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--v3-ink-3);
  margin-top: 10px;
}
.v3 .sub-links a { color: var(--v3-blue); }

/* 1.11 今日热榜（提案 .rank）：前三名橙红印章号 */
.v3 .rank { display: flex; flex-direction: column; gap: 2px; }
.v3 .rank-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 5px 6px;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
}
.v3 .rank-item:hover { background: var(--v3-hover); }
.v3 .rank-no {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: var(--v3-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--v3-ink-3);
}
.v3 .rank-item.top .rank-no { background: var(--v3-red); color: #ffffff; }
.v3 .rank-item .rt {
  font-size: 13px;
  font-weight: 500;
  color: var(--v3-ink);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v3 .rank-item .rt:hover { color: var(--v3-blue); }
.v3 .rank-item .rm {
  font-size: 11px;
  color: var(--v3-ink-3);
  font-family: var(--v3-mono);
  margin-top: 2px;
  flex: none;
}

/* 1.12 本周活跃（提案 .crowd + .names）：头像堆叠 + 发帖回复榜 */
.v3 .wk-crowd { display: flex; margin-bottom: 12px; }
.v3 .wk-crowd > * { margin-left: -9px; }
.v3 .wk-crowd > *:first-child { margin-left: 0; }
.v3 .wk-crowd .ava,
.v3 .wk-crowd .avatar-img,
.v3 .wk-crowd .avatar-letter {
  width: 32px;
  height: 32px;
  font-size: 12px;
  border: 2px solid #ffffff;
  border-radius: 6px;
}
.v3 .wk-more-ava {
  flex: none;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--v3-neutral);
  color: var(--v3-ink-2);
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v3 .wk-list { font-size: 12px; color: var(--v3-ink-2); line-height: 2.1; }
.v3 .wk-row { display: flex; align-items: baseline; gap: 8px; }
.v3 .wk-name { color: var(--v3-ink); font-weight: 600; }
.v3 .wk-name:hover { color: var(--v3-blue); }
.v3 .wk-meta { margin-left: auto; font-size: 11px; color: var(--v3-ink-2); white-space: nowrap; }
.v3 .wk-num {
  color: var(--v3-link);
  font-weight: 700;
  font-family: var(--v3-mono);
}

/* 1.13 热门趣处（提案 .seals） */
.v3 .seals { display: flex; flex-wrap: wrap; gap: 7px; }
.v3 .seals a {
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 4px;
  color: var(--v3-link);
  background: var(--v3-neutral);
  text-decoration: none;
}
.v3 .seals a:hover { background: var(--v3-blue-pale); }

/* ------------------------------------------------------------
   2. 画板 B · 桌面帖子详情
   ------------------------------------------------------------ */

/* 2.1 面包屑（提案 .crumb） */
.v3 .crumb {
  font-size: 12px;
  color: var(--v3-ink-3);
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.v3 .crumb a { color: inherit; text-decoration: none; }
.v3 .crumb a:hover { color: var(--v3-blue); }
.v3 .crumb b { color: var(--v3-blue); font-weight: 500; }
.v3 .crumb .crumb-back { margin-left: auto; color: var(--v3-blue) !important; }

/* 2.2 主卡（提案 .dcard） */
.v3 .dcard {
  background: var(--v3-card);
  border: 1px solid var(--v3-line);
  border-radius: 6px;
  padding: 22px 26px 14px;
}
/* 求助 / 求推荐徽标独立在标题**之前**（tests/test_help_best_answer.py 断言的顺序），
   这里只补它与标题之间的呼吸位。 */
.v3 .dcard > .badge { display: inline-block; margin-bottom: 6px; }
/* 2.3 标题（提案 .dtitle） */
.v3 .dtitle {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 2px;
  color: var(--v3-ink);
}
/* 2.4 作者行（提案 .author） */
.v3 .author {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--v3-line-soft);
}
.v3 .author .ava { width: 34px; height: 34px; font-size: 14px; }
.v3 .author .nm { font-weight: 700; font-size: 13px; color: var(--v3-ink); }
.v3 .author .mt { font-size: 12px; color: var(--v3-ink-3); margin-top: 2px; }
.v3 .author .mt .ip {
  background: var(--v3-neutral);
  padding: 1px 6px;
  border-radius: 4px;
}
.v3 .author .mt .t { font-family: var(--v3-mono); }

/* 2.5 正文（提案 .prose） */
.v3 .prose {
  padding: 16px 0 6px;
  font-size: 14px;
  line-height: 1.9;
  max-width: 46em;
  color: var(--v3-ink);
}
.v3 .prose a { color: var(--v3-link); }
.v3 .prose .k { background: var(--v3-blue-pale); padding: 0 3px; border-radius: 3px; }
.v3 .markdown_body { font-size: 14px; line-height: 1.9; color: var(--v3-ink); max-width: 46em; }
.v3 .markdown_body a { color: var(--v3-link); }

/* 2.6 隐藏内容盒（提案 .gated） */
.v3 .gated {
  margin-top: 12px;
  border: 1px dashed var(--v3-red);
  background: var(--v3-red-pale);
  padding: 11px 13px;
  font-size: 13px;
  color: var(--v3-red);
  border-radius: 4px;
}

/* 2.7 操作栏（提案 .actions + .act + .tagline） */
.v3 .actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 0 14px;
  border-top: 1px solid var(--v3-line-soft);
  flex-wrap: wrap;
}
.v3 .act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 7px 14px;
  border: 1px solid var(--v3-border);
  border-radius: 4px;
  color: var(--v3-ink-2);
  background: #ffffff;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, color .15s ease, background .15s ease;
}
.v3 .act:active { transform: scale(.97); }
.v3 .act:hover { color: var(--v3-blue); border-color: var(--v3-blue); }
.v3 .act .tri {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid currentColor;
}
.v3 .act.liked {
  color: var(--v3-red);
  background: var(--v3-red-pale);
  border-color: var(--v3-red);
  font-weight: 700;
}
/* like.js 无刷新点赞时切的是 .is-liked（不是服务端的 .liked），两套都要认 */
.v3 .act.is-liked {
  color: var(--v3-red);
  background: var(--v3-red-pale);
  border-color: var(--v3-red);
  font-weight: 700;
}
.v3 .act .n { font-family: var(--v3-mono); font-weight: 700; }
.v3 .tagline { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.v3 .tagline a {
  font-size: 11px;
  color: var(--v3-link);
  background: var(--v3-neutral);
  padding: 2px 9px;
  border-radius: 4px;
  text-decoration: none;
}
.v3 .tagline a:hover { background: var(--v3-blue-pale); }

/* 2.8 回复区（提案 .rhead + .reply + .who + .op）
   评论条目由共用片段 partials/_comment_item.html 渲染（楼中楼契约不可改），
   实际类名是 .reply-main / .reply-head / .reply-body，这里按它们对齐提案的排版。 */
.v3 .rhead {
  border-top: 2px solid var(--v3-line);
  padding: 12px 2px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--v3-ink);
}
.v3 .rhead .mono { color: var(--v3-ink-2); font-family: var(--v3-mono); }
.v3 .reply {
  display: flex;
  gap: 10px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--v3-line-soft);
}
.v3 .reply:last-child { border-bottom: 0; }
/* 头像 28px（提案 .reply .ava）：片段里写死了 36px 的内联宽高，只能用 !important 覆盖 */
.v3 .reply .reply-avatar {
  width: 28px !important;
  height: 28px !important;
  font-size: 12px !important;
  border-radius: 4px;
}
.v3 .reply .reply-head { font-size: 12px; color: var(--v3-ink-3); }
.v3 .reply .reply-head strong a { color: var(--v3-ink); font-weight: 600; }
.v3 .reply .reply-head .ip-region {
  background: var(--v3-neutral);
  padding: 1px 6px;
  border-radius: 4px;
}
.v3 .reply .reply-head .no { font-family: var(--v3-mono); }
/* 楼主标记（提案 .reply .who .op）：片段用的是 .op-badge */
.v3 .reply .op-badge,
.v3 .op-badge {
  color: var(--v3-blue);
  background: var(--v3-blue-pale);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 600;
  display: inline-block;
}
.v3 .reply .reply-body { font-size: 13px; line-height: 1.75; margin-top: 3px; color: var(--v3-ink); }
.v3 .reply .reply-body p { margin: 0 0 6px; }
/* 楼中楼：缩进 + 左侧规线（提案的「卷首规线」在嵌套层同样成立） */
.v3 .reply-nested { padding-left: 12px; }
.v3 .reply-list { border-left: 2px solid var(--v3-line); padding-left: 10px; margin: 4px 0 6px 4px; }

/* 2.9 侧栏作者卡（提案 .author-card） */
.v3 .author-card { text-align: center; }
.v3 .author-card .big-ava {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  margin: 2px auto 10px;
  font-size: 26px;
}
.v3 .author-card .nm { font-weight: 700; font-size: 15px; color: var(--v3-ink); }
.v3 .author-card .bio {
  font-size: 12px;
  color: var(--v3-ink-3);
  margin: 6px 0 10px;
  line-height: 1.6;
}
.v3 .author-stat-row {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 11px;
  color: var(--v3-ink-3);
  font-family: var(--v3-mono);
  margin-bottom: 12px;
}
.v3 .author-stat-row b { display: block; font-size: 15px; color: var(--v3-ink); }

/* 2.10 相关话题 / 社区规范 等侧栏文字块 */
.v3 .side-list { font-size: 13px; line-height: 1.9; }
.v3 .side-list a { display: block; color: var(--v3-blue); font-weight: 500; }
.v3 .side-list a:hover { color: var(--v3-blue-deep); }
.v3 .side-text { font-size: 12px; color: var(--v3-ink-2); line-height: 1.7; }

/* ------------------------------------------------------------
   3. 响应式（画板 A/B 的窄屏降级）
   ------------------------------------------------------------ */

/* ≤1200px：内容区随视口收缩，右栏先让位给主栏 */
@media (max-width: 1200px) {
  .v3 .columns { max-width: 100%; }
}

/* ≤900px：两栏堆叠（提案自带的降级规则） */
@media (max-width: 900px) {
  .v3 .columns { flex-direction: column; }
  .v3 .side { flex: none; width: 100%; }
  .v3 .dcard { padding: 18px 16px 12px; }
  .v3 .dtitle { font-size: 19px; }
  .v3 .pulse-in { flex-wrap: wrap; gap: 8px 16px; }
  .v3 .pulse-latest { margin-left: 0; }
}

/* ≤560px：手机上打开桌面页（tablet/desktop UA 未被识别时的兜底） */
@media (max-width: 560px) {
  .v3 .topnav-inner { gap: 10px; padding: 0 12px; }
  .v3 .search input { width: 130px; }
  .v3 .row { padding: 10px 12px; gap: 10px; }
  .v3 .ava { width: 34px; height: 34px; font-size: 13px; }
  .v3 .crumb { flex-wrap: wrap; }
  .v3 .crumb .crumb-back { margin-left: 0; }
}

/* ------------------------------------------------------------
   4. 画板 C · 移动端首页（390px）
   ------------------------------------------------------------ */

/* 4.0 顶栏右侧的「注册」实底按钮（提案 .m-top 右侧那块）
   —— 这是**新增类名**，全站只有 mobile_base.html 用到，故不加 .v3m 作用域：
   未登录的手机端顶栏（所有移动页）都统一成提案的「登录文字链 + 注册实底蓝」。 */
.m-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  margin-left: 2px;
  border-radius: 6px;
  background: var(--v3-blue, #326891);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, background .15s ease;
}
.m-register:hover { background: var(--v3-blue-deep, #24506f); color: #ffffff; }
.m-register:active { transform: scale(.97); }
[data-theme="dark"] .m-register { background: #ffffff; color: #121212; }
[data-theme="dark"] .m-register:hover { background: #dcdcdc; color: #121212; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .m-register { background: #ffffff; color: #121212; }
  :root:not([data-theme="light"]) .m-register:hover { background: #dcdcdc; color: #121212; }
}

/* 4.1 顶栏（提案 .m-top）：品牌印章 28px + 站名 17px */
.v3m .m-top-inner { height: 50px; padding: 11px 14px; gap: 9px; }
.v3m .logo-mark {
  width: 28px;
  height: 28px;
  font-size: 16px;
  font-weight: 900;
  border-radius: 6px;
}
.v3m .brand-name { font-size: 17px; font-weight: 800; }

/* 4.2 脉搏条（提案 .m-pulse）：在线绿点 + 等宽数字 */
.v3m .m-pulse {
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-line);
  padding: 6px 14px;
  font-size: 11px;
  color: var(--v3-ink-2);
  display: flex;
  gap: 14px;
  align-items: center;
}
.v3m .m-pulse b { font-family: var(--v3-mono); color: var(--v3-ink); font-weight: 700; }
.v3m .m-pulse .pulse-live { color: var(--v3-green); }
.v3m .m-pulse .pulse-live b { color: var(--v3-green); }
.v3m .m-pulse .pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--v3-green);
  margin-right: 5px;
  vertical-align: 1px;
}

/* 4.3 排序 Tab（提案 .m-tabs）：四段等宽，激活为普鲁士蓝下划线
   ⚠️ mobile.css 里有 #Tabs { padding:10px 14px; overflow-x:auto; border-bottom:1px }
   —— id 选择器优先级 (1,0,0) 高于本文件的 .v3m .m-tabs (0,2,0)，必须用
   「.v3m #Tabs」(1,1,0) 才能改回来；#Tabs 这个 id 同时是「先逛逛 ↓」的锚点，不能删。 */
.v3m #Tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 8px;
  overflow-x: visible;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-line);
}
.v3m .m-tabs {
  display: flex;
  background: var(--v3-card);
  border-bottom: 1px solid var(--v3-line);
  padding: 0 8px;
}
.v3m .m-tabs a {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  font-size: 12px;
  color: var(--v3-ink-2);
  border-bottom: 2px solid transparent;
  position: relative;
  top: 1px;
  text-decoration: none;
}
.v3m .m-tabs a.on {
  color: var(--v3-blue);
  font-weight: 700;
  border-bottom-color: var(--v3-blue);
}

/* 4.4 列表（提案 .m-list + .row） */
.v3m .m-list { background: var(--v3-card); }
.v3m .m-list .row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--v3-line-soft);
  text-decoration: none;
  color: inherit;
}
.v3m .m-list .row:last-child { border-bottom: 0; }
.v3m .m-list .row:active { background: var(--v3-hover); }
.v3m .m-list .ava {
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 13px;
  border-radius: 6px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  overflow: hidden;
}
.v3m .m-list .ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3m .m-list .ava.a-1 { background: #326891; }
.v3m .m-list .ava.a-2 { background: #24506f; }
.v3m .m-list .ava.a-3 { background: #2f9e44; }
.v3m .m-list .ava.a-4 { background: #c29b40; }
.v3m .m-list .ava.a-5 { background: #b22222; }
.v3m .m-list .ava.a-6 { background: #5a5a5a; }
.v3m .m-list .row-main { flex: 1 1 auto; min-width: 0; }
.v3m .m-list .row-title {
  font-size: 14px;
  font-weight: 600;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--v3-ink);
}
.v3m .m-list .row-meta {
  margin-top: 3px;
  font-size: 11px;
  /* 移动端弱化文字跟 mobile.css 的 --color-fade 走（浅色档 #707070 / 暗色档 #939393），
     不用桌面提案的 #9a9a9a —— 后者在白底只有 2.81:1，达不到 AA。
     桌面段仍保留 #9a9a9a，那与 website-site.css 已上线的整站 chrome 同色，不拆。 */
  color: var(--color-fade, #707070);
  display: flex;
  align-items: center;
  gap: 4px;
}
.v3m .m-list .row-meta .cat { color: var(--v3-link); }
.v3m .m-list .row-meta .t { font-family: var(--v3-mono); font-size: 10px; }
.v3m .m-list .count-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  background: var(--v3-neutral);
  border-radius: 4px;
  font-family: var(--v3-mono);
  font-size: 12px;
  color: var(--v3-ink-2);
}
.v3m .m-list .count-badge.zero { color: var(--color-fade, #707070); }
.v3m .m-list .row:active .count-badge { background: var(--v3-blue-pale); color: var(--v3-blue); }

/* 4.5 空态（列表为空时的兜底文案） */
.v3m .m-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--v3-ink-2);
}
.v3m .m-empty a { color: var(--v3-link); }

/* 4.6 暗色档：提案里写死的浅色值在这里翻转
   （mobile.css 的暗色是 [data-theme="dark"] + prefers-color-scheme 两套，
   下面只补 v3 自己写死的那几个值，不动 mobile.css 的变量体系。） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v3m {
    --v3-page: #121212;
    --v3-card: #1a1a1a;
    --v3-line: #2e2e2e;
    --v3-line-soft: #242424;
    --v3-hover: #2a2a2a;
    --v3-neutral: #242424;
    --v3-border: #3a3a3a;
    --v3-ink: #e8e8e8;
    --v3-ink-2: #a8a8a8;
    --v3-ink-3: #939393;
    --v3-blue: #7fb6e8;
    --v3-blue-deep: #a8cbee;
    --v3-blue-pale: #1e2b38;
    --v3-link: #7fb6e8;
    --v3-red: #e07060;
    --v3-red-pale: #2a1d1a;
    --v3-green: #7cbb8e;
  }
}
[data-theme="dark"] .v3m {
  --v3-page: #121212;
  --v3-card: #1a1a1a;
  --v3-line: #2e2e2e;
  --v3-line-soft: #242424;
  --v3-hover: #2a2a2a;
  --v3-neutral: #242424;
  --v3-border: #3a3a3a;
  --v3-ink: #e8e8e8;
  --v3-ink-2: #a8a8a8;
  --v3-ink-3: #939393;
  --v3-blue: #7fb6e8;
  --v3-blue-deep: #a8cbee;
  --v3-blue-pale: #1e2b38;
  --v3-link: #7fb6e8;
  --v3-red: #e07060;
  --v3-red-pale: #2a1d1a;
  --v3-green: #7cbb8e;
}