/* hg-shell.css —— 全站公共覆盖样式（原 components/hg/shell.tpl 里 hg/head 的内联 <style>）。

   【为什么外置】SEO 需求 9.24 第 29 条：/ai-duanju/ 的 HTML 要压到 200KB 以内。这块约 22KB 的规则
   原先每个页面的 HTML 都内联一份；外置后浏览器按 ?v= 版本号长缓存（immutable 一年），
   全站所有引 hg/head 的页面 HTML 都跟着变小。

   【层叠顺序】hg/head 里的 <link> 就放在原 <style> 所在的位置：zui.css → common.css →（Yandex/
   站点验证/反镜像注入）→ 本文件 → hg/user-avatar-style 的小段内联 <style>。
   本文件内的规则顺序与原内联块逐条一致，挪位置或调换顺序都会改变同优先级规则的胜负。

   【仍留在模板里的部分】hg/user-avatar-style 这段是 {{template}} 引入的共享片段
   （cyber-user.tpl / post-detail.tpl 也引用它），保持单一事实源，留在 hg/head 内联。

   【改本文件后】必须 bump internal/handler/web/assets.go 的 defaultAssetVersion，
   否则浏览器与 CDN 继续读旧版（带 ?v= 的请求是 immutable 长缓存）。

   不写进 common.css：那是前端交付件，出包会整份覆盖（与原内联块的约定一致）。
   注释里提到的「本层 / 本文件 / hg/head 的 <style>」均指这份样式。 */

/* 无 width/height 的 img：common.css 写死 object-fit:cover，框比例与图不一致时会被裁切看不全。
     改为 contain，整图缩放进框（留白用占位底色）。不改 common.css（前端出包会覆盖）。 */
img:not([width]):not([height]){-o-object-fit:contain;object-fit:contain}
/* 全局顶栏 / H5 抽屉 logo：common.css 给 Web 38px、H5 34px、抽屉 32px，偏小看不清。
     这里就地放大（!important 压过 common）；不改 common.css（前端出包会覆盖）。
     Web 顶栏高 78px → 50px；H5 顶栏高 56px → 42px；抽屉头 → 40px。 */
.hg-header__logo img{height:50px!important;width:auto!important}
.hg-mobile-nav__logo img{height:40px!important;width:auto!important}
@media (max-width:1023px){.hg-header__logo img{height:42px!important}}
/* PC 顶栏右侧：稿 1428:13269「登录/注册」黄胶囊；登录后换成 1356:20115 圆形头像。
     只在 ≥1024 显示，H5 仍走抽屉里的登录入口。 */
.hg-header__auth{display:none;align-items:center;flex-shrink:0;margin-left:4px}
@media (min-width:1024px){.hg-header__auth{display:flex}}
button.hg-header__login.hg-header__login{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:94px;height:32px;margin:0;padding:0 12px;border:0;border-radius:999px;
  background-image:linear-gradient(90deg,#ffd21c,#f5a623);background-color:#ffd21c;
  color:#000;font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;cursor:pointer
}
button.hg-header__login.hg-header__login:hover{filter:brightness(1.05)}
/* 禅道 44577：PC 顶栏导航在中等桌面宽度下被裁掉半个字（最后一项「回家的路」最明显）。
     成因：.hg-header__inner 是 flex，logo(50px 高→136px 宽)/搜索框(240~420px 定宽)/登录按钮(94px)
     全是 flex-shrink:0 的定宽件，只有 .hg-topbar-nav 是 flex:1 1 auto + min-width:0 + overflow-x:auto，
     放不下时全部由导航吞下——它被裁剩一截，滚动条又被 scrollbar-width:none 藏了，看起来就是「标题少一半」。
     实测（9 个导航项，nav 内容宽 643px@<1280 / 695px@≥1280）1024~1620 整段都在裁，1280 处最狠（溢出 231px）。
     按「导航优先、搜索让位」分三段处理；不改导航项与顺序、不换行（顶栏仍 78px）、不出横向滚动。
     这里就地覆盖，不动 common.css（前端出包会覆盖），与本文件其它顶栏覆盖的既有约定一致。 */
/* 一、≥1024 通用：把收缩权重压到搜索框上。原来 flex 是 0 0 <basis>（完全不收缩），
     改成大收缩因子后，空间不够时先收搜索框（收到 common.css 已有的 min-width:200px 为止），
     导航保持内容宽度；搜索框收到底仍不够时才轮到导航裁切，兜底行为与改动前一致。
     不用 flex-shrink:0 锁死导航，是为了避免极端情况（比如运营再加频道）把登录按钮挤出屏幕。 */
@media (min-width:1024px){.hg-header__search{flex-shrink:999}}
/* 二、1280~1599：仅靠收搜索框还差约 40px。--hg-page-gutter 在 ≥1280 跳到 96px，
     左右合计吃掉 192px，正是这段放不下的主因；顶栏留白单独封顶 56px（正文仍用 96px 不动），
     导航项内边距 12→10、间距 6→4 一起收。实测 1280 处搜索框收到 221px（离 200px 下限还有 21px 余量）。 */
@media (min-width:1280px) and (max-width:1599px){
  .hg-header__inner{padding-left:min(var(--hg-page-gutter),56px);padding-right:min(var(--hg-page-gutter),56px)}
  .hg-topbar-nav{gap:4px}
  .hg-topbar-nav__item{padding:0 10px}
}
/* 三、1024~1279：9 个导航项(最紧也要 599px)+logo 136+登录 94+留白，横竖凑不出 200px 给搜索框，
     纯调数值无解。这段把顶栏搜索框收成放大镜图标，点一下在顶栏下方展开整条搜索——
     直接复用 H5 已有的 .hg-header__search-btn + .hg-header.is-mobile-search 展开态（JS 是 class 驱动，
     见 common.js openMobileSearch/closeMobileSearch），不新增脚本。展开面板底色用 PC 顶栏的 #0d0d0d。 */
@media (min-width:1024px) and (max-width:1279px){
  .hg-header__inner{position:relative;padding-left:min(var(--hg-page-gutter),40px);padding-right:min(var(--hg-page-gutter),40px)}
  .hg-topbar-nav{gap:3px}
  .hg-topbar-nav__item{padding:0 8px}
  /* .lg\:hidden 只是 display:none（无 !important），本文件在 common.css 之后，同权重后写覆盖 */
  .hg-header__search-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;background:0 0;flex-shrink:0;cursor:pointer}
  .hg-header__search-btn img{display:block;width:24px!important;height:24px!important;max-width:none!important}
  /* 放大镜在 DOM 里排在「登录/注册」之后（H5 那边登录是隐藏的，顺序无所谓）。
       PC 上搜索图标应在账号左侧，用 order 把登录按钮排到最后，不动模板结构。 */
  .hg-header__auth{order:1}
  .hg-header__search{display:none;position:absolute;left:0;right:0;top:100%;z-index:90;width:auto;min-width:0;padding:12px min(var(--hg-page-gutter),40px);background:#0d0d0d;border-bottom:1px solid rgba(255,255,255,.08);justify-content:stretch}
  .hg-header.is-mobile-search .hg-header__search{display:flex}
  .hg-header.is-mobile-search .hg-search{max-width:none}
  /* 搜索建议弹层的定位基准是 .hg-header__search。PC 版（下方 @media(min-width:1024px)）
       按「表单贴顶栏右侧」右对齐并外伸到 right:calc(16px - gutter)；这里表单已改成整条宽，
       再外伸就会溢出视口右侧。改成跟着搜索条左对齐、保留 576px 原宽。
       用 .hg-header.is-mobile-search 前缀（0,2,0）压过后写的 .hg-search-suggest（0,1,0），
       不依赖书写顺序；未展开时表单是 display:none，本就看不到，限定展开态即可。 */
  .hg-header.is-mobile-search .hg-search-suggest{left:min(var(--hg-page-gutter),40px);right:auto;width:576px;max-width:none;transform:none;top:calc(100% + 8px)}
}
.hg-header .cyber-user{position:relative;flex-shrink:0}
.hg-header .cyber-user__avatar{
  width:50px;height:50px;padding:0;border:0;border-radius:25px;overflow:hidden;
  display:block;background:#fff;cursor:pointer;box-shadow:none;text-decoration:none
}
.hg-header .cyber-user__avatar img{display:block;width:50px;height:50px;object-fit:cover}
/* 色块头像（JS 插的是 hg-avatar--md=56px）必须跟着容器缩到 50px：容器 overflow:hidden，
   不缩就是「56 的圆被 50 的框裁一圈」，字也按 56 档的 22px 显得过大。
   与上一行 img 的 50px 规则对称，做法同 .hg-settings__avatar .hg-avatar。
   字号取边长 ~0.42 倍（50×0.42≈21），与 hg/user-avatar-style 里各档的比例一致。 */
.hg-header .cyber-user__avatar .hg-avatar{width:100%;height:100%;font-size:21px}
/* 「系统消息未读数」红色角标（PC 顶栏头像 / H5 抽屉底部头像 / 将来的消息入口共用）。
     全站只写这一份：其它页面出角标一律复用 class .hg-unread-badge + [data-unread-host]，
     别各自再抄一套尺寸配色，否则同一枚红点在不同页面一处大一处小。
     数据与重绘走 window.HgUnread（实现在 pages/hg-auth-modal.js）。

     ⚠️ 角标为什么不能挂进头像元素里：上面那条 .hg-header .cyber-user__avatar 带
     overflow:hidden（用来把方图裁成圆头像），而角标是要往框外探出 2px 的，
     塞进去会被连角带边整整齐齐裁掉、页面上完全看不见。抽屉底部的 .mobile-user__ava
     同样是 overflow:hidden（cyber-overrides.css:341）。所以两处角标都挂在头像的**外层**：
     顶栏挂 .cyber-user，抽屉由 cyber-shell.js 在头像外再包一层 .mobile-user__avawrap。

     [data-unread-host] 是「角标宿主」的统一标记：JS 只往带这个属性的元素里插角标，
     这条 position:relative 保证宿主是绝对定位的基准（.hg-header .cyber-user 第 258 行
     已经是 relative，这条是给抽屉包层和将来新增的宿主兜底，不必每处再补写）。 */
[data-unread-host]{position:relative}
.hg-unread-badge{
  position:absolute;top:-2px;right:-2px;z-index:2;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--color-red,#ff3332);color:#fff;
  font-size:11px;font-weight:600;line-height:1;white-space:nowrap;pointer-events:none
}
/* 角标自带 display:inline-flex，会压过浏览器默认的 [hidden]{display:none}（UA 样式表权重最低），
     于是 SSR 直接吐 <span class="hg-unread-badge" hidden> 的地方不写这条根本藏不住。
     本条特异性 (0,2,0) 高于上一条 (0,1,0)，无需 !important。 */
.hg-unread-badge[hidden]{display:none}
/* 抽屉底部头像的角标包层（由 cyber-shell.js applyUser 注入）。.mobile-user 是 flex 行，
     包层取 inline-flex + 不收缩，行内布局与「只有 .mobile-user__ava」时逐像素一致。 */
.mobile-user__avawrap{display:inline-flex;flex-shrink:0}
/* 移动端的未读入口。PC 顶栏那枚头像在 <1024px 是 display:none（.hg-header__auth 的
     设计如此，H5 的登录入口一直在侧边抽屉里），所以手机上没有头像可挂角标，
     改挂在「进得去个人中心」的两个入口上，数据同样由 window.HgUnread.paint 驱动：
       · 汉堡按钮 —— 抽屉是收起的，不在这里露一下，用户根本不知道要去打开它；
       · 抽屉里的「个人中心」那一项 —— 打开抽屉后指向未读的落点。
     两处都是 SSR 出的静态 DOM，只打 data-unread-host 标记，角标节点由 HgUnread 增删；
     未登录时 HgUnread 恒 0、不建节点，不会给游客一个点不掉的红点。 */
.hg-header__menu[data-unread-host] .hg-unread-badge{top:2px;right:2px}
/* 抽屉里的「个人中心」：角标咬在左侧导航图标的右上角，与个人中心页的功能入口卡
     （hg-profile.tpl 的 .hg-profile-card__icon .hg-unread-badge）同一套读法。
     这样三处角标——顶栏头像、抽屉导航、功能入口卡——统一成「锚在图标上」。

     【为什么不把角标塞进 .hg-nav-icon 里】那个 span 是用 -webkit-mask 画图标的
     （hg.css：mask:var(--hg-nav-icon) center/contain no-repeat），**mask 会连子元素
     一起裁**，角标塞进去只会露出图标形状内的那一小块。所以宿主仍留在 .hg-nav-item 上，
     靠绝对定位对齐过去。

     【坐标怎么来的】项内 padding 0 12px、图标 17×17 且垂直居中（项高 40）：
     图标占据 left 12~29、top 11.5~28.5。取 left:29px 把角标中心钉在图标右上角，
     再用 translateX(-50%) 让它向两侧均匀扩展 —— 数字变成 99+ 时不会单向撑过去压住
     右边的文字（文字从 left 41px 起）。
     顺带也彻底避开了激活态行末那根 4×18 的黄色指示条（is-active::after，距右 12px），
     不必再像上一版那样靠 right:24px 的间距去躲它。

     尺寸收到 14px：图标本身只有 17px，沿用卡片上的 17px 角标会盖掉大半个图标。 */
.hg-mobile-nav__list .hg-nav-item[data-unread-host] .hg-unread-badge{
  left:29px;top:4px;right:auto;transform:translateX(-50%);
  min-width:14px;height:14px;padding:0 3px;font-size:9px;
  border:2px solid var(--color-dark,#0a0a0a)
}
.hg-header .cyber-user__menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:180px;padding:6px;z-index:12010;
  border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#111;
  box-shadow:0 16px 40px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s
}
.hg-header .cyber-user.is-open .cyber-user__menu{opacity:1;visibility:visible;transform:none}
.hg-header .cyber-user__head{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.hg-header .cyber-user__ava{width:32px;height:32px;border-radius:16px;overflow:hidden;flex-shrink:0;background:#fff}
.hg-header .cyber-user__ava img{display:block;width:32px;height:32px;object-fit:cover}
/* 同上：下拉菜单里的 32px 小头像，色块也要跟着缩（32×0.42≈13）。 */
.hg-header .cyber-user__ava .hg-avatar{width:100%;height:100%;font-size:13px}
.hg-header .cyber-user__name{min-width:0;color:#fff;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hg-header .cyber-user__item{
  display:flex;align-items:center;width:100%;margin:0;padding:10px 12px;border:0;border-radius:8px;
  background:transparent;color:rgba(255,255,255,.78);font-size:14px;text-align:left;cursor:pointer
}
.hg-header .cyber-user__item:hover{background:rgba(255,210,28,.12);color:#ffd21c}
/* 列表卡片（hg/drama-card，首页/频道/搜索/标签/专题/博主页共用）三项返工：
     1) 去「卡片盒」：common.css 给 .hg-drama-card 底色 + 描边 + 阴影 + 16px 内边距(H5 是 #1c1c1c 整块)，
        四列铺开一片方块、封面和文字被框在同一个盒子里。这里改成封面独立圆角、
        标题/简介/标签直接落在页面底色上，卡片本身只当布局容器。
     2) 评分收轻：原样式是右下角 24px 金色渐变大色块(斜切圆角)，改成半透明深色小胶囊 + 金色数字，
        从边角内缩，不再压住封面。
     3) 标签只留一行：见下方「全站视频卡标签只展示一排」，那条按 --hg-tag-h 统一裁行，
        这里只调标签行与简介的间距，不重复限高。
     盒子/间距的改动作用域在 .hg-card-grid 与播放页相关推荐；评分是全站一致的小胶囊。
     不改 common.css（前端出包会覆盖）。 */
/* 封面链接（需求八②把 <a> 从卡片外层搬进了 hg/drama-card-cover 内部）。

     display:contents 是**必须**的，不能写 display:block：<a> 一旦生成盒子，
     就插进了 .hg-drama-card__cover → <img> 之间，封面那条 height/aspect-ratio
     的继承链当场断掉，图会塌成原始比例。改造前外层那个 <a> 用的也正是
     display:contents，这里只是把同一条规则跟着元素挪进来，版式零变化。

     代价是 <a> 没有自己的盒子，可点区域 = <img>。角标是绝对定位盖在图上的，
     挪出 <a> 后点在角标上就不再冒泡到链接，所以给角标 pointer-events:none
     让点击穿透 —— 角标纯展示，本来也没有自己的交互。 */
.hg-drama-card__cover-link{display:contents}
/* 热搜榜「拉伸链接」（需求八，见下方 hg-search-suggest__hot 处的说明）：
     ::after 铺满整行恢复整行可点。common.css 里 .hot-item:hover .hot-title 的
     变色规则照常生效 —— hot-item 仍是同一个类名，只是元素从 <a> 换成了 <div>。 */
.hg-search-suggest__hot-item{position:relative}
a.hg-search-suggest__hot-title{text-decoration:none;color:inherit}
a.hg-search-suggest__hot-title::after{content:"";position:absolute;inset:0}
.hg-drama-card__cover .hg-drama-card__badge,
.hg-drama-card__cover .hg-drama-card__score,
.hg-drama-card__cover .hg-drama-card__episode{pointer-events:none}
.hg-card-grid .hg-drama-card,
.hg-play__related .hg-drama-card{padding:0;gap:0;background:transparent;border-color:transparent;border-radius:0;box-shadow:none;overflow:visible}
.hg-card-grid .hg-drama-card:hover,
.hg-play__related .hg-drama-card:hover{transform:none;border-color:transparent}
.hg-play__related .hg-drama-card__cover{border-radius:10px}
.hg-play__related .hg-drama-card__body{padding:8px 0 0}
.hg-card-grid .hg-drama-card__cover{border-radius:12px}
.hg-card-grid .hg-drama-card__body{padding:10px 0 0}
/* 封面框比例统一 9:12（3:4 竖版）。common.css 把它写死成 374/420(PC，≈8:9)、1/1(H5)、
     124/148(搜索建议)，配 object-fit:cover，720×1280 的竖封面上下会被裁掉一大截。
     9:12 比原来高、比封面原始的 9:16 矮，取的是「多露出画面」与「一屏还能看到几行」之间的折中。
     选择器要盖住 common.css 的两处覆写：H5 的 1/1 与本条同特异性、靠后置生效，
     搜索建议那条特异性更高、必须原样列出。不改 common.css（前端出包会覆盖）。 */
.hg-drama-card__cover,
.hg-search-suggest__guess .hg-drama-card__cover{aspect-ratio:9/12}
/* 封面整图完整展示：common.css 是 object-fit:cover（填满框、超出的部分裁掉），
     框 9:12 而图 9:16，竖图上下就会被切。改成 contain 后按图自身比例缩放装进框，
     一个像素都不裁；9:16 的图在 9:12 框里高度先顶满，宽度只剩框宽的 75%，
     左右各露出约 12.5% 的框底色（--color-image-placeholder）。
     框越接近 9:16 留白越少、卡片越高，两者只能二选一，调上面那条比例即可。
     横版封面(16:9)同理完整展示，改为上下留白。 */
.hg-drama-card__cover img{-o-object-fit:contain;object-fit:contain}
/* 占位图例外：铺满整框（2026-08-21）。
     上面那条 contain 是为**真实封面**定的 —— 9:16 的封面装进 9:12 框，一个像素都不裁。
     但占位图（无封面/解密失败时的兜底）是站方水印图、不是内容画面：contain 会让它
     按自身 1122×1260 缩进框里，上下各留一条底色，与旁边真实封面高低不齐、看着像没加载完。
     改 cover 后铺满整框，左右各裁约 34px —— logo 居中，裁掉的是空白边，不损失信息。
     特异性 (0,2,1) 高过上面那条 (0,1,1)，无需 !important。 */
.hg-drama-card__cover img[src*="cover-placeholder"],
.hg-topic-card img[src*="cover-placeholder"]{-o-object-fit:cover;object-fit:cover}
/* 卡片流里的广告圆角（配合 hg/ssp-slot 的 Radius 参数，见那边的长注释）。
     半径由容器上的 --hg-ssp-radius 传下来，没传 Radius 的位取兜底值 0 → 本规则不生效，
     横幅等方角位不受影响。
     为什么要作用到内部节点：feed/native 卡的可见白底是素材图，只占容器上部的媒体盒，
     容器下面还有约 36px 标题行；只给容器加圆角会看成「上圆下方」。
     [data-ssp-media-wrap] 与 img 是 AdSDK 稳定的结构钩子（中间几层是匿名 div，别指望）。 */
.hg-ssp-slot [data-ssp-media-wrap],
.hg-ssp-slot img{border-radius:var(--hg-ssp-radius,0)}
/* layout="single"：只渲染第 1 帧，不轮播（配合 ssp-mount.js 里同名哨兵，见那边的长注释）。
     SDK 不传 layout 时是竖向堆叠 N 条，这里把第 2 条起隐藏，于是一个位只出一张、
     高度也就等于单张 —— 卡片流里的位必须如此，堆两张会把邻卡挤走。
     为什么不用 carousel：那条路 SDK 会在捕获阶段拦 click 判拖拽，且自动换帧时
     按下与抬起可能跨帧，导致链接点不动（2026-08-25 吃瓜列表实测）。

     ⚠️ 本规则只负责「最多露一张」，**露哪一张由 ssp-mount.js 的 applySingleFrame 随机决定**
     （平台返回的素材顺序是固定的，只留第 1 帧等于第 2 条永远拿不到曝光）。
     这条留着是 JS 生效前的兜底：素材插进 DOM 到 JS 跑完之间没有它，
     会先竖着堆出 N 张再塌回 1 张，卡片流里就是明显的跳版。 */
.hg-ssp-slot[data-ssp-layout="single"]:not([data-ssp-picked]) [data-ssp-banner-item]:nth-child(n+2){display:none}
/* 卡片标题的悬停高亮**只给真有指针悬停的设备**（禅道 44846）。
     触屏上 :hover 是「粘」的：手指点一下，这个状态就一直挂在最后触摸的元素上，
     直到点别处才转移 —— 测试在 H5 点卡片下方的标签跳到 /tag/xxx/ 后，手指抬起位置
     那张卡的标题就一直是主色，看起来像「点标签把视频名点亮了」。
     触屏本来就没有悬停语义，用 (hover:hover) and (pointer:fine) 把这条挡在移动端外面，
     标题回落到 hg.css 的 #fff。比在触屏侧反向覆盖成 color:#fff 干净：
     那要把原色抄一份，hg.css 改了这边就悄悄对不上。 */
@media (hover:hover) and (pointer:fine){
  .hg-card-grid .hg-drama-card:hover .hg-drama-card__title{color:var(--color-primary)}
}
.hg-card-grid .hg-drama-card__tags{margin-top:8px;padding-top:0;gap:6px}
/* 「新上架」角标(左上)：上架 72 小时内展示，判定在 Go 侧 internal/newbadge，模板只渲染。

     【为什么复用 .hg-drama-card__badge 类名、这里只改配色】
     那枚「黄果原创」角标的**定位**在 common.css 里按容器分了 5 套：
       基础(left/top:12px) / H5 断点(7px) / 搜索联想区(6px) / 历史弹窗(8px) / 播放页相关推荐(6px)。
     共用类名 → 这 5 套 left/top/padding/圆角/字号自动跟着走，本处只写一条改配色的规则；
     另起一个类就得把 5 套定位全抄一遍，而 common.css 是前端交付件、出包会被整包覆盖，
     抄出来的副本迟早和源头对不上。所以本文件**一个字都不碰 common.css**，只做增量覆盖。

     【两枚角标怎么错开而不互相压住】它们都绝对定位在同一个 left/top，所以让第二枚整体下移一行：
     translateY 的百分比参照的是**元素自身高度**，而两枚角标同类同字号 → 高度必然相等，
     于是 calc(100% + 4px) 正好落在第一枚正下方、留 4px 缝 —— 不需要知道任何断点下的具体像素，
     5 套尺寸里都自动成立。
     位移给的是「新上架」而不是「黄果原创」：原创角标位置一动不动，既有页面观感零变化；
     只有「新上架」这枚新元素在两标并存时下沉一行，单独出现时仍占标准的左上角位。
     相邻兄弟选择器要求两者 DOM 紧挨着 —— hg/drama-card-cover 里已按这个次序输出，别插东西。

     配色用红橙渐变而不是原创角标那套金色：金色是「原创」的既有语义色，两枚同色会分不清；
     红橙在深色封面上对比足够，且是「新」的通用语义色。字色 #fff 压在渐变上，正常封面下可读。 */
.hg-drama-card__badge--new{
  background:linear-gradient(98.55deg,#ff6a3d 1.5%,#ff3332 98.5%);
  color:#fff;
  box-shadow:0 2px 8px rgba(255,51,50,.28)
}
.hg-drama-card__badge + .hg-drama-card__badge--new{transform:translateY(calc(100% + 4px))}
/* 评分移到右上角(原 common.css 是右下角)，把右下让给集数角标。
     bottom:auto 必须写：common.css 那条给的是 bottom，只加 top 会两端同时定位、把胶囊拉高。 */
.hg-drama-card__score{
  right:8px;top:8px;bottom:auto;padding:0 7px;border-radius:6px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);
  color:var(--color-primary);font-size:13px;font-weight:600;line-height:22px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
/* 集数角标(右下)：完结「全N集」/ 连载「更新至N集」，文案由 Go 侧定。
     与评分同一枚胶囊的形状尺寸，只把字色换成白色 —— 金色留给评分，避免两角同色分不清主次。 */
.hg-drama-card__episode{
  position:absolute;right:8px;bottom:8px;padding:0 7px;border-radius:6px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:13px;font-weight:600;line-height:22px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
/* 详情页封面的同款集数角标(右下)：尺寸对齐同封面左上角的 .hg-web-detail__badge
     (19px 高 / 4px 圆角 / 11px 字)，配色沿用卡片角标的半透明深色胶囊。 */
.hg-web-detail__episode{
  position:absolute;right:10px;bottom:10px;height:19px;padding:0 8px;border-radius:4px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:11px;font-weight:600;
  display:inline-flex;align-items:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
}
/* common.css 给弹窗/建议/相关推荐这几处的评分单独调了尺寸和斜切圆角（选择器两层，压过上面一条），
     这里把胶囊形状补齐，免得同一枚评分在不同位置一处圆角一处斜切。 */
.hg-history-dialog__list .hg-drama-card__score,
.hg-search-suggest__guess .hg-drama-card__score,
.hg-play__related .hg-drama-card__score,
.hg-history-dialog__list .hg-drama-card__episode,
.hg-search-suggest__guess .hg-drama-card__episode,
.hg-play__related .hg-drama-card__episode{padding:0 6px;border-radius:5px;font-size:11px;line-height:18px}
@media (max-width:1023px){
  .hg-card-grid .hg-drama-card__cover{border-radius:10px}
  .hg-card-grid .hg-drama-card__body{padding:8px 0 0}
  .hg-card-grid .hg-drama-card__tags{margin-top:6px;gap:4px}
  .hg-drama-card__score{right:6px;top:6px;bottom:auto;padding:0 6px;border-radius:5px;font-size:11px;line-height:18px}
  .hg-drama-card__episode{right:6px;bottom:6px;padding:0 6px;border-radius:5px;font-size:11px;line-height:18px}
}
/* 列表页页头「更新说明」（推荐内容页的「每日 00:00 更新推荐版本」）。
     common.css 只提供了 hg-page-header__text/__extra，没有这行的类，故同样走私有样式。
     位置在面包屑与 h1 之间，用次要色小字，避免抢标题的视觉重量。 */
.hg-page-note{margin:-4px 0 8px;font-size:12px;line-height:18px;color:rgba(255,255,255,.45)}
@media (max-width:768px){.hg-page-note{margin:-2px 0 6px;font-size:11px;line-height:16px}}
/* 分页左右箭头：放大到 16px，并改成主题黄底（对齐跳转按钮/当前页）。
     原 SVG stroke 是 #555，黄底上压成黑色。不改 common.css。 */
.hg-pager__arrow{
  display:inline-flex!important;align-items:center;justify-content:center;
  background:var(--color-primary)!important;opacity:1!important;
  border:0;border-radius:6px;cursor:pointer;text-decoration:none
}
.hg-pager__arrow img{
  width:16px!important;height:16px!important;
  filter:brightness(0)
}
.hg-pager__arrow:disabled,.hg-pager__arrow[disabled]{opacity:.35!important;cursor:not-allowed}
.hg-pager__arrow:hover:not(:disabled){filter:brightness(1.05)}
/* 分页号码窄屏收窄（SEO 需求 9.29 第 5 条，结构见 hg/pager）：HTML 里恒为当前页 ±3 窗口，
     窗口内页码带 data-w=距当前页格数(1/2/3)；≤640px 隐藏 data-w=2/3，只留 ±1，链接仍在源码里供爬虫抓取。
     首页/末页/当前页不带 data-w，窄屏恒显示。频道页热播/原创两栏 JS 拼的 button.hg-pager__page
     同样带 data-w，共用这一条。.hg-pager__page 基础样式（common.css）已是 inline-flex，宽屏无需再写 display。 */
@media (max-width:640px){.hg-pager__page[data-w="2"],.hg-pager__page[data-w="3"]{display:none}}
/* 窄屏专用省略号（data-narrow）：宽屏首/末页与 ±3 窗口相连不出省略号，但窄屏隐藏 2、3 圈后首/末页与 ±1 之间缺号，
     由它补上（规则见 list.go buildPagerWindow / cyber-category.tpl pageNums）。宽屏隐藏、≤640px 显示。
     显示值取 inline：common.css 的 .hg-pager__dots 基础样式没写 display，普通省略号就是 span 默认的 inline
     （在 flex 容器 .hg-pager 里被块化）；这里写 inline 与普通省略号完全同形。不要写 inline-flex ——
     那样 "..." 会变成匿名 flex 项，基础样式里的 text-align:center 失效、点点在 24px 宽里偏左。 */
.hg-pager__dots[data-narrow]{display:none}
@media (max-width:640px){.hg-pager__dots[data-narrow]{display:inline}}
/* 回到顶部/最近浏览：
     1) common.css .hg-fab z-index:50 易被盖住 → 抬到 overlay(2000) 之下；
     2) zui.js 只写 inline opacity、不加 .is-show，而 pointer-events:auto 绑在 .is-show →
        看得见点不了；这里强制 is-show 可点 + 手型光标。不改 common.css。 */
.hg-fab{z-index:1900}
.hg-fab__btn{cursor:pointer}
.hg-fab__btn--backtop.is-show{pointer-events:auto!important;cursor:pointer;opacity:1!important}
/* 下载 APP 悬浮按钮：一张通用整图(自带黄底/APP 文字/阴影)，PC 与 H5 只差尺寸。
     【尺寸怎么算的】素材 80x104，黄圆本体占满图宽(实测包围盒 80x80+0+8，圆心 40,48)；
     而现有 fab-btn-bg.svg 是 viewBox104 里 r=40 的圆，渲染 78px 时黄圆直径只有 60。
     所以要让三个按钮看起来一样大，本图的**宽度**必须直接等于目标黄圆直径(PC 60 / H5 40)，
     高度按 104/80 等比放大(78 / 52)；直接套 78 会让这个圆大出 30%。
     【为什么不做垂直补偿】两种素材的圆心都落在自身高度的 48/104 处（本图 48/104，
     bg.svg 的 cy=48/viewBox104），等比放到同样的 78 高后圆心偏移完全相同，
     纯居中三个圆心就在一条线上。刻意把圆心"修正"到按钮框正中反而会错开 3px。
     a 标签补 text-decoration:none，否则继承全局链接下划线。不改 common.css。 */
.hg-fab__btn--download{text-decoration:none;justify-content:center}
.hg-fab__dl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px!important;height:78px!important;max-width:none!important;object-fit:contain;pointer-events:none}
@media (max-width:768px){.hg-fab__dl{width:40px!important;height:52px!important}}
/* 搜索建议区块标题：原为裸 <h3>，common.css 靠 .hg-search-suggest__section h3
     这个元素选择器上样式。为避免 H1 之前出现装饰性 H3，标签已降级为
     .hg-search-suggest__title(div)，这里把原 h3 的视觉样式原样补回。不改 common.css。 */
.hg-search-suggest__section .hg-search-suggest__title{margin:0;font-size:18px;font-weight:600;color:#fff}
/* 搜索建议弹层：内部独立滚动，禁止滚到顶/底时把滚动链到首页；
     H5 开 -webkit-overflow-scrolling 提升惯性手感。不改 common.css。 */
.hg-search-suggest__panel{
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y
}
body.is-search-suggest-open{overscroll-behavior:none}
.hg-search-suggest__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.hg-search-suggest__clear-text{border:0;background:transparent;color:rgba(255,255,255,.45);font-size:13px;line-height:1;padding:6px 4px;cursor:pointer}
.hg-search-suggest__clear-text:hover{color:rgba(255,255,255,.85)}
.hg-search-suggest__clear-text[hidden]{display:none!important}
.hg-search-suggest__close{width:36px;height:36px;border:0;border-radius:18px;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.hg-search-suggest__close:hover{background:rgba(255,255,255,.12)}
.hg-header__search-btn{position:relative}
.hg-header__search-btn-icon[hidden]{display:none!important}
.hg-header.is-mobile-search .hg-header__search-btn-icon--close{display:block!important;width:22px!important;height:22px!important}
/* 顶栏搜索提交按钮：占原 .hg-search img 的右侧位置(order:1)。 */
.hg-search__submit{order:1;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;opacity:.75}
.hg-search__submit:hover{opacity:1}
.hg-search__submit img{width:15px!important;height:15px!important;opacity:1;order:0}
/* PC 搜索建议：common 用 left:50%+translateX(-50%) 相对搜索表单居中；
     表单贴顶栏右侧、弹层宽 576px → 右半边溢出视口。右对齐并外伸贴近页边 gutter；
     内边距/区块间距也收紧（common 桌面 32/30 偏松）。 */
@media (min-width:1024px){
  .hg-search-suggest{
    left:auto;right:calc(16px - var(--hg-page-gutter));transform:none;width:min(576px,calc(100vw - 32px))
  }
  .hg-search-suggest__panel{padding:16px;gap:16px;border-radius:16px}
  .hg-search-suggest__section{gap:12px}
}
/* H5 展开搜索：common 给了 left/right:0 但仍留着桌面 width/flex-basis:240px，
     搜索条和建议弹层被卡成窄条（变形）。展开时强制拉满。 */
@media (max-width:1023px){
  .hg-header.is-mobile-search .hg-header__search{
    display:flex!important;width:100%!important;max-width:none!important;min-width:0!important;
    flex:1 1 auto!important;left:0!important;right:0!important;box-sizing:border-box
  }
  .hg-header.is-mobile-search .hg-search{width:100%;max-width:none}
  /* 贴住输入框：common 默认 top:calc(100% + 8px) 会留缝，底下正文透出来。
       略上叠 1px 消掉亚像素缝；左右仍留 12px 页边。 */
  .hg-header.is-mobile-search .hg-search-suggest{
    left:12px!important;right:12px!important;width:auto!important;max-width:none!important;transform:none!important;
    top:calc(100% - 1px)!important
  }
}
/* 全站视频卡标签只展示一排：一排放不下的标签整条不展示，不能露出半个胶囊。
     common.css 各处用的是 nowrap+overflow:hidden —— 那会把边界上的胶囊横向切断。
     这里改成 wrap + 只留一行高的 max-height：放不下的标签整体换到第二行，
     连行间距一起被裁在可视区外，第一排永远是完整胶囊。
     两个要点：
     1) box-sizing:content-box —— max-height 只约束标签行本身，容器原有的
        padding-top/margin-top（与简介的间距）不占额度，各场景间距保持原样；
     2) --hg-tag-h 同时给容器 max-height 与胶囊 height，行高与裁切线恒等，不会错切。
     标签行是卡片内组件，标签云页(.hg-tag-block 下同名 class)不受影响，故选择器带 .hg-drama-card。
     ⚠ PC(>1023px)的 --hg-tag-h 已按要求撤掉：该断点下变量无定义，上面的 max-height 与
     胶囊 height 两条声明自动失效，标签恢复成按需换行（卡片高度会随标签行数不齐）。
     H5 与两个弹窗仍各自定义了值，limit 依旧生效；要让 PC 也回到一排，把
     `.hg-drama-card{--hg-tag-h:26px}` 加回来即可。 */
.hg-drama-card .hg-drama-card__tags{
  box-sizing:content-box!important;flex-wrap:wrap!important;align-content:flex-start!important;
  overflow:hidden!important;max-height:var(--hg-tag-h)!important
}
/* 胶囊高度写死成 --hg-tag-h（inline-flex 垂直居中，不依赖行高对齐）；
     单个标签比卡片还宽时 max-width:100% 把它按在卡内、多出的字从右侧裁掉，
     绝不横向溢出到裁切线外露出半个胶囊。 */
.hg-drama-card .hg-tag{
  display:inline-flex;align-items:center;box-sizing:border-box;
  flex:0 0 auto;height:var(--hg-tag-h);max-width:100%;white-space:nowrap;overflow:hidden
}
@media (max-width:1023px){.hg-drama-card{--hg-tag-h:20px}}
/* 搜索建议「猜你喜欢」与最近浏览弹窗里的紧凑卡：胶囊是 1px 6px + 15px 行高 */
.hg-search-suggest__guess .hg-drama-card,
.hg-history-dialog__list .hg-drama-card{--hg-tag-h:19px}
/* 首页「分类推荐」列表项的文字区：common.css 没给 .hg-category-item__info 任何规则，
     它作为 flex 子项 min-width 取默认的 auto；而标题 .hg-category-item__title 是
     white-space:nowrap —— 于是这一格的 min-content 宽度 = 整条标题的宽度，标题稍长
     就把文字区顶出栏目边界，再被 .hg-category-col{overflow:hidden} 从右侧裁掉：
     标题不出省略号，简介每行都在卡片边缘被切成半截（看着像「简介只显示了一半」）。
     min-width:0 让它能收缩回栏目内 —— 标题恢复省略号，简介在卡内换行、按原设计裁两行；
     overflow-wrap 兜住简介里的长串英文/网址，避免同样撑破。不改 common.css（前端出包会覆盖）。 */
.hg-category-item__info{min-width:0;flex:1 1 auto}
.hg-category-item__desc{overflow-wrap:anywhere;word-break:break-word}
/* 帖子卡（全站）：整卡 = 一张 2:1 封面，标题/元信息叠在图底。
     覆盖 common.css 固定 height / 三图横排 / 旧 16:9 口径；社区页 hgPostCardStyle 再叠字号。 */
.hg-post-card:not(.hg-post-card--nocover){background:transparent;border:0}
.hg-post-card__gallery{
  position:relative;width:100%;aspect-ratio:2/1;height:auto!important;overflow:hidden
}
.hg-post-card__images,.hg-post-card__img{width:100%;height:100%}
.hg-post-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.hg-post-card:not(.hg-post-card--nocover) .hg-post-card__body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:12px 16px 16px;background:transparent
}
.hg-post-card__meta{margin:0 0 6px;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  color:#fff;font-size:13px;line-height:18px;opacity:.9}
.hg-post-card:not(.hg-post-card--nocover) .hg-post-card__body h3{margin:0;color:#fff}

/* 最近浏览弹窗（不改 common.css）：
     1) 行高按内容（grid-auto-rows:max-content + align-content:start），避免移动端
        list flex:1 时「仅一行两张卡」被 stretch 撑满屏底部空白；
     2) 同行卡片 stretch 等高；标签只显示一行，放不下的裁掉（标签行定高，
        不参与撑高，卡片高度因此完全一致）；
     3) overscroll-behavior:none 截断滚到顶/底时的链式滚动与橡皮筋，避免带动首页；
     4) PC 半透明遮罩盖住首页，避免滚轮落到底层。 */
.hg-history-dialog__mask{
  display:none;position:fixed;inset:0;z-index:0;margin:0;padding:0;border:0;
  background:rgba(0,0,0,.65);cursor:pointer;-webkit-tap-highlight-color:transparent
}
.hg-history-dialog__panel{position:relative;z-index:1}
@media (min-width:641px){
  /* common 层也有 background，这里改透明改由 __mask 单独承担，避免叠两层过深。 */
  .hg-history-dialog{background:transparent!important}
  .hg-history-dialog.is-open .hg-history-dialog__mask{display:block}
}
/* none（不是 contain）：贴边继续滑时既不链式传到首页，也不橡皮筋拽动底层。 */
html.is-history-dialog-open,
body.is-history-dialog-open{overflow:hidden!important;overscroll-behavior:none!important}
.hg-history-dialog.is-open,
.hg-history-dialog__panel,
.hg-history-dialog__list{overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.hg-history-dialog__header{margin-bottom:12px}
.hg-history-dialog__tabs{margin-bottom:12px;gap:16px}
.hg-history-dialog__list{
  display:grid!important;
  align-items:stretch!important;
  align-content:start!important;
  justify-items:stretch;
  gap:12px;
  grid-auto-rows:max-content!important;
  grid-template-rows:none
}
/* 「黄果吃瓜」tab：帖子走社区同款单封面卡（2:1），按原型一行 2 个。
     用 :has() 判断当前渲染的是不是帖子卡，避免给弹窗加额外的状态类。 */
.hg-history-dialog__list:has(> .hg-post-card){grid-template-columns:repeat(2,minmax(0,1fr))!important}
.hg-history-dialog__list .hg-post-card{align-self:start;background:transparent;border:0}
/* 弹窗帖子卡：比例仍锁 2:1，字号收窄适配弹窗密度。 */
.hg-history-dialog__list .hg-post-card__gallery{aspect-ratio:2/1;height:auto!important}
.hg-history-dialog__list .hg-post-card__body{padding:8px 10px 10px}
.hg-history-dialog__list .hg-post-card__body h3{font-size:13px;line-height:18px}
.hg-history-dialog__list .hg-post-card__meta{margin:0 0 4px;font-size:11px}
.hg-history-dialog__list .hg-drama-card{
  display:flex;flex-direction:column;
  align-self:stretch!important;
  flex:none!important;
  gap:0;height:auto!important;max-height:none!important;min-height:0!important;
  overflow:visible;position:relative;z-index:0;transform:none
}
.hg-history-dialog__list .hg-drama-card:hover{transform:none}
.hg-history-dialog__list .hg-drama-card__cover{flex:0 0 auto!important;height:auto;overflow:hidden;border-radius:inherit}
.hg-history-dialog__list .hg-drama-card__body{
  display:flex;flex-direction:column;flex:1 1 auto!important;min-height:0;
  padding:6px 8px 6px;overflow:visible
}
.hg-history-dialog__list .hg-drama-card__desc{margin-top:4px}
/* 标签只显示一行：沿用上面「全站视频卡标签只展示一排」的 wrap + max-height:--hg-tag-h 方案，
     这里只调间距，不再覆盖 flex-wrap / 定高。此前这里写死 nowrap + height:17px，
     而弹窗胶囊实高 19px(1px 边框 + 1px padding + 15px 行高 + 1px padding + 1px 边框)：
     裁切线比胶囊矮 2px，把下边框连同底边一起切掉（Safari 上尤其明显）；nowrap 又会把
     行尾放不下的标签从中间横向切断，露出半个胶囊。改回 wrap 后，放不下的标签整条落到
     第二行、连行间距一起被裁在可视区外，第一排永远是完整胶囊。
     flex:0 0 auto 保留：标签行定高不参与撑高，同行卡片仍等高。 */
.hg-history-dialog__list .hg-drama-card__tags{
  flex:0 0 auto;margin-top:4px;padding-top:0;gap:3px 4px
}
/* 暂无记录：list 是多列 grid 时单节点只占第一格会偏左；空态改 flex 居中（H5 占满剩余高度时也垂直居中）。 */
.hg-history-dialog__list:has(> .hg-history-empty){
  display:flex!important;align-items:center!important;justify-content:center!important;
  align-content:center!important;grid-auto-rows:unset!important;min-height:200px
}
.hg-history-empty{
  margin:0;width:100%;box-sizing:border-box;padding:48px 16px;
  color:#888;font-size:14px;line-height:1.5;text-align:center
}
@media (max-width:640px){
  .hg-history-dialog__header{padding:12px 16px 8px!important}
  .hg-history-dialog__tabs{padding:0 16px!important;margin-bottom:0}
  .hg-history-dialog__list{
    gap:10px;padding:10px 12px 16px!important;
    align-items:stretch!important;align-content:start!important;
    grid-auto-rows:max-content!important
  }
  .hg-history-dialog__list:has(> .hg-history-empty){
    align-items:center!important;justify-content:center!important;align-content:center!important;
    min-height:0; /* 随 flex:1 占满剩余视口，文案落在正中 */
  }
  .hg-history-dialog__list .hg-drama-card{align-self:stretch!important;height:auto!important}
  .hg-history-dialog__list .hg-drama-card__body{padding:6px 6px 5px}
  /* 移动端 .hg-tag 行高 14px（桌面 15px），裁切线随之改小到 18px = 1+1+14+1+1，
       仍与胶囊实高恒等，避免多出留白、也不切到下边框。 */
  .hg-history-dialog__list .hg-drama-card{--hg-tag-h:18px}
  .hg-history-dialog__list .hg-drama-card__tags{margin-top:4px;gap:2px 4px}
  .hg-history-dialog__list .hg-tag{padding:1px 5px;font-size:10px;line-height:14px}
}
/* 专题卡网格：封面 16:9；PC 4 列、H5 2 列。
     common.css 写死 height:298/155 + PC 3 列 / H5 1 列，这里覆盖。
     封面图改 absolute，避免 aspect-ratio 与 height:100% 互相撑不开。
     PC 文案区再贴底一点（common 是 bottom:16px）；H5 标题 12px（common 是 17px）。
     不改 common.css（前端出包会覆盖）。 */
.hg-topic-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.hg-topic-card{height:auto;aspect-ratio:16/9;min-height:0}
.hg-topic-card>img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.hg-topic-card__body{bottom:8px}
@media (max-width:1023px){
  .hg-topic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
  .hg-topic-card{height:auto;aspect-ratio:16/9;min-height:0}
  .hg-topic-card__title{font-size:12px;line-height:18px}
}
/* 禅道 44581：内容不足一屏时页脚跟着短内容浮在页面中部（空态的系统消息 / 我的收藏 /
     我的关注最明显），页脚下方留一大片空白。不是某个页面的问题 —— 外壳只有
     body.hg-layout{min-height:100vh} 把 body 撑到一屏，而 body→.hg-body→.hg-main 三层
     都是普通块级，页脚又是 .hg-main 的最后一个子元素，多出来的那段高度没有任何机制
     分给它上面的内容，页脚就停在内容结束的地方。

     标准 sticky footer：三层改纵向 flex、逐层 flex:1 0 auto 把视口高度传下去，
     再让 main 吃掉剩余高度。不用 position:fixed —— 长页面会被它永久压掉一条。

     ⚠️【.main 必须显式 width:100%，别删】2026-08-26 第一版就是漏了这一条被打回的：
     .hg-main 一旦成为 flex 容器，它的子元素 .main 就成了 flex 项，而 .main 带着
     `margin:0 auto` 做水平居中 —— **flex 项上的 auto margin 会覆盖默认的 align stretch**，
     宽度于是从「撑满 max-width」塌成「收缩到内容宽度」。实测 PC 2320 视口 /profile/：
     .main 由 1856px（max-width 本值）塌到 1130px，全站 hg-layout 页面内容区一起变窄，
     PC 与 H5 双端可见。补上 width:100% 后，它在 flex 容器里照样撑满，再由
     max-width + auto margin 居中，与改动前的块级表现一致。
     **改这几条规则时，回归必须同时量宽和高** —— 上一版只量了文档高度（长页面
     scrollHeight before/after 全 0 差异）就放行，而副作用恰恰只体现在宽度上。

     页脚额外配 margin-top:auto 兜底：万一将来某个 layout 的 .hg-main 直接子元素不叫
     .main，页脚照样被推到底。
     100dvh 写在 100vh 之后：移动端 100vh 按「地址栏收起后」的大视口算、会把页脚顶出首屏；
     老浏览器解析 dvh 失败自动回落到前一条。
     .hg-sidebar 全局 display:none!important，.hg-body 改 flex 不影响它。
     作用域限定在 .hg-layout 外壳内；不改 common.css（前端出包会覆盖），与本文件既有约定一致。 */
.hg-layout{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.hg-layout .hg-body{display:flex;flex-direction:column;flex:1 0 auto}
.hg-layout .hg-main{display:flex;flex-direction:column;flex:1 0 auto}
.hg-layout .hg-main>.main{flex:1 0 auto;width:100%}
.hg-layout .hg-main>.hg-footer{margin-top:auto;flex-shrink:0}
/* 全站空态（UI 稿：插图 + 主文案 + 副文案三层竖直居中）。
     改造前全站 16 处空态都是「一个 .hg-empty 裸 div + 一句纯文字」，样式各写各的内联
     style（color/padding/text-align/grid-column 抄了十几份），既没有插图也没有副文案。
     现在结构统一由 hg/empty 输出（见 components/hg/shell.tpl 末尾），样式统一收在这里，调用方只传文案。

     几处刻意为之：
     - grid-column:1/-1 放进通用规则是安全的：非 grid 容器的子元素会忽略该属性，
       所以网格里（.hg-card-grid / .hg-follow-grid）照旧跨满整行，flex/块级容器里没有副作用。
       改造前逐处内联的 grid-column 因此可以全部删掉。
     - 插图 .hg-empty__art 在模板里写死了 width/height 属性（188），CSS 这里再钉一遍尺寸：
       两者缺一不可 —— 漏了属性会命中本文件头部的
       img:not([width]):not([height]){object-fit:contain} 兜底，图被缩放居中留白（禅道 44479/44538）。
     - 不改 common.css（前端出包会覆盖），与本文件其它覆盖的既有约定一致。 */
.hg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:48px 16px;grid-column:1/-1;color:#888;text-align:center}
.hg-empty__art{flex-shrink:0;display:block;width:188px;height:188px;max-width:188px;margin:0 0 6px;-o-object-fit:contain;object-fit:contain;pointer-events:none}
.hg-empty__title{margin:0;color:#fff;font-size:16px;font-weight:500;line-height:24px}
.hg-empty__desc{margin:0;max-width:420px;color:#858585;font-size:13px;font-weight:400;line-height:20px}
@media (max-width:767px){
  .hg-empty{padding:36px 16px}
  .hg-empty__desc{max-width:300px;font-size:12px;line-height:18px}
}
/* TG 风格用户头像（hg/user-avatar 子模板）的样式不在本文件：规则在 components/hg/shell.tpl 末尾的
   hg/user-avatar-style（与 cyber-user.tpl / post-detail.tpl 共用），由 hg/head 紧跟本文件的 <link> 之后内联输出。 */
/* 集数角标里的时间前缀（hg/drama-card 渲染的 <i class="hg-ep-time__at">）。
     【为什么放这儿而不是 hg/card-ep-time-script】那个 define 由 hg/foot-scripts 引入，
     而 hg-play.tpl 不引 foot-scripts；样式写在那儿的话，播放页抽屉里的卡片角标会渲染出
     没有样式的 <i>，退回浏览器默认的斜体 + 零间距 + 不弱化（2026-08-28 线上实测到）。
     渲染 <i> 的 hg/drama-card 覆盖面比那个 define 大，样式必须跟到本层。
     详情页 meta 行的 <i> 同样吃这条。不写进 common.css —— 那是前端交付件，出包会覆盖。

     font-style:normal —— <i> 默认斜体，显式关掉。
     margin-right .5em（角标 11px 下约 5.5px）：照 UI 稿，「8小时前」与「更新至N集」
     是分开读的两段，要留肉眼可辨的间隔；初版用 .25em 实测挤成一团，被打回过一次。
     opacity .65 不再往下调：角标底是 rgba(0,0,0,.55) 的半透明黑，再淡压不住浅色封面。 */
.hg-ep-time__at{font-style:normal;font-weight:400;opacity:.65;margin-right:.5em}
/* 品牌词锚文本（SEO 需求 9.24 第 9 条）：内页导语 / FAQ 答案 / 详情页简介与 AI 声明 / 资料区「出品」/ 页脚版权行里
     指向首页的站名链接（<a class="hg-brand-link" href="/">，由 internal/handler/web/brand_link.go 生成）。
     颜色继承所在正文，只加一条半透明细下划线提示可点 —— 夹在正文句子里，不能跳成主题色抢读。
     下划线必须带 !important：common.css 有全局 a{text-decoration:none!important}，
     它的简写会连带把 line/color/thickness 全锁住；这里类选择器特异度更高，同为 !important 时胜出。
     text-underline-offset 不属于该简写，无需 !important。
     hover 变主题色只给精确指针设备（同本文件卡片标题的做法，禅道 44846）：触屏的 :hover 会「粘」在最后点过的元素上。 */
.hg-brand-link{color:inherit;text-decoration-line:underline!important;text-decoration-style:solid!important;text-decoration-color:rgba(255,255,255,.35)!important;text-decoration-thickness:1px!important;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .hg-brand-link:hover{color:var(--color-primary);text-decoration-color:currentColor!important}
}