/*
 * cb-audit-fix-v7.css — 2026-10-27 UI 审计覆盖层

 * v5: §8 分类胶囊行左内边距对齐。
 * v6: §9 page-shell 布局 —— footer 从右列变回整行页脚(整站 browse 页面族)。
 * v7: §10 /girlfriend 空 hero 图框, §11 /vip 灰字对比度, §12 18+ 角标对比度,
 *     §13 搜索框焦点指示, §14 ≤768 头部搜索椭圆, §15 触摸目标下限。
 *
 * bundle-*.min.css 是服务器上 cat 出来的产物(顺序见 AssetHead.tsx 注释), 本地没有
 * 生成脚本, 直接改 340KB 生产 bundle 风险太大。审计期间发现的问题一律写在这里,
 * 由 AssetHead 在三个页面族的 CSS 数组末尾追加, 靠"同权重 !important + 后加载"覆盖。
 *
 * 规则前提: 被覆盖的 bundle 规则都是 !important, 所以这里也必须 !important,
 * 并且选择器要多一个类, 否则权重打不平。
 *
 * v3 起换文件名而不是加 ?v= —— CF 对静态后缀忽略查询串, 同名文件会一直回旧缓存。
 */

/* ── 1. 首页卡片网格算错 ─────────────────────────────────────────────
 * body.page-home .card.yt-card .channel-picture{display:none!important} 把头像藏了,
 * 但 .video-info-grid 的 grid-template-columns 仍是 36px minmax(0,1fr) 24px。
 * 结果: 36px 空轨道 + 12px 列间距白占 48px —— 移动端卡片 163px 宽, 标题只剩 79px
 * (一行 5 个字), 桌面 276px 卡片标题只剩 192px。
 * 这里直接把头像轨道去掉, 文字列吃掉它。
 */
/* 原规则是 body.page-home #contentArea .card .info (带 ID, 权重高),
   必须用同样带 #contentArea 的选择器才能打平 */
body.page-home #contentArea .card.yt-card .video-info-grid,
body.page-home .grid .card.yt-card .video-info-grid,
body.page-home .card.yt-card .video-info-grid {
  grid-template-columns: minmax(0, 1fr) 40px !important;
  column-gap: 8px !important;
}

/* 子元素在 bundle 里是硬摆的 grid-column:1/2/3, 光改轨道数会把标题挤进第 2 轨。
   去掉头像那一轨后要同步左移: 文字 1 轨, 按钮 2 轨。 */
body.page-home #contentArea .card.yt-card .video-info,
body.page-home .grid .card.yt-card .video-info,
body.page-home .card.yt-card .info .video-info {
  grid-column: 1 / 2 !important;
}
body.page-home #contentArea .card.yt-card .card-menu-wrap,
body.page-home .grid .card.yt-card .card-menu-wrap,
body.page-home .card.yt-card .info .card-menu-wrap {
  grid-column: 2 / 3 !important;
}

/* ── 2. 三点按钮压在标题上 ───────────────────────────────────────────
 * .card-menu-btn 有 min-width/min-height:44px, 而所在轨道只有 24px —— 按钮向左
 * 溢出 20px, 右边压住标题末 8px(桌面/移动端都实测到)。轨道已改成 40px,
 * 这里把尺寸钉成 40×40, 既贴合轨道又保住 40px 触控下限。
 */
body.page-home .card.yt-card .card-menu-btn,
body.page-home .card.yt-card .card-menu-btn.meta-menu {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

/* ── 3. 移动端 meta 行折行 ───────────────────────────────────────────
 * "3次观看 · 2天前" 在 79px 宽度下被折成两行(实测 stats 高度 36px = 2×18px)。
 * 桌面同元素是 nowrap, 说明移动端另有一条规则改成了 normal。统一钉死单行。
 */
body.page-home .card.yt-card .video-stats {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── 4. 触屏设备上三点按钮完全看不见 ─────────────────────────────────
 * 按钮默认 opacity:0, 靠 :hover 显形。触屏没有 hover, 等于永远不可见但可点。
 */
@media (hover: none) {
  body.page-home .card.yt-card .card-menu-btn {
    opacity: .55 !important;
  }
  body.page-home .card.yt-card .card-menu-btn:active {
    opacity: 1 !important;
  }
}

/* ── 5. 移动端首页把导航和登录全藏了 ─────────────────────────────────
 * body.page-home header #mobileNavBtn / #authBtns / #mobileUserBtn 都是
 * display:none !important(另有互相打架的 inline-flex 版本, 说明这是补丁叠出来的)。
 * 后果: 390px 下首页头部只剩 logo + 放大镜 —— 分类/趋势/AI短剧/虚拟女友没有入口,
 * 匿名访客也没有登录按钮。抽屉本身(catSideNav)是好的, 只是按钮被藏。
 *
 * #authBtns 只在没有 inline display:none 时才恢复 —— React 登录态会写 inline style,
 * 硬覆盖会让已登录用户又看到"登录"。
 */
@media (max-width: 800px) {
  body.page-home header #mobileNavBtn,
  body.page-home header .mobile-nav-btn {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.page-home header #authBtns:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* ── 6. 移动端无限滚动把自己打成死循环 ───────────────────────────────
 * bundle-home.min.css 的 @media (max-width:767px) 里给 #recContent 的子块排了序:
 * .hero-section 1 / .promo-stack 2 / .filter-bar 3 / .section-container 4 /
 * #contentArea 5 —— 唯独 #recSentinel 和 #recEndMsg 没写 order(默认 0)。
 * #recContent 是 flex column, 于是哨兵排到了整个网格的**上面**: 实测滚动到底部
 * 之前 sentinel.top 恒为 346px(视口内), IntersectionObserver 每次都判定"进入视野",
 * 页面自己一页接一页地拉, 8 秒 900 张卡、文档高 96,000px, 全是无人观看的流量。
 * 哨兵必须排在网格之后, 和其它有序块一起钉死顺序。
 */
@media (max-width: 767px) {
  body.page-home #recContent #recSentinel {
    order: 6 !important;
  }
  body.page-home #recContent #recEndMsg {
    order: 7 !important;
  }
}

/* ── 7. 移动端网格行距 40px, 一屏只能放 3 行卡 ──────────────────────
 * bundle 里其实写了移动端间距: @media (max-width:768px)->16px 12px,
 * @media (max-width:600px)->8px 0。两条都被
 * body.page-home #contentArea.is-yt-home-flat{gap:40px 16px} 压死 ——
 * 后者多一个类(1,2,1 对 1,1,1), 是媒体查询顺序赢不了的。
 * 实测 390px: 行距 40/列距 16, 一屏 3 行; 恢复 16/12 后一屏 4 行, 卡片 165px 不挤。
 */
@media (max-width: 768px) {
  body.page-home #contentArea.is-yt-home-flat,
  body.page-home #contentArea.yt-card-grid {
    gap: 16px 12px !important;
  }
}

/* ── 8. 分类胶囊行比全页少缩进 12px ─────────────────────────────────
 * 实测 390px: #sortFilterBar 的 computed padding 是 0 12px 8px 12px(不是
 * cb-browse-bundle.css 里那条 12px 24px, 后面还有一条更晚加载的规则改了它),
 * 于是首颗胶囊 "全部" 左边 x=12, 而网格首卡 / 热词框 / 短剧合集标题都在 x=24。
 * 整行左移 12px, 视觉上和下面网格对不齐。右侧同步补 24px, 让横向滚到尽头时
 * 最后一颗胶囊不贴边。
 */
body.page-home #sortFilterBar,
body.page-home .sort-filter-bar {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── 9. page-shell 把 footer 当成了右侧第二列 ─────────────────────────
 * .page-shell 是 display:flex / row / nowrap, 三个直接子元素是
 * nav.yt-mini-guide + main.page-wrap + footer.site-footer —— 于是 footer 不再
 * 是"页脚", 而是和正文并排的一列。实测(1440 视口):
 *   nav 240 | main 633 | footer 567      ← 正文右侧空掉 567px 给页脚
 * 1024/820 下 nav 已 display:none, footer 仍占 567, main 只剩 457/253。
 * 390 下 main 只剩 48px(= 它自己的左右 padding), 内容宽度为 0 —— /vip 整页
 * 塌成一条 30px 宽的字柱, 文档高 10,295px, FAQ 按钮量出来 8×125。
 * .page-wrap 的 flex:1 1 0% 让它在 flex 收缩里永远抢不到空间, 越窄越惨。
 *
 * 修法: 允许换行, footer 独占一整行。桌面仍是 nav+main 一行、页脚在下;
 * 移动端 nav 已隐藏, main 直接吃满整宽。
 */
.page-shell {
  flex-wrap: wrap !important;
}
.page-shell > .site-footer {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}



/* ── 10. /girlfriend 空着一个 400×430 灰框 ────────────────────────────
 * 未选女友时 .gfz-hero-fig 里没有 <img>, 但容器仍有灰色底和固定尺寸 ——
 * 首屏右上角一块空灰板。:empty 时收起; :has 让 hero 从两列变一列,
 * 不支持 :has 的浏览器只是少一列空白, 不影响阅读。
 */
.gfz-hero-fig:empty {
  display: none !important;
}
.gfz-hero:has(> .gfz-hero-fig:empty) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 头像直链挂掉时回落到名字首字, <span class="av"> 没有图片的底色,
   白底冲白底看不出是圆形头像位, 给一层淡淡的底。 */
.gfi .av,
span.av {
  background: rgba(0, 0, 0, .06) !important;
}

/* ── 11. /vip 次要文字对比度 2.85:1 ──────────────────────────────────
 * #909090 在 #f2f2f2 上 = 2.85:1, 在 #fafafa 上 = 3.06:1, 在 #fff 上 = 3.19:1,
 * 三处都低于 WCAG AA 的 4.5:1。换 #595959 后分别约 5.6 / 6.0 / 6.2。
 */
.vip-container .value,
.vip-container .price-per-day,
.vip-container .copyright,
footer.vip-footer,
footer.vip-footer * {
  color: #595959 !important;
}

/* ── 12. 全站 18+ 角标对比度 2.17:1 ─────────────────────────────────
 * sup.cb-logo-18 是 9px/700 的 #e8a317 压在白底上, 实测 2.17:1。
 * 同色系压深到 #9a6600 后约 4.9:1, 仍读作深金而不是黑。
 */
sup.cb-logo-18,
.cb-logo-18 {
  color: #9a6600 !important;
}

/* ── 13. 搜索框聚焦时零视觉反馈 ─────────────────────────────────────
 * #searchInput 是 outline:none, 键盘 Tab 进去外观完全不变。
 */
#searchInput:focus-visible {
  outline: 2px solid #065fd4 !important;
  outline-offset: 1px !important;
}
form.header-search:focus-within {
  border-color: #065fd4 !important;
  box-shadow: 0 0 0 1px #065fd4 !important;
}

/* ── 14. ≤768 头部搜索框是椭圆 ──────────────────────────────────────
 * 该断点下 #searchInput 已经 display:none, 本意是缩成一个 40px 圆按钮,
 * 但 width:40px 打不过 flex:1 1 732px —— 实测 420×40 + border-radius:50%
 * 渲染成一个横躺的椭圆。补上 flex-basis 才真的收成圆。
 */
@media (max-width: 768px) {
  form.header-search {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }
}

/* ── 15. 触摸目标下限 ───────────────────────────────────────────────
 * 头部登录 88×36、搜索按钮 40×36, 低于 40px 的可点下限(触屏上很容易点空)。
 * 只抬高高度, 不动宽度和排版。
 */
.nav-btn.primary,
.nav-btn {
  min-height: 40px !important;
}
form.header-search button {
  min-height: 40px !important;
  min-width: 40px !important;
}

/* watch 页的 18+ 角标另有一条 (0,2,1) 的 !important color, 上面的 (0,1,1) 打不动。
   抬到 (0,3,0) 才压得住。 */
.cb-shell .cb-logo-word .cb-logo-18 {
  color: #9a6600 !important;
}

/* ── 16. 卡片三点按钮 24×24 ──────────────────────────────────────────
 * VideoGridStyles.tsx 里把 .card-menu-btn 钉成 24×24 !important(≤791px 再钉一遍),
 * 触屏上按不中。视觉尺寸不改 —— 它挤在标题右侧的轨道里, 放大就会压标题 ——
 * 改用 ::before 把命中区四周各扩 8px 到 40×40。伪元素不参与布局, 网格不动。
 */
.card .card-menu-btn {
  position: relative !important;
}
.card .card-menu-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: 50% !important;
}

/* ── 17. 创作者名字只有 24px 高 ──────────────────────────────────────
 * WatchPageClient 里 author-name 是内联 padding:0 的 <button>, 竖着只有 24px,
 * 平板上点不中(实测 86×24)。内联样式只能靠 !important 压。 */
#authorName {
  min-height: 40px !important;
  padding: 8px 0 !important;
}

/* ── 18. 胶囊行/热词 chip 只有 32~36px 高 ─────────────────────────────
 * .sf-pill 52×36、.trending-tag-chip 70×32、.cb-chip 55×32 —— 手机上都是横向滚动
 * 的短标签, 高度低于 40 很容易点空。只抬高度, 圆角和字号不动。
 */
@media (max-width: 900px) {
  .sf-pill,
  .trending-tag-chip,
  .cb-chip {
    min-height: 40px !important;
  }
}

/* ── 19. 侧栏 "18 U.S.C. § 2257" 折成两行 ────────────────────────────
 * 该链接 168×33(h) 撑到 2 行, 与下一行「关于我们」「备用线路」交错,
 * 渲染成 "DMCA 18 / U.S.C. 2257 关于我们 备用线路"。链接本身不许断行。
 */
#catSideNav .yt-guide-footer a {
  white-space: nowrap !important;
}

/* ── 20. 移动端最后一行被固定底栏压住 ────────────────────────────────
 * /shorts 390: .footer-legal 底边 y=810, 底栏顶边 y=788 —— 22px 合规声明
 * ("All models were 18+…") 永远被磨砂底栏盖住, 整页只能滚 50px。
 * 底栏是 fixed 的, footer 需要自己让出这段高度。
 */
@media (max-width: 900px) {
  .site-footer {
    padding-bottom: calc(var(--bottom-nav-height, 60px) + 12px) !important;
  }
}

/* ── 21. 头部 logo 只有 29px 高 ───────────────────────────────────────
 * 106.5×29 的回首页入口, 低于 40px 下限。撑成 inline-flex 居中,
 * 视觉尺寸不动, 命中区上下各多 5px。
 */
header .logo {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── 22. 区块标题旁的「查看全部 ›」59×18 ─────────────────────────────
 * HomeFeed 里的 AI 短剧合集入口是纯内联样式的 <a href="/drama/">,
 * 只有 18px 高。撑到 40 并居中, 不改变字号和位置。
 */
a[href="/drama/"] {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── 23. 把 §1/§2 的 40px 按钮轨道收回到 24px ────────────────────────
 * §1 当初把卡片网格的第三列从 24px 撑到 40px, 是为了让 40×40 的三点按钮
 * 不压标题; §16 已经用 ::before 把命中区扩到 40×40, 伪元素不占布局,
 * 视觉尺寸不必再吃 40px。320px 下卡片只有 130px, 40px 轨道把标题列压剩
 * 82px(实测 10/48 条 "6次观看 · 2天前" 溢出); 收回 24px 后标题列 98px。
 */
body.page-home #contentArea .card.yt-card .video-info-grid,
body.page-home .grid .card.yt-card .video-info-grid,
body.page-home .card.yt-card .video-info-grid {
  grid-template-columns: minmax(0, 1fr) 24px !important;
}
body.page-home .card.yt-card .card-menu-btn,
body.page-home .card.yt-card .card-menu-btn.meta-menu {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}
body.page-home #contentArea .card.yt-card .card-menu-wrap,
body.page-home .grid .card.yt-card .card-menu-wrap,
body.page-home .card.yt-card .info .card-menu-wrap {
  grid-column: 2 / 3 !important;
}

/* ── 24. 首页时长 pill 的 40px 命中区, 补回被 bundle 权重吃掉的那条 ──
 * §18 只写了单类 `.sf-pill`(0,1,0), bundle-home 里有
 * `body.page-home #sfDurationPills .sf-pill { height:auto; min-height:32px }`
 * 权重 (1,2,1) 且同为 !important, 直接把它压死 —— 实测仍是 36px
 * (padding 8+8 + line-height 20), 小于 40px 触控下限。
 * 这里用同权重选择器正面接住; 外层 #sfDurationPills 写死 36px, 一并放开,
 * 否则 40px 的 pill 会在 36px 轨道里上下各溢出 2px。
 * 外框 #sortFilterBar 44px(min-height 44, overflow auto hidden)足够高, 不会裁。
 */
@media (max-width: 900px) {
  body.page-home #sfDurationPills .sf-pill,
  body.page-home #sortFilterBar .sf-pill,
  body.page-home .sort-filter-bar .sf-pill,
  .qf-chip,
  .cb-chip,
  .sf-pill,
  .trending-tag-chip {
    min-height: 40px !important;
  }
  #sfDurationPills,
  .sf-duration-pills {
    height: auto !important;
  }
}

/* ── 25. 顶栏「登录」按钮 88×36 —— 全站 30+ 路由共用 ─────────────────
 * `.header-nav-links .nav-btn.primary` 写死 height/min-height 36(实测
 * 88×36), 低于 40px 触控下限。桌面鼠标无所谓, ≤900px 统一抬到 40。
 * 用 inline-flex + align-items:center 保证文字仍垂直居中, 不靠 line-height 猜。
 */
@media (max-width: 900px) {
  .header-nav-links .nav-btn.primary {
    min-height: 40px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── 26. /tags/ /models/ 的 A-Z 字母索引 32×32 ───────────────────────
   * 父级 .cb-alpha 是 flex + wrap(gap 4px, 342px 宽), 26 个字母排 3 行。
   * 不能用 ::before inset:-4px 扩命中区: 行距只有 4px, 上下一行会重叠 4px。
   * 直接给到 40×40, 变成 4 行(342 / 44 = 7 个一行), 高度 176px, 可接受。
   */
  .cb-alpha > * {
    min-width: 40px !important;
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── 27. /search/ 热搜词 52×32 / 37×32 ───────────────────────────── */
  .trending-item {
    min-height: 40px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── 28. /history/ 类型筛选 chips 52×36 ──────────────────────────── */
  .cb-hist-type {
    min-height: 40px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── 29. 404 页「返回首页 / 去搜索」88×36 ────────────────────────── */
  .nf-btn {
    min-height: 40px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── 30. /search/ 顶栏 logo 只剩图标 mark, 宽 32 不足 40 ────────────
   * 其它路由是「mark + CAOBI18+」107×40; search 页只有 mark(32×40),
   * 宽度卡在 32。只补宽度, 不动 mark 本身尺寸。
   */
  .header-start .logo {
    min-width: 40px !important;
  }
}

/* ── 31. 顶栏「登录」88×36 —— §25 被 bundle 的 (0,3,2) 权重压掉了 ──────
 * bundle-home 里写的是
 *   body.page-browse header .nav-btn.primary, body.page-search header .nav-btn.primary, ... {
 *     height: 36px !important; min-height: 36px !important;
 *   }
 * 选择器权重 (0,3,2), §25 的 `.header-nav-links .nav-btn.primary` 只有 (0,2,0),
 * 同是 !important 也白给 —— 实测仍是 88×36。
 * 这里用 html+body+header 三个元素 + 三个类凑到 (0,3,3), 正面压过去。
 * 只动高度, line-height 36 保留, 40px 盒子里由 flex 居中。
 */
@media (max-width: 900px) {
  html body header .header-nav-links .nav-btn.primary,
  html body header .header-nav-links .nav-btn {
    min-height: 40px !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ── 32. /shorts/ 在 768–899 是导航死区 ───────────────────────────────
 * 实测: 768 / 820 / 1024 三个宽度下 /shorts 的 <header> 都是 display:none,
 * 侧栏 nav.yt-mini-guide 也是 none; 底部导航被 bundle 的
 *   @media (min-width: 768px) { body.page-browse #mobileBottomNav,
 *                               body.page-browse .mobile-bottom-nav { display:none !important } }
 * 一起关掉 —— 平板竖屏进 /shorts 后没有任何导航入口, 只能靠浏览器返回。
 * 到 1024 顶栏才回来(block, 56px)。
 * 这里只在 768–899 把底部导航放出来: 它是 position:fixed, 不参与文档流,
 * 不会把全屏 feed 顶歪; §20 的 footer 底部留白本来就覆盖 ≤900, 不会盖页脚。
 * 选择器用 html+body.page-browse.page-shorts 提到 (1,2,1)/(0,3,1),
 * 压过 bundle 的 (1,1,1)/(0,2,1)。
 */
@media (min-width: 768px) and (max-width: 899px) {
  html body.page-browse.page-shorts #mobileBottomNav,
  html body.page-browse.page-shorts .mobile-bottom-nav {
    display: block !important;
  }
}

/* ── 33. 移动端卡片三点菜单回到缩略图右上角 ─────────────────────────
 * bundle 原本就是 .card-menu-wrap{position:absolute;top:6px;right:6px},
 * 后来被改成 static 塞进 .video-info-grid 的第 3 轨(40px), 标题因此少 32px。
 * 390px 下标题被压成两行还打省略号, B 站移动端根本没有这个按钮 —— 标题吃满宽。
 * 这里只在 ≤700px 恢复成缩略图角标, 桌面维持原样。
 * .card 自带 position:relative, 绝对定位直接落到卡片右上角 = 封面右上角。
 *
 * ⚠ 必须带 #contentArea 变体: 首页主栏走的是 bundle 的
 * `body.page-home #contentArea .card .info`(1,3,0) 和本文 §23 的
 * 同 ID 选择器(1,4,1), 不带 ID 的选择器(0,4,1) 权重输, 单列规则会被
 * 24px 双列压回去 —— 390px 实测标题仍只剩 133px。
 */
@media (max-width: 700px) {
  body.page-home #contentArea .card.yt-card .video-info-grid,
  body.page-home #contentArea .card.yt-card .info.video-info-grid,
  body.page-home .card.yt-card .video-info-grid,
  body.page-home .card.yt-card .info.video-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    /* 信息区在 bundle 里是 position:relative, 绝对定位的 ⋮ 会锚到信息区右上
       (标题上方) 而不是封面。置 static 后锚点是 .card(position:relative),
       才会落回缩略图右上角。桌面段不动。 */
    position: static !important;
  }
  body.page-home #contentArea .card.yt-card .card-menu-wrap,
  body.page-home .card.yt-card .card-menu-wrap {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    justify-self: auto !important;
    align-self: auto !important;
    z-index: 4 !important;
  }
  /* 深色封面上的白字按钮要自带底 */
  body.page-home #contentArea .card.yt-card .card-menu-btn,
  body.page-home #contentArea .card.yt-card .card-menu-btn.meta-menu,
  body.page-home .card.yt-card .card-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  body.page-home .card.yt-card .card-menu-btn:hover {
    background: rgba(0, 0, 0, 0.75) !important;
  }
}

/* ── 34. 剧集页「接下来播放」分隔标头 ────────────────────────────────
 * cb-watch-boot.js 用 inline !important 把 .next-up-head 藏了(内联 !important
 * 任何样式表都盖不住), 非剧集页没有标头是 YouTube 行为, 没问题。
 * 但剧集页现在把推荐列表接在剧集卡下面, 没有标题会看成同一个列表 ——
 * 这里给一个只在 body.has-series-list 时出现的标头。
 */
.cb-side-nextup-label { display: none; }
@media (min-width: 901px) {
  body.has-series-list .cb-side-nextup-label {
    display: block;
    margin: 12px 0 4px;
    padding: 10px 6px 6px;
    border-top: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--text-primary, #0f0f0f);
  }
}

/* ── 35. 搜索页筛选条写死 1050.8px, 手机上把「筛选」顶出屏幕 ──────────
 * bundle 里 html body.page-search .quick-filters{width:1050.8px!important}
 * 是照桌面内容宽量出来的死值。390px 下父容器只有 366, 整条撑到 1063,
 * 「筛选」按钮落在 x≈987~1063, 而 html/body 都是 overflow-x:hidden ——
 * 滚不过去也点不到, 手机上等于没有筛选功能。
 * 改成 100% 后交给它自带的 overflow-x:auto 横向滚动承载。
 * 桌面(>900px)不动: 那边 1050.8 正好贴合结果区宽度。
 */
@media (max-width: 900px) {
  html body.page-search .quick-filters,
  html body.page-search #quickFilters {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ═══ 36. 设计 token 落地(2026-10-27) ═════════════════════════════════
 * 参考 B 站首页实测: 画布 #F1F2F3(不是纯白), 墨 #18191C, 卡片标题 15/22,
 * meta 13/18, 卡片本身无边框无阴影 —— 内容图自己发光。
 * 本站沿用黄铜色 --pri 作唯一强调色, 只补台面/字阶/层级, 不做换皮。
 */
:root {
  --canvas: #F4F4F2;
  --paper: #ffffff;
  --ink: #14130f;
  --mute: #6b6a66;
  --line-soft: rgba(20, 19, 15, 0.08);
  --brass-ink: #8a5d00;
  --r-thumb: 12px;
}

/* 台面只铺首页和浏览页 —— 播放页保持纯白, 正文和播放器都在白底上更稳 */
body.page-home,
body.page-browse {
  background: var(--canvas) !important;
}

/* 台面上的浅灰块会糊成一片, 统一抬成纸白 */
body.page-home .trending-tag-chip,
body.page-browse .qf-chip {
  background: var(--paper) !important;
  border: 1px solid var(--line-soft) !important;
}

/* 卡片字阶: 标题 15/22, 与 B 站一致; meta 12/18 走 --mute + 等宽数字 */
body.page-home #contentArea .card.yt-card .video-title,
body.page-home #contentArea .card.yt-card .desc.video-title,
body.page-browse #contentArea .card.yt-card .video-title {
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  color: var(--ink);
}
body.page-home #contentArea .card.yt-card .video-stats,
body.page-browse #contentArea .card.yt-card .video-stats {
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--mute) !important;
  font-variant-numeric: tabular-nums;
}

/* 时长 pill: 圆角 6, 内缩 8, 12/600 —— 原来的 4px 圆角 + 5px 内缩偏紧 */
body.page-home #contentArea .card.yt-card .cb-duration,
body.page-home #contentArea .card.yt-card .video-time,
body.page-browse #contentArea .card.yt-card .cb-duration {
  right: 8px !important;
  bottom: 8px !important;
  padding: 0 6px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  background: rgba(0, 0, 0, 0.78) !important;
}

/* hover: 封面 1.03 缓推 + 标题转黄铜深色。只在有指针的设备上生效 */
@media (hover: hover) and (pointer: fine) {
  body.page-home #contentArea .card.yt-card > a img,
  body.page-browse #contentArea .card.yt-card > a img {
    transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
    will-change: transform;
  }
  body.page-home #contentArea .card.yt-card:hover > a img,
  body.page-browse #contentArea .card.yt-card:hover > a img {
    transform: scale(1.03);
  }
  body.page-home #contentArea .card.yt-card:hover .video-title,
  body.page-browse #contentArea .card.yt-card:hover .video-title {
    color: var(--brass-ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.page-home #contentArea .card.yt-card > a img,
  body.page-browse #contentArea .card.yt-card > a img { transition: none !important; }
  body.page-home #contentArea .card.yt-card:hover > a img,
  body.page-browse #contentArea .card.yt-card:hover > a img { transform: none !important; }
}

/* ── 首屏「短剧带」: 黄铜竖标 + 等高卡带 ─────────────────────────
 * 2026-10-27: 撤掉 2 倍宽 feature 卡。16:9 宽卡比窄卡高出近一倍, 标题
 * 落在两条不同基线上, 整条带子看起来是断的(v19 截图实测)。统一卡宽后
 * 一行到底, 靠卡宽 232 > 网格卡、标题字号、黄铜标建立层级。
 */
.cb-shelf-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.cb-shelf-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  position: relative;
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cb-shelf-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  border-radius: 2px;
  background: var(--pri, #e8a317);
}
.cb-shelf-title i { display: none; }
.cb-shelf-more {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  color: var(--mute);
  text-decoration: none;
}
.cb-shelf-more:hover { color: var(--brass-ink); }
.cb-shelf-rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.cb-shelf-rail::-webkit-scrollbar { display: none; }
.cb-shelf-rail > a {
  flex: 0 0 232px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  display: block;
  scroll-snap-align: start;
}
.cb-shelf-rail img { transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) {
  .cb-shelf-rail > a:hover img { transform: scale(1.03); }
  .cb-shelf-rail > a:hover .cb-shelf-name { color: var(--brass-ink); }
}
.cb-shelf-name {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .cb-shelf-rail > a { flex: 0 0 200px; }
}

/* ── 37. 移动端热门搜索: 横向滚动, 不许把第 4 张 chip 切成半截 ────
 * v19 截图 390px: 第 4 个 chip 在容器右沿被硬裁, 看着像渲染坏了。
 * 换成横向滚动 + 右沿渐隐遮罩, 半露 + 淡出才是「还能滑」的提示。
 * 面板右边距清零、滚动区自己留 24px 尾部, 保证滑到底时最后一张不被遮。
 */
@media (max-width: 700px) {
  #mainContent > .trending-tags-bar .trending-tags-inner,
  body.page-home #mainContent > .trending-tags-bar .trending-tags-inner {
    padding-right: 0 !important;
  }
  #mainContent > .trending-tags-bar .trending-tags-scroll,
  body.page-home #mainContent > .trending-tags-bar .trending-tags-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 24px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
  #mainContent > .trending-tags-bar .trending-tags-scroll::-webkit-scrollbar { display: none; }
  #mainContent > .trending-tags-bar .trending-tag-chip,
  body.page-home #mainContent > .trending-tags-bar .trending-tag-chip {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}

/* ── 38. 短剧带封面圆角对齐网格卡 ────────────────────────────────
 * HomeFeed 里写死 10px 内联, 网格卡走 --r-thumb: 12px, 同一屏两种圆角。
 */
.cb-shelf-rail > a > div:first-of-type { border-radius: var(--r-thumb, 12px) !important; }

/* ── 39. /trending/ 榜单: 前三名大卡 + 第 4 名起编号行 ─────────────
 * 原来用 MotionCard 网格渲染, 四列卡跟首页一模一样, 唯一区别是标题写着「趋势」;
 * 每张卡还重复同一个频道名和占位头像, 整页像没数据。榜位号才是这一页的信息。
 */
body.page-trending .cb-trend-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.cb-trend-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  text-decoration: none;
  color: inherit;
}
.cb-trend-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-thumb, 12px);
  overflow: hidden;
  background: var(--panel-soft, #f2f2f2);
}
.cb-trend-thumb::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cb-trend-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1);
}
/* 桌面: rank 与 thumb 叠在同一格, 靠自身对齐落在缩略图左下角 */
.cb-trend-card > .cb-trend-thumb { grid-area: 1 / 1; }
body.page-trending .cb-trend-item .cb-trend-title { grid-area: 2 / 1; }
body.page-trending .cb-trend-item .cb-trend-meta { grid-area: 3 / 1; }
.cb-trend-rank {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: start;
  z-index: 1;
  margin: 0 0 6px 12px;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.cb-trend-dur {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}
.cb-trend-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 10px 0 2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  color: var(--ink);
}
.cb-trend-meta {
  display: block;
  font-size: 12px;
  line-height: 18px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.cb-trend-meta b { font-weight: 600; color: var(--ink); }

body.page-trending .cb-trend-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.cb-trend-row { border-top: 1px solid var(--line-soft); }
.cb-trend-row a {
  display: grid;
  grid-template-columns: 44px 176px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  text-decoration: none;
  color: inherit;
}
.cb-trend-rowrank {
  text-align: right;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.cb-trend-row:first-child { border-top: 0; }
.cb-trend-rowthumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel-soft, #f2f2f2);
}
.cb-trend-rowthumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.24s cubic-bezier(0.2, 0, 0, 1); }
.cb-trend-rowtext { min-width: 0; }
.cb-trend-rowtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--ink);
}
.cb-trend-row:hover .cb-trend-rowtitle,
.cb-trend-card:hover .cb-trend-title { color: var(--brass-ink); }
@media (hover: hover) and (pointer: fine) {
  .cb-trend-card:hover .cb-trend-thumb img,
  .cb-trend-row:hover .cb-trend-rowthumb img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .cb-trend-thumb img, .cb-trend-rowthumb img { transition: none; }
  .cb-trend-card:hover .cb-trend-thumb img,
  .cb-trend-row:hover .cb-trend-rowthumb img { transform: none; }
}

@media (max-width: 700px) {
  body.page-trending .cb-trend-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 22px;
  }
  .cb-trend-rank { font-size: 34px; left: 10px; bottom: 4px; }
  .cb-trend-title { margin-top: 8px; font-size: 15px; line-height: 21px; }
  .cb-trend-row a {
    grid-template-columns: 26px 112px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
  }
  .cb-trend-rowrank { font-size: 14px; }
  .cb-trend-rowtitle { font-size: 14px; line-height: 20px; -webkit-line-clamp: 2; }
  .cb-trend-dur { font-size: 11px; line-height: 16px; right: 6px; bottom: 6px; }
}

/* §40 /trending 移动端榜单结构
   v22 在手机上把前三名渲染成三张全宽大卡 (缩略图 16:9 撑满 390px),
   一屏只放得下 2 条 —— 榜单页变成又一个信息流, 假味就是从这来的。
   前三名改行式: 排名数字 / 缩略图 / 标题+时间, 和 4 名起的列表同一套骨架,
   靠更大的排名数字区分名次。一屏可看 5 条。 */
@media (max-width: 700px) {
  body.page-trending .cb-trend-top {
    display: block;
    margin-bottom: 0;
  }
  body.page-trending .cb-trend-item {
    border-top: 1px solid var(--line-soft) !important;
  }
  body.page-trending .cb-trend-item:first-child {
    border-top: 0;
  }
  /* 通用视频卡覆盖层对 .cb-trend-card 下了 display:block/padding:0/!important,
     这里必须同等 important 才压得住(选择器权重更高) */
  body.page-trending .cb-trend-item > .cb-trend-card {
    display: grid !important;
    grid-template-columns: 26px 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    padding: 10px 0 !important;
  }
  .cb-trend-item .cb-trend-thumb {
    grid-area: 1 / 2 / span 2 / span 1;
    border-radius: 8px;
    align-self: center;
  }
  .cb-trend-item .cb-trend-thumb::after { display: none; }
  .cb-trend-item .cb-trend-rank {
    grid-area: 1 / 1 / span 2 / span 1;
    align-self: center;
    justify-self: end;
    margin: 0;
    font-size: 22px;
    line-height: 1;
    text-align: right;
    color: var(--mute, #6B6A66);
    text-shadow: none;
  }
  body.page-trending .cb-trend-item .cb-trend-title {
    grid-area: 1 / 3;
    align-self: end;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
  }
  body.page-trending .cb-trend-item .cb-trend-meta {
    grid-area: 2 / 3;
    align-self: start;
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 18px;
  }
}

/* ── 41. 短页面正文区露灰底 ─────────────────────────────────────────
 * .page-shell 是 align-items:flex-start, main.page-wrap 只有内容高度,
 * 内容短时下方露出 body 的 #F4F4F2 —— /models 只有一个创作者时,
 * 内容区 531px 之后整片灰到页脚。侧栏自己有固定 height, stretch 不影响它。
 */
body.page-browse .page-shell { align-items: stretch !important; }

/* ── 42. /models 单一创作者 ─────────────────────────────────────────
 * 全站媒体都挂在官方一个账号下, 4 列网格里孤零零一个圆形头像 + 大片空白。
 * 单条目时把卡片做成横向横幅, 头像在左, 名字和视频数在右。
 */
@media (min-width: 701px) {
  html body.page-models .cb-model-grid.is-single {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.page-models .cb-model-grid.is-single .cb-model-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: center;
    padding: 20px;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
  }
  body.page-models .cb-model-grid.is-single .cb-model-av {
    grid-area: 1 / 1 / span 2 / span 1;
    width: 96px;
    height: 96px;
    margin: 0;
  }
  body.page-models .cb-model-grid.is-single .cb-model-name {
    grid-area: 1 / 2;
    align-self: end;
    text-align: left;
    font-size: 20px;
    line-height: 28px;
  }
  body.page-models .cb-model-grid.is-single .cb-model-sub {
    grid-area: 2 / 2;
    align-self: start;
    text-align: left;
    font-size: 13px;
    line-height: 20px;
  }
}