/* ══════════════════════════════════════════════════════════════
   快合集 · 视觉层 v3（2026-10-04 深夜，全站重新设计）

   v2 的问题（用户原话「很丑、排版也不好」，对照截图逐条确认）：
   1. 首页是一整面「白色小方块墙」—— 磁贴全等形、无主次、无节奏，
      看上去像后台表格，不像内容站。
   2. 排版平：标题和正文灰度拉不开，12px 灰字太多，扫读没有落点。
   3. 详情页是一根通栏直筒：所有块都撑满 1240px，行长 90+ 字，累眼；
      FAQ/同类资源就是几行下划线文字，没有"设计过"的痕迹。
   4. 主按钮是死板的纯色矩形，没有质感层级。

   v3 的设计决定：
   A. 读的地方窄、逛的地方宽 —— 详情/文章类内容收窄到 880px 阅读列，
      首页磁贴网格保持宽容器。行长决定阅读体验。
   B. 三级字重节奏 —— 页面大标题 800 / 卡片标题 700 / 正文 400，
      灰度三级（ink / ink-2 / muted）拉开，扫读有落点。
   C. 磁贴不再是方块：上缘 3px 分类色条（替代左竖条，更像"卡片"）、
      圆角加大到 14px、悬停浮起 + 色条点亮。
   D. 主按钮做质感：夸克 = 渐变实心 + 投影；百度 = 白底描边。
      一整页只允许一个视觉主角。
   E. 详情页各块全部"组件化"：答案框带图标、FAQ 带 Q 徽章、
      同类资源变成 2 列卡片链，不再是裸文字列表。

   ⚠️ 类名是两边共用的：`app.js`（SPA 首页/分类）和 `build.py`（静态页）
      都在拼这些 class，改名必须两边一起改。
      JS 依赖的行为钩子（绝对不能改名）：
      .btn-transfer[data-net]、#toast、#xferMask/.xfer-*、.open-bar/.open-link/.open-close
   ══════════════════════════════════════════════════════════════ */

:root {
  /* 冷调浅灰底：比 v2 的暖纸底更"新"，白卡对比更干净 */
  --bg: #f3f5f9;
  --card: #ffffff;
  --ink: #131722;
  --ink-2: #414a5c;
  --muted: #7b8496;
  --line: #e6e9f0;
  --line-2: #d3d9e4;

  /* 主色：饱和度更高的靛蓝，只给主角（主按钮、链接、当前态） */
  --brand: #2f55e0;
  --brand-2: #6a4fe0;          /* 渐变终点，仅装饰用 */
  --brand-deep: #1f3fb4;
  --brand-soft: #edf1fd;
  --ok: #0b8a5f;
  --ok-soft: #e6f6ef;
  --warn: #a86414;
  --warn-soft: #fdf3e3;

  /* 网盘通道：一个实心主级、一个描边次级（层级区分 > 颜色区分） */
  --quark: #2f6bff;
  --quark-deep: #1c4fdb;
  --baidu: #147a52;
  --xunlei: #0e8585;

  --shadow-sm: 0 1px 2px rgba(19, 23, 34, .04);
  --shadow: 0 1px 2px rgba(19, 23, 34, .05), 0 10px 28px rgba(19, 23, 34, .07);
  --shadow-lg: 0 16px 48px rgba(19, 23, 34, .18);
  --r-sm: 7px;
  --r: 11px;
  --r-lg: 15px;

  /* 分类色：磁贴上缘那条 3px 色带，纯文字网格里唯一的视觉锚点 */
  --c-shipin: #d6552c;
  --c-ruanjian: #2f55e0;
  --c-xuexi: #0b8a5f;
  --c-sucai: #8350d8;
  --c-youxi: #b97a0e;
  --c-ziyuan: #0e7d99;
  --c-ai-tools: #c9367d;
  --c-ai-course: #7040c0;
  --c-gonggao: #7b8496;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(47, 85, 224, .16); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* 分类色带变量：build.py / app.js 在卡片上写 data-cat，这里统一映射 */
[data-cat="shipin"]   { --band: var(--c-shipin); }
[data-cat="ruanjian"] { --band: var(--c-ruanjian); }
[data-cat="xuexi"]    { --band: var(--c-xuexi); }
[data-cat="sucai"]    { --band: var(--c-sucai); }
[data-cat="youxi"]    { --band: var(--c-youxi); }
[data-cat="ziyuan"]   { --band: var(--c-ziyuan); }
[data-cat="ai-tools"] { --band: var(--c-ai-tools); }
[data-cat="ai-course"]{ --band: var(--c-ai-course); }
[data-cat="gonggao"]  { --band: var(--c-gonggao); }
:root { --band: var(--brand); }

/* ─────────────── 顶栏 ───────────────
   两行结构（品牌+搜索+统计 / 分类）是 10-04 用户定的，不动结构，只做质感：
   顶部 3px 渐变饰条给品牌感（不占空间），白底 + 投影替代生硬的下边线。 */
.site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.5) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 8px rgba(19, 23, 34, .04);
  position: sticky; top: 0; z-index: 30;
}
.site-header::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2) 55%, #c9367d);
}
.head-top {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  min-height: 58px; padding-top: 8px; padding-bottom: 8px;
}
.brand {
  font-weight: 800; font-size: 20px; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.brand:hover { text-decoration: none; }
/* 品牌标记用 CSS 画，不引入图片请求 */
.brand::before {
  content: ""; width: 24px; height: 24px; border-radius: 7px; flex: 0 0 24px;
  background: linear-gradient(140deg, var(--brand) 10%, var(--brand-2) 90%);
  box-shadow: 0 3px 8px rgba(47, 85, 224, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.brand-sub { color: var(--muted); font-size: 13px; align-self: center; }
.head-stats {
  margin-left: 6px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: #f2f4f8; border: 1px solid var(--line);
  padding: 4px 12px; border-radius: 999px; align-self: center;
}

/* ─────────────── 站内搜索框（顶栏） ───────────────
   只搜已收录资源，纯前端瞬时。刻意不做"全网盘搜"（零佣金 + 17 秒 + 合规）。 */
.head-search {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
  flex: 0 1 360px; min-width: 180px;
}
.head-search input[type="search"] {
  flex: 1; min-width: 0; font: inherit; font-size: 14px;
  padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px;
  background: #f4f6fa; color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.head-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.head-search input[type="search"]:focus {
  outline: none; background: #fff; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(47, 85, 224, .12);
}
.head-search input::placeholder { color: #9aa3b2; }
.q-go {
  border: 0; color: #fff; font: inherit; font-size: 13.5px;
  font-weight: 700; padding: 9px 18px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 3px 10px rgba(47, 85, 224, .28);
  transition: filter .15s, transform .15s;
}
.q-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.q-clear {
  border: 0; background: transparent; color: var(--muted); font-size: 17px;
  cursor: pointer; padding: 0 2px; line-height: 1;
}
.q-clear:hover { color: var(--ink); }

/* 搜索无结果：把这个词直接带回许愿页 */
.search-none {
  background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  padding: 24px 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.search-none p { margin: 0; color: var(--ink-2); font-size: 15px; flex: 1; min-width: 220px; }
.btn-wish-inline {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; text-decoration: none; font-weight: 700;
  padding: 10px 20px; border-radius: var(--r); font-size: 14px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(47, 85, 224, .25);
}
.btn-wish-inline:hover { filter: brightness(1.08); text-decoration: none; }

/* 分类导航（第二行）：当前项用主色渐变 pill，其余幽灵样式 */
.site-header .cats {
  display: flex; gap: 4px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}
.site-header .cats::-webkit-scrollbar { display: none; }
.cat-chip {
  border: 1px solid transparent; background: transparent; color: var(--ink-2);
  padding: 5px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none; white-space: nowrap; flex: 0 0 auto;
  transition: background .14s, color .14s, border-color .14s;
}
.cat-chip:hover { background: #eef0f6; border-color: var(--line); color: var(--ink); text-decoration: none; }
.cat-chip.on, .cat-chip[aria-current="page"] {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(47, 85, 224, .3);
}

/* 分类页页头 */
.page-title { margin: 30px 0 6px; font-size: 26px; line-height: 1.35; font-weight: 800; letter-spacing: -.02em; }
.page-sub { margin: 0 0 8px; color: var(--muted); font-size: 14px; }

/* 首页 H1（2026-10-05 补）：全站落地入口原来一个 h1 都没有，爬虫只能看 <title>。
   视觉上刻意做得轻——不抢「今日更新」的注意力，也不改变 v3 的版式节奏。 */
.home-h1 {
  margin: 26px 0 2px; font-size: 19px; line-height: 1.4;
  font-weight: 800; letter-spacing: -.01em; color: var(--ink);
}

/* ─────────────── 栏目标题 ─────────────── */
.section-title {
  font-size: 13px; color: var(--muted); margin: 36px 0 16px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sub-title {
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 30px 0 14px; padding-left: 12px; border-left: 3px solid var(--brand);
  line-height: 1.4;
}
/* 首页分组大标题（今日更新 / 各分类）：左侧主色小方块做视觉锚 */
.r-sec {
  margin: 38px 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 10px; color: var(--ink);
}
.r-sec::before {
  content: ""; width: 5px; height: 19px; border-radius: 3px; flex: 0 0 5px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}
.r-sub {
  margin: 26px 0 12px; font-size: 14px; color: var(--muted); font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.r-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.r-sub a { color: var(--ink-2); text-decoration: none; font-weight: 700; }
.r-sub a:hover { color: var(--brand); }

/* ─────────────── 卡片：合集 ─────────────── */
.grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
}
.card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 22px 18px; box-shadow: var(--shadow-sm);
  cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: linear-gradient(90deg, var(--band, var(--brand)), transparent 130%);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
a.card { color: inherit; text-decoration: none; }
a.card:hover { text-decoration: none; }
.card h3 { margin: 0; font-size: 17.5px; line-height: 1.5; font-weight: 700; letter-spacing: -.01em; }
.card .summary { color: var(--ink-2); font-size: 14px; line-height: 1.75; }
.card .meta { display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.tag {
  background: var(--brand-soft); color: var(--band, var(--brand)); border-radius: var(--r-sm);
  padding: 2px 9px; font-size: 12.5px; font-weight: 700;
}
.card.bundle { gap: 8px; }
.bundle-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bundle-top h1, .bundle-top h3 { margin: 0; }
.bundle-foot { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.tier.archived { background: #f2f3f6; color: var(--muted); border-color: var(--line-2); }
.tier {
  font-size: 12px; padding: 2px 10px; border-radius: 999px; font-weight: 700;
  background: var(--ok-soft); color: var(--ok); border: 1px solid #bde3d2;
}

/* ─────────────── 卡片：单条磁贴（首页/分类页主力形态） ───────────────
   v3：上缘色条 + 大圆角 + 悬停浮起；标题 15px/700 是唯一强调，
   规格和日期全部退到三级灰。密度保持（用户要求一行尽可能多）。 */
.r-grid2 {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  /* 🔴 minmax 而不是固定值：固定行高会把超出的标题裁成半行 */
  grid-auto-rows: minmax(108px, auto);
}
.r-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 15px 12px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.r-tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--band, var(--brand));
  opacity: .55; transition: opacity .18s;
}
.r-tile:hover {
  transform: translateY(-3px); box-shadow: var(--shadow);
  border-color: var(--line-2); text-decoration: none;
}
.r-tile:hover::before { opacity: 1; }
/* 「整理中」不再灰化（10-04 用户：不管是不是整理中都应该正常显示）——
   卡片样式与有链接的完全一致，仅底部文案区别（app.js 输出"整理中"/"详情 →"）。 */
.r-tile-title {
  font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--ink);
  letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r-tile-spec {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-tile-spec:empty { display: none; }
.r-tile-foot {
  margin-top: auto; display: flex; align-items: center; gap: 6px;
  padding-top: 9px; font-size: 12px; color: var(--muted);
  border-top: 1px dashed var(--line);
  font-variant-numeric: tabular-nums;
}
.r-tile-foot b { margin-left: auto; color: var(--brand); font-weight: 700; }

/* 大卡片（分类页用），视觉与磁贴对齐 */
.r-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
}
.r-grid.r-dim .r-card { opacity: .72; }
.r-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 20px 16px; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s;
}
.r-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 3px; background: var(--band, var(--brand)); opacity: .55; transition: opacity .18s;
}
.r-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); text-decoration: none; }
.r-card:hover::before { opacity: 1; }
.r-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.r-cat {
  background: var(--brand-soft); color: var(--band, var(--brand));
  border-radius: var(--r-sm); padding: 2px 9px; font-weight: 700; font-size: 12.5px;
}
.r-date { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.r-title {
  font-size: 16.5px; font-weight: 700; line-height: 1.5; color: var(--ink); letter-spacing: -.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r-ans {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.75;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.r-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.r-chip {
  font-size: 12px; padding: 2px 8px; border-radius: var(--r-sm);
  background: #f2f3f6; color: var(--ink-2); font-weight: 500;
}
.r-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.btn-xfer {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff; border: 0; border-radius: var(--r);
  padding: 8px 15px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 2px 8px rgba(47, 85, 224, .22);
}
.btn-xfer:hover { filter: brightness(1.08); }
.btn-xfer i { font-style: normal; font-size: 12px; opacity: .85; font-weight: 400; }
.r-none {
  font-size: 12.5px; color: var(--warn); background: var(--warn-soft);
  border: 1px dashed #edd2a4; border-radius: var(--r); padding: 6px 12px;
}
.r-go { margin-left: auto; font-size: 13px; color: var(--muted); }
.r-empty {
  color: var(--muted); padding: 28px; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r-lg); background: #fafbfd;
}

/* 一行一条的列表版（部分分类页在用） */
.r-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-sm);
}
.r-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto auto 92px 66px;
  align-items: center; gap: 12px;
  padding: 14px 18px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line);
  transition: background .14s;
}
.r-row:last-child { border-bottom: 0; }
.r-row:hover { background: #f7f9fc; text-decoration: none; }
.r-row-cat { font-size: 12.5px; color: var(--band, var(--brand)); font-weight: 700; }
.r-row-title {
  font-size: 15px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-row-v, .r-row-size { font-size: 12.5px; color: var(--muted); }
.r-row-v:empty, .r-row-size:empty { display: none; }
.r-row-date { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.r-row-go { font-size: 13px; color: var(--brand); text-align: right; font-weight: 600; }

/* ─────────────── 详情页 ───────────────
   v3 核心改动：阅读列收窄（880px），不再通栏直筒。
   宽屏上两侧留白是刻意的 —— 90+ 字的行长没人读得下去。 */
.crumbs {
  font-size: 13px; color: var(--muted); margin: 24px 0 12px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs i { font-style: normal; opacity: .45; }

.detail {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 36px 40px; box-shadow: var(--shadow-sm);
  max-width: 960px; margin: 8px auto 0;   /* 阅读列收窄并居中，两侧留白是刻意的 */
}
.detail h1 {
  margin: 0 0 14px; font-size: 30px; line-height: 1.4;
  font-weight: 800; letter-spacing: -.02em;
}
.detail .desc { color: var(--ink-2); font-size: 15.5px; line-height: 1.9; }

/* 答案前置：GEO 里最值钱的句子。v3 加了小标签，告诉用户"这就是答案" */
.answer-top {
  position: relative;
  background: linear-gradient(135deg, var(--ok-soft), #f2faf6);
  border: 1px solid #cde8da; border-left: 4px solid var(--ok);
  border-radius: var(--r);
  padding: 16px 18px 15px; margin: 0 0 24px;
  font-size: 15px; line-height: 1.85; color: #0b5238;
}
.answer-top::before {
  content: "直达答案"; display: block;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  color: var(--ok); margin-bottom: 6px;
}
.answer-top b { font-weight: 700; }

/* 更新记录：追更型资源"我们真的在更"的证据。没有 changes 就不渲染。 */
.changes { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13.5px; }
.changes li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.changes li:last-child { border-bottom: 0; }
.changes time { flex: 0 0 92px; color: var(--muted); font-variant-numeric: tabular-nums; }
.changes span { color: var(--ink); font-weight: 600; }

/* 速览表：规格一览 */
.spec-sheet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; margin: 0 0 24px;
}
.spec-item { background: #fafbfc; padding: 14px 16px; }
.spec-item span {
  display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px;
  font-weight: 700; letter-spacing: .08em;
}
.spec-item b { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }

.metas { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 20px; }
.chip {
  font-size: 12.5px; padding: 4px 11px; border-radius: 999px;
  background: #f2f3f6; color: var(--ink-2); font-weight: 500;
}
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.miss { background: var(--warn-soft); color: var(--warn); border: 1px dashed #edd2a4; }
.chip.stat { background: var(--brand-soft); color: var(--brand); }

/* ─────────────── 转存按钮（主链路，改名会打断 app.js/static.js） ─────────────── */
.transfer-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; margin: 26px 0 8px; }
.btn-transfer {
  flex: 1; min-width: 200px; border-radius: 13px; padding: 17px 20px;
  font-size: 16px; font-weight: 800; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  letter-spacing: -.01em;
  transition: filter .15s, transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn-transfer small { font-weight: 500; font-size: 12.5px; opacity: .78; letter-spacing: 0; }
/* 夸克 = 全页唯一主角：渐变实心 + 彩色投影 */
.btn-transfer.quark {
  background: linear-gradient(135deg, var(--quark), var(--quark-deep));
  color: #fff; border: 1px solid var(--quark-deep);
  box-shadow: 0 6px 18px rgba(47, 107, 255, .3);
}
.btn-transfer.quark:hover {
  filter: brightness(1.06); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 107, 255, .36);
}
/* 百度 = 描边次级 */
.btn-transfer.baidu { background: #fff; color: var(--baidu); border: 1.5px solid var(--baidu); }
.btn-transfer.baidu:hover { background: #f0f8f4; transform: translateY(-2px); }
.btn-transfer.xunlei { background: var(--xunlei); color: #fff; border: 1px solid var(--xunlei); }
a.btn-transfer { text-decoration: none; }
.btn-transfer:hover { text-decoration: none; }

.locked {
  margin: 20px 0; padding: 15px 17px; border: 1px dashed #e2ba85; border-radius: var(--r);
  background: var(--warn-soft); color: var(--warn); font-size: 14px;
}
.locked.unlocked { border-style: solid; background: var(--ok-soft); color: var(--ok); border-color: #bde3d2; }
.after-transfer {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--r);
  background: #f7f9fc; border: 1px solid var(--line);
}
.after-transfer h4 { margin: 0 0 8px; font-size: 14.5px; }
.after-transfer a { color: var(--brand); }

/* 作品信息（影视类演员/剧情，抓不到就不渲染这个块） */
.media-info {
  margin: 22px 0; padding: 18px 20px;
  background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--r);
}
.media-title {
  font-size: 12px; font-weight: 800; color: var(--muted);
  letter-spacing: .12em; margin-bottom: 12px;
}
.media-row { display: flex; gap: 14px; padding: 6px 0; font-size: 14.5px; line-height: 1.8; }
.media-row b { flex: 0 0 46px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.media-row span { flex: 1; color: var(--ink); }
.media-plot span { color: var(--ink-2); }
.media-pending { display: flex; align-items: center; gap: 14px; background: #fafbfd; border-style: dashed; }
.media-tip { font-size: 13.5px; color: var(--muted); }
.media-add { font-size: 13.5px; color: var(--brand); text-decoration: none; }
.media-add:hover { text-decoration: underline; }

/* 原创统计块 —— 护城河，AI 最爱引用 */
.stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 13px 16px; background: #f7f9fc; border: 1px solid var(--line);
  border-radius: var(--r); margin: 0 0 22px;
}
.stats-t { font-size: 12px; font-weight: 800; color: var(--muted); margin-right: 4px; letter-spacing: .1em; }
.stats-src { font-size: 12px; color: var(--muted); margin-left: auto; }

.howto { margin: 0 0 12px; padding-left: 22px; font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.howto li { margin: 6px 0; }

/* FAQ：Q 徽章 + 更松的行距，不再是"几行下划线文字" */
.faq { margin: 0; }
.faq-item { padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.faq-item:last-child { border-bottom: none; }
.faq-item b {
  color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.6;
  display: flex; gap: 10px; align-items: baseline;
}
.faq-item b::before {
  content: "Q"; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
  position: relative; top: 2px;
}
.faq-item p { margin: 9px 0 0 30px; color: var(--ink-2); line-height: 1.85; }

/* 同类资源内链：2 列卡片链，不再是裸文字列表 */
.related {
  list-style: none; margin: 0 0 10px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.related li { margin: 0; border: 0; }
.related a {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-size: 14px; font-weight: 600; line-height: 1.5;
  color: var(--ink); text-decoration: none;
  background: #f7f9fc; border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color .15s, background .15s, color .15s;
}
.related a::after { content: "→"; margin-left: auto; color: var(--muted); transition: color .15s; }
.related a:hover { color: var(--brand); border-color: var(--brand); background: #fff; text-decoration: none; }
.related a:hover::after { color: var(--brand); }

pre.tree {
  background: #151a26; color: #d8e0ee; padding: 18px 20px; border-radius: var(--r);
  overflow-x: auto; font-size: 13px; line-height: 1.8; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
}
ul.items { margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 2; }
ul.items a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
ul.items a:hover { color: var(--brand); border-color: var(--brand); }

.bundle-cta {
  margin: 18px 0; padding: 15px 18px; border-radius: var(--r);
  background: var(--brand-soft); border: 1px solid #d5dff7; font-size: 14px; color: var(--ink-2);
}
.bundle-cta a { color: var(--brand); font-weight: 700; text-decoration: none; margin-left: 6px; }
.latest { color: var(--ok); font-weight: 700; }
.empty { color: var(--muted); padding: 36px 0; text-align: center; }
.muted { color: var(--muted); }
.back { color: var(--brand); cursor: pointer; font-size: 14px; text-decoration: none; font-weight: 600; }
.code { background: #eef0f4; padding: 1px 6px; border-radius: var(--r-sm); font-size: 13px; }

/* ─────────────── 许愿入口 / 页脚 ─────────────── */
.wish-cta { margin: 48px 0 0; }
.wish-inner {
  background: linear-gradient(120deg, #1a2140 0%, #2b3a8f 60%, var(--brand) 100%);
  border-radius: 18px; padding: 26px 28px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(26, 33, 64, .25);
}
.wish-inner strong { font-size: 18px; color: #fff; font-weight: 800; letter-spacing: -.01em; }
.wish-sub { color: rgba(255, 255, 255, .72); font-size: 13.5px; margin-left: 10px; }
.btn-wish {
  margin-left: auto; background: #fff; color: var(--ink); text-decoration: none;
  padding: 11px 22px; border-radius: var(--r); font-size: 14.5px; font-weight: 800;
  transition: transform .15s, box-shadow .15s;
}
.btn-wish:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); text-decoration: none; }

.site-footer {
  margin-top: 52px; padding: 28px 0 44px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: 13.5px;
}
.site-footer .wrap { display: flex; flex-direction: column; gap: 4px; }
.site-footer p { margin: 0; }
.site-footer .muted { font-size: 12.5px; }

/* ─────────────── 反馈层：toast / 等待 / 弹窗兜底 ─────────────── */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 12px 22px; border-radius: 999px;
  font-size: 14px; box-shadow: var(--shadow-lg); z-index: 60; max-width: 92vw;
}
.xfer-mask {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(15, 18, 26, .55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.xfer-box {
  background: #fff; border-radius: 18px; padding: 32px 32px 26px;
  max-width: 390px; width: 100%; text-align: center; box-shadow: var(--shadow-lg);
}
.xfer-spin {
  width: 42px; height: 42px; margin: 0 auto 18px;
  border: 3px solid #e4e8f0; border-top-color: var(--brand);
  border-radius: 50%; animation: xferspin .8s linear infinite;
}
@keyframes xferspin { to { transform: rotate(360deg); } }
.xfer-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 20px; letter-spacing: -.01em; }
.xfer-stages { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.xfer-stages li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; opacity: .38; transition: opacity .25s;
}
.xfer-stages li i {
  width: 15px; height: 15px; border-radius: 50%; flex: 0 0 15px;
  border: 2px solid #cbd3e0; position: relative; top: 2px;
}
.xfer-stages li.cur { opacity: 1; }
.xfer-stages li.cur i {
  border-color: var(--brand); border-top-color: transparent;
  animation: xferspin .7s linear infinite;
}
.xfer-stages li.done { opacity: .85; }
.xfer-stages li.done i { background: var(--ok); border-color: var(--ok); }
.xfer-stages li.done i::after {
  content: "✓"; color: #fff; font-size: 10px; position: absolute; left: 1.5px; top: -1px;
}
.xfer-stages li b { font-size: 14px; font-weight: 600; color: var(--ink); }
.xfer-stages li em { font-style: normal; font-size: 12.5px; color: var(--muted); margin-left: auto; }
.xfer-tip { font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
.xfer-cancel {
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  border-radius: var(--r); padding: 9px 26px; font-size: 14px; cursor: pointer;
}
.xfer-cancel:hover { background: #f7f9fc; }

/* 弹窗被浏览器拦掉时的兜底条：给用户一个他自己点的真实 <a>（坑 ⑬） */
.open-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: #fff; border-radius: 14px;
  padding: 11px 12px 11px 18px; box-shadow: var(--shadow-lg); font-size: 14px; max-width: 92vw;
}
.open-bar[hidden] { display: none; }
.open-bar .open-link {
  color: #fff; font-weight: 700; text-decoration: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  border-radius: var(--r); padding: 9px 16px; white-space: nowrap;
}
.open-bar .open-link:hover { filter: brightness(1.1); }
.open-bar .open-close {
  background: transparent; color: #c6ccd9; border: 0; font-size: 13px; cursor: pointer; padding: 6px 4px;
}

/* ─────────────── 补充作品信息页（人工补数据用） ─────────────── */
.mf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 18px 0; }
.mf-field { display: flex; flex-direction: column; gap: 6px; }
.mf-field > span { font-size: 13px; color: var(--muted); }
.mf-field input, .mf-field textarea {
  font: inherit; font-size: 14.5px; padding: 10px 12px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: #fff; color: var(--ink);
}
.mf-field input:focus, .mf-field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(47, 85, 224, .12);
}
.mf-field textarea { resize: vertical; line-height: 1.6; }
.mf-wide { grid-column: 1 / -1; }
.mf-actions { display: flex; align-items: center; gap: 16px; margin: 20px 0 10px; }
.mf-actions .btn-primary {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  padding: 11px 26px; border-radius: var(--r); border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: #fff;
  box-shadow: 0 3px 10px rgba(47, 85, 224, .25);
}
.mf-actions .btn-primary:hover { filter: brightness(1.08); }
.mf-actions .btn-back { font-size: 14px; color: var(--brand); text-decoration: none; }
.mf-msg { min-height: 22px; font-size: 13.5px; color: var(--muted); margin-bottom: 10px; }
.mf-msg.ok { color: var(--ok); }
.mf-msg.bad { color: #b4451f; }
.mf-tip {
  font-size: 13px; color: var(--muted); line-height: 1.8;
  background: #f7f9fc; border: 1px dashed var(--line-2); border-radius: var(--r); padding: 14px 16px;
}
.mf-tip code { background: #eef0f4; padding: 1px 5px; border-radius: var(--r-sm); font-size: 12.5px; }

/* ═══════════════ 2026-10-07 v5：高密度「一行一条」列表 ═══════════════
   用户原话：资源每天很多、以后越来越多，首页不能再是卡片式的，要显示的够多；
   一屏 15~25 条。所以首页/分类页不再用 .grid/.r-grid2 卡片，改成一整块列表：
   每行 = 标题 · 徽章(集数 / 今日更新 / 分类 / 合集) · 更新时间 + 网盘 · 转存。
   `.rlist/.ri/.ri-*` 由 build.py 的 _row()/_brow() 输出（服务端预渲染，爬虫可见），
   app.js 只在这块 DOM 上做过滤/排序，不再 innerHTML 重渲染。
   ⚠️ 旧规则一律保留（详情页/合集页还在用 .r-tile/.card/.transfer-row），只追加。 */
.lstat { font-size: 13px; color: var(--muted); margin: 8px 0 10px; }
.lbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 2px 0 12px; }
.lbar .lb {
  font: inherit; font-size: 13px; line-height: 1; cursor: pointer; white-space: nowrap;
  padding: 7px 11px; border-radius: 999px; border: 1px solid #d7dbe4;
  background: #fff; color: #35405a;
}
.lbar .lb:hover { border-color: var(--brand); color: var(--brand); }
.lbar .lb em { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 3px; }
.lbar .lb.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.lbar .lb.on em { color: rgba(255, 255, 255, .82); }
.lbar .lbar-s { margin-left: auto; display: flex; gap: 7px; }

.rlist {
  list-style: none; margin: 0; padding: 0; background: #fff;
  border: 1px solid #e6e9f0; border-radius: var(--r-lg); overflow: hidden;
}
.ri {
  display: flex; align-items: center; gap: 10px; padding: 0 12px;
  min-height: 47px; border-top: 1px solid #eef0f5;
}
.ri:first-child { border-top: 0; }
.ri:hover { background: #f7f9fc; }
.ri-a {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 11px 0; text-decoration: none; color: inherit;
}
.ri-t {
  flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: #1b2030;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ri-x { flex: 0 0 auto; display: flex; gap: 5px; }
.ri-m {
  flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.ri-m em { font-style: normal; }
.bdg {
  font-size: 11.5px; line-height: 1; padding: 4px 6px; border-radius: var(--r-sm);
  background: #eef1f6; color: #5a6478; white-space: nowrap;
}
.bdg.new { background: #ffe9e3; color: #c2410c; }
.bdg.ep { background: #e8f0ff; color: #2f55e0; }
.bdg.cat { background: #f1f2f5; color: #6b7280; }
.bdg.bd { background: #eaf6ee; color: #157f3d; }
.ri .btn-xfer {
  flex: 0 0 auto; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 13px; border-radius: var(--r); border: 0; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  box-shadow: 0 2px 6px rgba(47, 85, 224, .22);
}
.ri .btn-xfer:hover { filter: brightness(1.08); }
.lnone { display: none; padding: 26px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.lnone.on { display: block; }

/* 🔴 2026-10-07 线上实测抓到的 bug：app.js 里用 `li.hidden = true` 隐藏不匹配的行，
   但 `.ri { display: flex }` 是作者样式，会盖掉浏览器默认的 `[hidden] { display: none }`
   → 搜索框和筛选按钮点了「没反应」（URL 变了、行一条都没少）。
   凡是标了 hidden 的元素语义上就是"别显示"，用 !important 兜住（.toast / .open-bar /
   #qClear 也都是这套 hidden 模式，一并对齐）。 */
[hidden] { display: none !important; }

/* 转存结果态（页内面板，2026-10-07）：转存成功后**不再自动开新标签跳夸克**，
   把「打开网盘」做成面板里用户自己点的真 <a>（有用户手势 → 不会被拦，链接也不会丢）。 */
.xfer-ok { font-size: 16px; font-weight: 800; color: #157f3d; margin-bottom: 8px; }
.xfer-bad { font-size: 15px; font-weight: 700; color: #b4451f; line-height: 1.6; margin-bottom: 8px; }
.xfer-note { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; }
.xfer-open {
  display: block; box-sizing: border-box; width: 100%; text-align: center;
  font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 13px 18px; border-radius: var(--r); margin-bottom: 10px;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
}
.xfer-open:hover { filter: brightness(1.08); }
.xfer-acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.xfer-copy, .xfer-retry, .xfer-switch, .xfer-detail {
  display: inline-block; font: inherit; font-size: 13px; cursor: pointer;
  padding: 9px 14px; border-radius: var(--r); border: 1px solid #d7dbe4;
  background: #fff; color: #35405a; text-decoration: none;
}
.xfer-copy { border-color: transparent; background: #f0f2f6; }
.xfer-copy:hover, .xfer-retry:hover, .xfer-switch:hover, .xfer-detail:hover { border-color: var(--brand); color: var(--brand); }

/* 手机端：一屏 15~25 条优先，砍掉次要信息（分类徽章 / 网盘名），标题吃掉整行；
   筛选条和分类条都只占一行（横向滚动，不换行）——换行会把首屏顶掉两行内容。 */
@media (max-width: 720px) {
  .ri { min-height: 44px; padding: 0 9px; gap: 7px; }
  .ri-a { gap: 6px; padding: 9px 0; }
  .ri-t { font-size: 14px; }
  .bdg { font-size: 11px; padding: 3px 5px; }
  .bdg.cat, .ri-nets { display: none; }
  .ri-m { font-size: 11.5px; gap: 5px; }
  .ri .btn-xfer { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
  .home-h1 { font-size: 18px; margin: 12px 0 6px; }
  .lstat { font-size: 12px; margin: 4px 0 8px; }
  .cats {
    flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
    padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cats::-webkit-scrollbar { display: none; }
  .cats > * { flex: 0 0 auto; }
  .lbar {
    gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    margin: 0 -15px 8px; padding: 0 15px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lbar::-webkit-scrollbar { display: none; }
  .lbar .lb { padding: 6px 10px; font-size: 12.5px; flex: 0 0 auto; }
  .lbar .lbar-s { margin-left: 0; flex: 0 0 auto; gap: 6px; }
}
@media (max-width: 400px) {
  .bdg.cat { display: none; }
  .ri-m em { display: none; }              /* 极窄屏只留「更新至第N集」这类硬信息 */
}

/* ─────────────── 手机端 ───────────────
   拉新流量几乎都在手机上：转存按钮钉在底部，不用滚动能点到。
   `.cta-sticky` 由详情页模板输出，页面有它才给 body 加 has-cta。 */
.cta-sticky { display: none; }

@media (max-width: 720px) {
  .wrap { padding: 0 15px; }
  .head-stats { display: none; }         /* 窄屏优先保品牌和搜索 */
  .head-top { min-height: 50px; }
  /* 手机上搜索单独占一行 */
  .head-search { flex: 1 1 100%; order: 3; margin-left: 0; }
  .detail { padding: 22px 18px; border-radius: var(--r-lg); }
  .detail h1 { font-size: 23px; }
  .page-title { margin-top: 22px; font-size: 21px; }
  .r-sec { font-size: 17px; margin: 30px 0 14px; }
  .grid, .r-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* 手机上 2 列是极限（3 列标题只剩 5 个字可放） */
  .r-grid2 { grid-template-columns: 1fr 1fr; gap: 9px; grid-auto-rows: minmax(100px, auto); }
  .r-tile, .r-card { padding: 13px 12px 11px; }
  .r-tile-title { font-size: 14px; line-height: 1.45; }
  .r-tile-foot { font-size: 11.5px; }
  .r-row { grid-template-columns: 78px minmax(0, 1fr) 58px; padding: 13px 14px; }
  .r-row-v, .r-row-size, .r-row-date { display: none; }
  .spec-sheet { grid-template-columns: 1fr 1fr; }
  .related { grid-template-columns: 1fr; }
  .faq-item p { margin-left: 0; }
  .mf-form { grid-template-columns: 1fr; }
  .transfer-row { flex-direction: column; }
  .btn-transfer { min-width: 0; }

  body.has-cta .cta-sticky {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  }
  body.has-cta .cta-sticky .btn-transfer { min-width: 0; flex: 1; padding: 13px 14px; font-size: 15px; }
  /* 给固定条让出高度，否则最后一屏内容被盖住 */
  body.has-cta { padding-bottom: 88px; }
  body.has-cta .site-footer { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .head-top { padding-top: 7px; padding-bottom: 7px; }
  .brand-sub { display: none; }
}

@media (max-width: 400px) {
  .grid, .r-grid2, .r-grid { grid-template-columns: 1fr; }
  .r-grid2 { grid-auto-rows: auto; }
  .r-tile { min-height: 108px; }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .r-tile:hover, .r-card:hover, .btn-transfer:hover, .btn-wish:hover { transform: none; }
}

/* ─────────────── 手机端首屏加密（2026-10-07 版式重构） ───────────────
   目标：390×844 一屏 ≥15 条。做法是把顶栏压成一行（品牌 + 搜索并排），
   统计行让位给列表（条数已经在「全部 60」按钮上），H1 只留 SEO 意义的最小尺寸。
   ⚠️ 必须放在文件最后：上面的移动端块把 .head-search 设成了 flex:1 1 100%（单独一行），
   同优先级下靠位置取胜，放前面会被盖掉。 */
@media (max-width: 720px) {
  .head-top { flex-wrap: nowrap; gap: 10px; min-height: 46px; }
  .head-top .brand { flex: 0 0 auto; }
  .head-search { flex: 1 1 auto; order: 2; min-width: 0; margin-left: auto; }
  .head-search input[type="search"] { padding: 8px 12px; font-size: 13.5px; }
  .q-go { padding: 8px 12px; font-size: 13px; }
  .lstat { display: none; }
  .home-h1 { font-size: 16px; margin: 8px 0 8px; }
  .cats { padding-top: 6px; }
}

/* ═══════════════ 2026-10-09 v6：品牌个性层（用户拍板「模板 A + 要设计感」） ═══════════════
   用户看过三个模板后选 A（清单式），但觉得 v3/v5 还差设计感 —— 密度已达标（一屏 15~25 条），
   缺的是"这个人设计过"的痕迹。本段只加质感、不动结构：类名零改动（JS 行为钩子清单见文件头），
   行高基本不变（密度红线不回退）。全部追加在文件末尾 = 想回滚删掉本段即可。
   五个落点：
   ① 行首杂志目录式序号（01 02…，纯 CSS counter）—— 筛选/排序后自动重排：
      app.js 过滤用 li.hidden（display:none，counter 天然跳过隐藏行）、
      排序用 appendChild 重排 DOM（counter 跟随 DOM 顺序），均已核源码（app.js:426/433）。
      前三行序号点亮品牌色，制造"榜单感"。手机端隐藏（一屏条数红线优先）。
   ② 今日更新行：左橙竖条 + 微暖底（与 .bdg.new 同色族）。
   ③ 合集行：淡紫渐变底 —— 合集排在最前，是主推位，一眼和资源行区分。
   ④ 徽章胶囊化：色块 → 淡底 + 描边 + 全圆角（.bdg 仅列表行使用，2026-10-09 核过
      render_lib 全部输出点，详情页不涉及）。
   ⑤ 筛选条 iOS 分段控件化 + 行 hover 标题点墨 + 转存按钮微浮。
   ⚠️ 本段必须保持在文件最末：分段控件 .lbar 的 padding 会覆盖上面手机端的横滚
      padding，所以下面自带一份 @media 重写手机端规则（退回独立胶囊，分段容器在
      overflow-x 横滚下会切边）。 */

/* ① 行首序号 */
.rlist { counter-reset: rline; box-shadow: var(--shadow-sm); }
.ri { counter-increment: rline; transition: background .12s; }
.ri-a::before {
  content: counter(rline, decimal-leading-zero);
  flex: 0 0 30px; font-size: 12px; font-weight: 600; color: #aab2c2;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  transition: color .12s;
}
.ri:nth-child(-n+3) .ri-a::before { color: var(--brand); font-weight: 800; }
.ri:hover .ri-a::before { color: var(--brand-deep); }

/* 行 hover 质感（写在 ②③ 之前：特殊行的渐变底在后面覆盖这里的 hover 底） */
.ri:hover .ri-t { color: var(--brand-deep); }
.ri .btn-xfer { transition: transform .12s, box-shadow .12s, filter .12s; }
.ri .btn-xfer:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(47, 85, 224, .32); }
.ri .btn-xfer:active { transform: translateY(0); }

/* ② 今日更新行：左橙条 + 微暖底 */
.ri[data-new="1"] {
  box-shadow: inset 3px 0 0 #e8590c;
  background: linear-gradient(90deg, #fff7f1, #fff 96px);
}
.ri[data-new="1"]:hover { background: linear-gradient(90deg, #fff4ea, #f6f8fc 96px); }

/* ③ 合集行：淡紫渐变底 */
.ri[data-kind="b"] { background: linear-gradient(90deg, #f5f2ff, #fff 110px); }
.ri[data-kind="b"]:hover { background: linear-gradient(90deg, #efeaff, #f6f8fc 110px); }
.ri[data-kind="b"][data-new="1"] {
  box-shadow: inset 3px 0 0 #e8590c;
  background: linear-gradient(90deg, #f5f2ff, #fff7f1 120px, #fff 230px);
}

/* ④ 徽章胶囊化 */
.bdg { border-radius: 999px; background: #f5f6f9; border: 1px solid var(--line); padding: 3px 8px; }
.bdg.new { background: #fff3ec; border-color: #f6cbae; color: #c2410c; }
.bdg.ep  { background: var(--brand-soft); border-color: #c8d3fb; color: var(--brand-deep); }
.bdg.cat { background: #f6f7fa; border-color: var(--line); color: #6b7280; }
.bdg.bd  { background: #ecf7f0; border-color: #b9e2c7; color: #157f3d; }

/* ⑤ 筛选条：分段控件 */
.lbar {
  background: #e9edf4; padding: 4px; border-radius: 13px; gap: 4px;
  border: 1px solid #e0e5ee;
}
.lbar .lb { background: transparent; border: 0; color: var(--ink-2); font-weight: 500; padding: 7px 12px; }
.lbar .lb em { color: #98a1b3; }
.lbar .lb:hover { background: rgba(255, 255, 255, .6); border: 0; color: var(--ink); }
.lbar .lb.on {
  background: #fff; color: var(--ink); font-weight: 700;
  box-shadow: 0 1px 4px rgba(19, 23, 34, .14);
}
.lbar .lb.on em { color: var(--brand); }

@media (max-width: 720px) {
  .ri-a::before { display: none; }      /* 序号让位给标题（一屏条数红线） */
  /* 手机端退回独立胶囊：分段容器在横滚下切边、色块拖出屏幕外很难看 */
  .lbar {
    gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    margin: 0 -15px 8px; padding: 0 15px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .lbar::-webkit-scrollbar { display: none; }
  .lbar .lb { flex: 0 0 auto; background: #fff; border: 1px solid #d7dbe4; }
  .lbar .lb:hover { background: #fff; }
  .lbar .lb.on { border-color: var(--brand); }
}
@media (prefers-reduced-motion: reduce) {
  .ri .btn-xfer:hover { transform: none; }
}