/* 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>」均指这份样式。 */

/* 公共长度默认保持1px，PC切换1920设计单位；H5计算值保持原样。 */
:root{--hg-public-unit:1px;--hg-text-unit:1px;}
@media (min-width:1024px){:root{--hg-public-unit:var(--hg-pc-unit);}}
/* common.css为构建产物，以下仅补公共组件继承的长度声明；原选择器、条件与颜色语义不变。 */
@media (min-width:1024px){
.hg-drama-card{gap:calc(12 * var(--hg-public-unit));padding:calc(16 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.08);border-radius:calc(16 * var(--hg-public-unit));box-shadow:0 calc(10 * var(--hg-public-unit)) calc(24 * var(--hg-public-unit)) calc(-8 * var(--hg-public-unit)) rgba(0,0,0,.4);}
.hg-drama-card:hover{transform:translateY(calc(-2 * var(--hg-public-unit)));}
.hg-drama-card__cover{border-radius:calc(14 * var(--hg-public-unit));}
.hg-drama-card__badge{left:calc(12 * var(--hg-public-unit));top:calc(12 * var(--hg-public-unit));padding:calc(4 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit));border-radius:calc(999 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(15 * var(--hg-text-unit));}
.hg-drama-card__score{padding:calc(4 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit));border-radius:calc(12 * var(--hg-public-unit)) 0 0 0;font-size:max(12px,calc(24 * var(--hg-text-unit)));}
.hg-drama-card__title{font-size:max(12px,calc(16 * var(--hg-text-unit)));line-height:calc(24 * var(--hg-text-unit));}
.hg-drama-card__desc{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
.hg-drama-card__tags{gap:calc(8 * var(--hg-public-unit));padding-top:calc(10 * var(--hg-public-unit));}
.hg-tag{padding:calc(4 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit));border-radius:calc(999 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));}
.hg-topic-card{height:calc(298 * var(--hg-public-unit));border-radius:calc(16 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.07);}
.hg-topic-card:hover{transform:translateY(calc(-2 * var(--hg-public-unit)));}
.hg-topic-card__body{left:calc(16 * var(--hg-public-unit));right:calc(16 * var(--hg-public-unit));bottom:calc(16 * var(--hg-public-unit));}
.hg-topic-card__meta{gap:calc(4 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));margin-bottom:calc(2 * var(--hg-public-unit));}
.hg-topic-card__meta img{width:calc(10 * var(--hg-public-unit))!important;height:calc(10 * var(--hg-public-unit))!important;}
.hg-topic-card__title{font-size:max(12px,calc(16 * var(--hg-text-unit)));line-height:calc(24 * var(--hg-text-unit));}
.hg-topic-card__desc{margin-top:calc(8 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(19 * var(--hg-text-unit));}
.hg-card-grid,.hg-topic-grid{gap:calc(16 * var(--hg-public-unit));margin-top:calc(20 * var(--hg-public-unit));}
.hg-topic-grid{gap:calc(20 * var(--hg-public-unit));}
@media (max-width:640px){
.hg-card-grid{gap:calc(12 * var(--hg-public-unit));margin-top:calc(16 * var(--hg-public-unit));}
}
@media (max-width:1023px){
.hg-card-grid{gap:calc(12 * var(--hg-public-unit));margin-top:calc(14 * var(--hg-public-unit));}
.hg-drama-card{border-radius:calc(10 * var(--hg-public-unit));box-shadow:0 calc(4 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) rgba(0,0,0,.4);}
.hg-drama-card__cover{border-radius:calc(10 * var(--hg-public-unit)) calc(10 * var(--hg-public-unit)) 0 0;}
.hg-drama-card__body{padding:calc(10 * var(--hg-public-unit)) calc(9 * var(--hg-public-unit)) calc(9 * var(--hg-public-unit));}
.hg-drama-card .hg-tag,.hg-drama-card__badge{border-radius:calc(3 * var(--hg-public-unit));font-size:max(9px,calc(9 * var(--hg-text-unit)));line-height:calc(14 * var(--hg-text-unit));}
.hg-drama-card__badge{left:calc(7 * var(--hg-public-unit));top:calc(7 * var(--hg-public-unit));padding:calc(2 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));}
.hg-drama-card__score{padding:calc(2 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit)) 0 0 0;font-size:max(10px,calc(10 * var(--hg-text-unit)));line-height:calc(14 * var(--hg-text-unit));}
.hg-drama-card__title{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
.hg-drama-card__desc{margin-top:calc(5 * var(--hg-public-unit));font-size:max(10px,calc(10 * var(--hg-text-unit)));line-height:calc(15 * var(--hg-text-unit));}
.hg-drama-card__tags{margin-top:calc(8 * var(--hg-public-unit));gap:calc(4 * var(--hg-public-unit));}
.hg-drama-card .hg-tag{padding:calc(2 * var(--hg-public-unit)) calc(7 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,210,28,.25);}
.hg-topic-grid{gap:calc(10 * var(--hg-public-unit));margin-top:calc(14 * var(--hg-public-unit));}
.hg-topic-card{height:calc(155 * var(--hg-public-unit));border-radius:calc(12 * var(--hg-public-unit));box-shadow:0 calc(4 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) rgba(0,0,0,.5);}
.hg-topic-card__body{left:calc(14 * var(--hg-public-unit));right:calc(14 * var(--hg-public-unit));bottom:calc(8 * var(--hg-public-unit));}
.hg-topic-card__meta{gap:calc(4 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));margin-bottom:calc(4 * var(--hg-public-unit));}
.hg-topic-card__meta img{width:calc(10 * var(--hg-public-unit))!important;height:calc(10 * var(--hg-public-unit))!important;}
.hg-topic-card__title{font-size:max(12px,calc(17 * var(--hg-text-unit)));line-height:calc(22 * var(--hg-text-unit));}
.hg-topic-card__desc{margin-top:calc(6 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(17 * var(--hg-text-unit));}
}
.hg-fab{right:calc(32 * var(--hg-public-unit));bottom:calc(40 * var(--hg-public-unit));gap:calc(24 * var(--hg-public-unit));}
.hg-fab__btn{width:calc(60 * var(--hg-public-unit));height:calc(60 * var(--hg-public-unit));}
.hg-fab__btn .hg-fab__bg{width:calc(78 * var(--hg-public-unit))!important;height:calc(78 * var(--hg-public-unit))!important;}
.hg-fab__btn .hg-fab__icon{width:calc(24 * var(--hg-public-unit))!important;height:calc(24 * var(--hg-public-unit))!important;}
@media (max-width:768px){
.hg-fab{right:calc(12 * var(--hg-public-unit));bottom:calc(20 * var(--hg-public-unit));gap:calc(12 * var(--hg-public-unit));}
.hg-fab__btn{width:calc(40 * var(--hg-public-unit));height:calc(40 * var(--hg-public-unit));}
.hg-fab__btn .hg-fab__bg{width:calc(52 * var(--hg-public-unit))!important;height:calc(52 * var(--hg-public-unit))!important;}
.hg-fab__btn .hg-fab__icon{width:calc(16 * var(--hg-public-unit))!important;height:calc(16 * var(--hg-public-unit))!important;}
}
.hg-search-suggest__guess .hg-drama-card__cover{border-radius:calc(8 * var(--hg-public-unit));}
.hg-search-suggest__guess .hg-drama-card__badge{left:calc(6 * var(--hg-public-unit));top:calc(6 * var(--hg-public-unit));padding:calc(1 * var(--hg-public-unit)) calc(5 * var(--hg-public-unit));border-radius:calc(4 * var(--hg-public-unit));font-size:max(9px,calc(9 * var(--hg-text-unit)));line-height:calc(14 * var(--hg-text-unit));}
.hg-search-suggest__guess .hg-drama-card__score{padding:calc(1 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));border-radius:calc(8 * var(--hg-public-unit)) 0 0 0;font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(15 * var(--hg-text-unit));}
.hg-search-suggest__guess .hg-drama-card__body{padding:calc(8 * var(--hg-public-unit)) calc(2 * var(--hg-public-unit)) 0;}
.hg-search-suggest__guess .hg-drama-card__title{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
.hg-search-suggest__guess .hg-drama-card__desc{margin-top:calc(4 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));}
.hg-search-suggest__guess .hg-drama-card__tags{margin-top:calc(6 * var(--hg-public-unit));gap:calc(4 * var(--hg-public-unit));}
.hg-search-suggest__guess .hg-tag{padding:calc(1 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));font-size:max(10px,calc(10 * var(--hg-text-unit)));line-height:calc(15 * var(--hg-text-unit));}
.hg-footer__col h4{font-size:max(12px,calc(14 * var(--hg-text-unit)));}
@media (max-width:1023px){
.hg-footer{padding:calc(32 * var(--hg-public-unit)) var(--hg-page-gutter);}
.hg-footer__inner{gap:calc(28 * var(--hg-public-unit));}
.hg-footer__cols{gap:calc(20 * var(--hg-public-unit));}
}
.hg-footer{border-top:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.05);padding:calc(40 * var(--hg-public-unit)) var(--hg-page-gutter);}
.hg-footer__inner{gap:calc(64 * var(--hg-public-unit));}
.hg-footer__brand{max-width:calc(989 * var(--hg-public-unit));}
.hg-footer__logo{width:calc(120 * var(--hg-public-unit));height:calc(44 * var(--hg-public-unit));}
.hg-footer__logo img{width:calc(120 * var(--hg-public-unit))!important;height:calc(44 * var(--hg-public-unit))!important;}
.hg-footer__copy{margin-top:calc(16 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(21.6 * var(--hg-text-unit));}
.hg-footer__addrs{margin-top:calc(20 * var(--hg-public-unit));gap:calc(12 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(16.5 * var(--hg-text-unit));letter-spacing:calc(.06 * var(--hg-public-unit));}
.hg-footer__cols{gap:calc(180 * var(--hg-public-unit));width:calc(570 * var(--hg-public-unit));}
.hg-footer__col{width:calc(70 * var(--hg-public-unit));}
.hg-footer__col h4{line-height:calc(19.5 * var(--hg-text-unit));margin:0 0 calc(12 * var(--hg-public-unit));}
.hg-footer__col a{font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));margin-top:calc(12 * var(--hg-public-unit));}
@media (max-width:1200px){
.hg-footer__cols{gap:calc(96 * var(--hg-public-unit));}
}
@media (max-width:1023px){
.hg-footer__inner{gap:calc(32 * var(--hg-public-unit));}
.hg-footer__cols{gap:calc(48 * var(--hg-public-unit));}
}
@media (max-width:640px){
.hg-footer{padding:calc(32 * var(--hg-public-unit)) var(--hg-page-gutter);}
.hg-footer__cols{gap:calc(24 * var(--hg-public-unit));}
.hg-footer__col{min-width:calc(70 * var(--hg-public-unit));}
}
.hg-breadcrumb{gap:calc(8 * var(--hg-public-unit));margin-bottom:calc(12 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
.hg-page-header{gap:calc(16 * var(--hg-public-unit));margin-bottom:calc(24 * var(--hg-public-unit));}
.hg-page-header__text h1{font-size:max(12px,calc(24 * var(--hg-text-unit)));line-height:calc(30 * var(--hg-text-unit));}
.hg-page-header__text p{margin-top:calc(2 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(30 * var(--hg-text-unit));}
.hg-page-header__extra{padding:calc(8 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit));border-radius:calc(999 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);font-size:max(12px,calc(13 * var(--hg-text-unit)));margin-top:calc(4 * var(--hg-public-unit));}
.hg-pager{gap:calc(8 * var(--hg-public-unit));margin-top:calc(32 * var(--hg-public-unit));min-height:calc(70 * var(--hg-public-unit));}
.hg-pager__arrow{width:calc(28 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));}
.hg-pager__arrow img{width:calc(12 * var(--hg-public-unit));height:calc(12 * var(--hg-public-unit));}
.hg-pager__page{min-width:calc(32 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));padding:0 calc(6 * var(--hg-public-unit));}
.hg-pager__dots{width:calc(24 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));}
.hg-pager__gap{width:calc(8 * var(--hg-public-unit));}
.hg-pager__jump-btn{height:calc(32 * var(--hg-public-unit));padding:0 calc(16 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));font-size:max(12px,calc(13 * var(--hg-text-unit)));}
.hg-pager__jump{gap:calc(8 * var(--hg-public-unit));margin-left:calc(16 * var(--hg-public-unit));}
.hg-pager__jump-input{width:calc(64 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));padding:0 calc(8 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.18);font-size:max(12px,calc(14 * var(--hg-text-unit)));}
.hg-pager__jump-unit{font-size:max(12px,calc(14 * var(--hg-text-unit)));}
.hg-pager__input{width:calc(76 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.2);}
.hg-pager__unit{padding-left:calc(4 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));}
.hg-faq__item summary{gap:calc(12 * var(--hg-public-unit));}
.hg-history-dialog__list .hg-drama-card__badge{left:calc(8 * var(--hg-public-unit));top:calc(8 * var(--hg-public-unit));padding:calc(2 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));}
.hg-history-dialog__list .hg-drama-card__score{padding:calc(2 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit));border-radius:calc(10 * var(--hg-public-unit)) 0 0 0;font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
.hg-history-dialog__list .hg-drama-card__title{font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
.hg-history-dialog__list .hg-drama-card__desc{margin-top:calc(5 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));}
.hg-history-dialog__list .hg-drama-card__tags{margin-top:calc(8 * var(--hg-public-unit));gap:calc(4 * var(--hg-public-unit));}
.hg-history-dialog__list .hg-tag{padding:calc(1 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));font-size:max(10px,calc(10 * var(--hg-text-unit)));line-height:calc(15 * var(--hg-text-unit));}
.hg-faq{margin-top:calc(40 * var(--hg-public-unit));padding-bottom:calc(56 * var(--hg-public-unit));}
.hg-faq__title{font-size:max(12px,calc(22 * var(--hg-text-unit)));margin-bottom:calc(20 * var(--hg-public-unit));}
.hg-faq__list{gap:calc(12 * var(--hg-public-unit));}
.hg-faq__item{border-radius:calc(14 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.07);}
.hg-faq__item summary{gap:calc(16 * var(--hg-public-unit));padding:calc(16 * var(--hg-public-unit)) calc(20 * var(--hg-public-unit));font-size:max(12px,calc(16 * var(--hg-text-unit)));}
.hg-faq__item summary img{width:calc(15 * var(--hg-public-unit))!important;height:calc(15 * var(--hg-public-unit))!important;}
.hg-faq__body{border-top:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.05);padding:calc(12 * var(--hg-public-unit)) calc(20 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));}
.hg-faq__body p{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(22 * var(--hg-text-unit));}
.hg-homeway-page .hg-faq{margin-top:calc(20 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__title{gap:calc(7 * var(--hg-public-unit));font-size:max(12px,calc(16 * var(--hg-text-unit)));margin-bottom:calc(12 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__title::before{width:calc(3 * var(--hg-public-unit));height:calc(16 * var(--hg-public-unit));border-radius:calc(1.5 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__item{border-radius:calc(8 * var(--hg-public-unit));box-shadow:0 calc(4 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit)) rgba(0,0,0,.3);}
.hg-homeway-page .hg-faq__item summary{padding:calc(14 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));}
.hg-homeway-page .hg-faq__body{padding:0 calc(14 * var(--hg-public-unit)) calc(14 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__body p{font-size:max(12px,calc(12 * var(--hg-text-unit)));}
@media (min-width:1024px){
.hg-homeway-page>.hg-breadcrumb{margin-bottom:calc(8 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq{margin-top:calc(10 * var(--hg-public-unit));padding:calc(40 * var(--hg-public-unit)) 0 calc(56 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__title{font-size:max(12px,calc(22 * var(--hg-text-unit)));margin-bottom:calc(20 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__item{border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.07);}
.hg-homeway-page .hg-faq__item summary{padding:calc(16 * var(--hg-public-unit)) calc(20 * var(--hg-public-unit));font-size:max(12px,calc(16 * var(--hg-text-unit)));}
.hg-homeway-page .hg-faq__body{border-top:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.05);padding:calc(12 * var(--hg-public-unit)) calc(20 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));}
.hg-homeway-page .hg-faq__body p{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(22 * var(--hg-text-unit));}
}
.hg-play__related .hg-drama-card{gap:calc(8 * var(--hg-public-unit));padding:calc(8 * var(--hg-public-unit));border-radius:calc(12 * var(--hg-public-unit));}
.hg-play__related .hg-drama-card__cover{border-radius:calc(10 * var(--hg-public-unit));}
.hg-play__related .hg-drama-card__badge{left:calc(6 * var(--hg-public-unit));top:calc(6 * var(--hg-public-unit));padding:calc(2 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));font-size:max(10px,calc(10 * var(--hg-text-unit)));}
.hg-play__related .hg-drama-card__score{padding:calc(2 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));border-radius:calc(8 * var(--hg-public-unit)) 0 0 0;}
.hg-play__related .hg-drama-card__title{font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
@media (max-width:1023px){
.hg-topic-card{height:calc(155 * var(--hg-public-unit));}
.hg-topic-card__title{font-size:max(12px,calc(17 * var(--hg-text-unit)));}
}
.hg-tag-page{padding:calc(24 * var(--hg-public-unit)) var(--hg-page-gutter) calc(48 * var(--hg-public-unit));}
@media (max-width:1023px){
.hg-tag-page{padding:calc(16 * var(--hg-public-unit)) var(--hg-page-gutter) calc(32 * var(--hg-public-unit));}
}
}

/* 无 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:calc(50 * var(--hg-public-unit))!important;width:auto!important;}
.hg-mobile-nav__logo img{height:calc(40 * var(--hg-public-unit))!important;width:auto!important;}
@media (max-width:1023px){.hg-header__logo img{height:calc(42 * var(--hg-public-unit))!important;}}
/* H5导航按高清稿占约51%视口，窄屏保留中文与图标空间，中屏沿用300px上限。 */
@media (max-width:1023px){.dx-drawer.app-aside--left{width:clamp(calc(190 * var(--hg-public-unit)),51vw,calc(300 * var(--hg-public-unit)));}}
/* PC 顶栏右侧：稿 1428:13269「登录/注册」黄胶囊；登录后换成 1356:20115 圆形头像。
     只在 ≥1024 显示，H5 仍走抽屉里的登录入口。 */
.hg-header__auth{display:none;align-items:center;flex-shrink:0;margin-left:calc(4 * var(--hg-public-unit));}
@media (min-width:1024px){.hg-header__auth{display:flex;margin-left:calc(15 * var(--hg-pc-unit));}}
button.hg-header__login.hg-header__login{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;
  min-width:calc(94 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));margin:0;padding:0 calc(12 * var(--hg-public-unit));border:0;border-radius:calc(999 * var(--hg-public-unit));
  background-image:linear-gradient(90deg,#ffd21c,#f5a623);background-color:#ffd21c;
  color:#000;font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:600;line-height:calc(20 * var(--hg-text-unit));white-space:nowrap;cursor:pointer;
}
button.hg-header__login.hg-header__login:hover{filter:brightness(1.05);}
.hg-header .cyber-user{position:relative;flex-shrink:0;}
.hg-header .cyber-user__avatar{
  width:calc(50 * var(--hg-public-unit));height:calc(50 * var(--hg-public-unit));padding:0;border:0;border-radius:calc(25 * var(--hg-public-unit));overflow:hidden;
  display:block;background:#fff;cursor:pointer;box-shadow:none;text-decoration:none;
}
.hg-header .cyber-user__avatar img{display:block;width:calc(50 * var(--hg-public-unit));height:calc(50 * var(--hg-public-unit));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:max(12px,calc(21 * var(--hg-text-unit)));}
/* 「系统消息未读数」红色角标（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:calc(-2 * var(--hg-public-unit));right:calc(-2 * var(--hg-public-unit));z-index:2;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:calc(18 * var(--hg-public-unit));height:calc(18 * var(--hg-public-unit));padding:0 calc(5 * var(--hg-public-unit));border-radius:calc(999 * var(--hg-public-unit));
  background:var(--color-red,#ff3332);color:#fff;
  font-size:max(11px,calc(11 * var(--hg-text-unit)));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:calc(2 * var(--hg-public-unit));right:calc(2 * var(--hg-public-unit));}
/* 抽屉里的「个人中心」：角标咬在左侧导航图标的右上角，与个人中心页的功能入口卡
     （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:calc(29 * var(--hg-public-unit));top:calc(4 * var(--hg-public-unit));right:auto;transform:translateX(-50%);
  min-width:calc(14 * var(--hg-public-unit));height:calc(14 * var(--hg-public-unit));padding:0 calc(3 * var(--hg-public-unit));font-size:max(9px,calc(9 * var(--hg-text-unit)));
  border:calc(2 * var(--hg-public-unit)) solid var(--color-dark,#0a0a0a);
}
.hg-header .cyber-user__menu{
  position:absolute;top:calc(100% + calc(10 * var(--hg-public-unit)));right:0;min-width:calc(180 * var(--hg-public-unit));padding:calc(6 * var(--hg-public-unit));z-index:12010;
  border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);border-radius:calc(12 * var(--hg-public-unit));background:#111;
  box-shadow:0 calc(16 * var(--hg-public-unit)) calc(40 * var(--hg-public-unit)) rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(calc(-6 * var(--hg-public-unit)));
  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:calc(10 * var(--hg-public-unit));padding:calc(10 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit));border-bottom:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.08);}
.hg-header .cyber-user__ava{width:calc(32 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));border-radius:calc(16 * var(--hg-public-unit));overflow:hidden;flex-shrink:0;background:#fff;}
.hg-header .cyber-user__ava img{display:block;width:calc(32 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));object-fit:cover;}
/* 同上：下拉菜单里的 32px 小头像，色块也要跟着缩（32×0.42≈13）。 */
.hg-header .cyber-user__ava .hg-avatar{width:100%;height:100%;font-size:max(12px,calc(13 * var(--hg-text-unit)));}
.hg-header .cyber-user__name{min-width:0;color:#fff;font-size:max(12px,calc(14 * var(--hg-text-unit)));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:calc(10 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit));border:0;border-radius:calc(8 * var(--hg-public-unit));
  background:transparent;color:rgba(255,255,255,.78);font-size:max(12px,calc(14 * var(--hg-text-unit)));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（前端出包会覆盖）。 */
/* 封面尺寸仍由cover的aspect-ratio决定，原链接绝对铺满已确定的封面框。
     链接保留真实盒子供键盘focus-visible显示播放提示，图片百分比尺寸不会另撑高卡片。
     徽标与评分保持纯展示并穿透点击，实际导航始终交给原href。 */
.hg-drama-card__cover-link{position:absolute;inset:0;display:block;}
/* 徽标由模板收敛为最多两枚，双标同排相连，并留出右上评分的宽度。 */
.hg-drama-card__badges{position:absolute;left:calc(8 * var(--hg-public-unit));top:calc(8 * var(--hg-public-unit));z-index:3;display:flex;flex-wrap:nowrap;align-items:flex-start;gap:0;max-width:calc(100% - calc(16 * var(--hg-public-unit)));pointer-events:none;}
.hg-drama-card__cover:has(>.hg-drama-card__score)>.hg-drama-card__badges{max-width:calc(100% - calc(60 * var(--hg-public-unit)));}
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge{position:static!important;inset:auto!important;z-index:auto!important;display:inline-flex;align-items:center;justify-content:center;flex:none;width:auto!important;min-width:0;height:calc(26 * var(--hg-public-unit));padding:0 calc(10 * var(--hg-public-unit))!important;border-radius:calc(999 * var(--hg-public-unit))!important;background:#ffd21c!important;color:#111;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:500;line-height:calc(26 * var(--hg-text-unit));white-space:nowrap;transform:none!important;}
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge--hot{background:#ff591c!important;color:#111;}
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge--new{margin-left:0;background:#89eed3!important;color:#111;}
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge--new:first-child{margin-left:0;}
/* 双标外侧保留胶囊圆角，内侧固定为UI切图的5.5/26斜率；接缝颜色沿用左枚角标。 */
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge:first-child:has(+.hg-drama-card__badge){border-radius:calc(999 * var(--hg-public-unit)) 0 0 calc(999 * var(--hg-public-unit))!important;}
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge:first-child+.hg-drama-card__badge{border-radius:0 calc(999 * var(--hg-public-unit)) calc(999 * var(--hg-public-unit)) 0!important;background-image:url(../images/pc/card-badge-seam.svg)!important;background-position:left top!important;background-size:calc(5.5 * var(--hg-public-unit)) 100%!important;background-repeat:no-repeat!important;}
.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge--hot:first-child+.hg-drama-card__badge--new{background-image:url(../images/pc/card-badge-seam-hot.svg)!important;}
/* 播放遮罩只负责视觉提示，所有点击仍交给原封面链接，SSP素材不使用此组件。 */
.hg-drama-card__play-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hg-card-play-gap,calc(12 * var(--hg-public-unit)));background:var(--hg-card-play-mask,rgba(0,0,0,.58));color:#fff;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease;}
.hg-drama-card__play-circle{box-sizing:border-box;display:grid;place-items:center;width:var(--hg-card-play-size,calc(58 * var(--hg-public-unit)));height:var(--hg-card-play-size,calc(58 * var(--hg-public-unit)));border:calc(1 * var(--hg-public-unit)) solid var(--hg-card-play-outline,#fff);background:var(--hg-card-play-disc,transparent);border-radius:50%;pointer-events:none;}
.hg-drama-card__play-circle::before{content:"";display:block;width:var(--hg-card-play-icon,calc(24 * var(--hg-public-unit)));height:var(--hg-card-play-icon,calc(24 * var(--hg-public-unit)));background:#fff;-webkit-mask:url(../images/play/card-play-rounded-ae4d1f16.svg) center/contain no-repeat;mask:url(../images/play/card-play-rounded-ae4d1f16.svg) center/contain no-repeat;}
.hg-drama-card__play-label{font-size:var(--hg-card-play-font,calc(15 * var(--hg-text-unit)));font-weight:var(--hg-card-play-weight,500);line-height:var(--hg-card-play-line,calc(22 * var(--hg-text-unit)));pointer-events:none;}
@media (hover:hover) and (pointer:fine){.hg-drama-card__cover:hover .hg-drama-card__play-overlay{opacity:1;visibility:visible;}}
.hg-drama-card__cover-link:focus-visible .hg-drama-card__play-overlay,a.hg-drama-card:focus-visible .hg-drama-card__play-overlay{opacity:1;visibility:visible;}
/* 网站实测基准为268.8宽卡：56圈、23图标、10间距、14/21文字。
   原封面链接绝对铺满封面且没有内边距，作为查询容器可避开cover内边距对cqw的扣减。
   仅PC主内容视频卡按实际宽度缩放；H5、侧栏及各类弹层保留上方默认样式。 */
@supports (container-type:inline-size) and (width:1cqw){
  @media (min-width:1024px){
    .hg-main>.main .hg-card-grid:not(:is(.hg-history-dialog__list,aside *,dialog *,[role="dialog"] *,.hg-web-play__side *,.hg-play__panel *,.hg-history-dialog *,.hg-search-suggest *))>.hg-drama-card>.hg-drama-card__cover>.hg-drama-card__cover-link{
      container-type:inline-size;
      --hg-card-play-size:calc(100cqw * 56 / 268.8);
      --hg-card-play-icon:calc(100cqw * 23 / 268.8);
      --hg-card-play-gap:calc(100cqw * 10 / 268.8);
      --hg-card-play-font:calc(14 * var(--hg-text-unit));
      --hg-card-play-line:calc(21 * var(--hg-text-unit));
      --hg-card-play-weight:400;
      --hg-card-play-mask:#0007;
      --hg-card-play-outline:#fff8;
      --hg-card-play-disc:#ffffff0c;
    }
  }
}
@media (max-width:1023px){.hg-drama-card__badges{left:calc(6 * var(--hg-public-unit));top:calc(6 * var(--hg-public-unit));row-gap:calc(3 * var(--hg-public-unit));}.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge{padding:0 calc(9.75 * var(--hg-public-unit))!important;font-size:max(12px,calc(12 * var(--hg-text-unit)));}}
@media (max-width:359px){.hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge{height:calc(22 * var(--hg-public-unit));padding:0 calc(6 * var(--hg-public-unit))!important;font-size:max(10.5px,calc(10.5 * var(--hg-text-unit)));line-height:calc(22 * var(--hg-text-unit));}}
/* 热搜榜「拉伸链接」（需求八，见下方 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:calc(10 * var(--hg-public-unit));}
.hg-play__related .hg-drama-card__body{padding:calc(8 * var(--hg-public-unit)) 0 0;}
.hg-card-grid .hg-drama-card__cover{border-radius:calc(12 * var(--hg-public-unit));}
.hg-card-grid .hg-drama-card__body{padding:calc(10 * var(--hg-public-unit)) 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:calc(8 * var(--hg-public-unit));padding-top:0;gap:calc(6 * var(--hg-public-unit));}
/* 新片按上架未满72小时显示，沿用new类与独立时间戳，颜色为UI的薄荷绿。
     当前共享卡片使用上方flex徽标行，最多两枚且原创/热播优先。
     下面的相邻位移仅兼容旧版直接输出的双标DOM，不参与新徽标行的布局。 */
.hg-drama-card__badge--new{
  background:#89eed3;
  color:#000;
}
.hg-drama-card__badge + .hg-drama-card__badge--new{transform:translateY(calc(100% + calc(4 * var(--hg-public-unit))));}
/* 评分移到右上角(原 common.css 是右下角)，把右下让给集数角标。
     bottom:auto 必须写：common.css 那条给的是 bottom，只加 top 会两端同时定位、把胶囊拉高。 */
.hg-drama-card__score{
  right:calc(8 * var(--hg-public-unit));top:calc(8 * var(--hg-public-unit));bottom:auto;padding:0 calc(7 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));
  background:rgba(0,0,0,.55);border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.14);
  color:var(--color-primary);font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:600;line-height:calc(22 * var(--hg-text-unit));
  -webkit-backdrop-filter:blur(calc(4 * var(--hg-public-unit)));backdrop-filter:blur(calc(4 * var(--hg-public-unit)));
}
/* 集数角标(右下)：完结「全N集」/ 连载「更新至N集」，文案由 Go 侧定。
     与评分同一枚胶囊的形状尺寸，只把字色换成白色 —— 金色留给评分，避免两角同色分不清主次。 */
.hg-drama-card__episode{
  position:absolute;right:calc(8 * var(--hg-public-unit));bottom:calc(8 * var(--hg-public-unit));padding:0 calc(7 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));
  background:rgba(0,0,0,.55);border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.14);
  color:#fff;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:600;line-height:calc(22 * var(--hg-text-unit));
  -webkit-backdrop-filter:blur(calc(4 * var(--hg-public-unit)));backdrop-filter:blur(calc(4 * var(--hg-public-unit)));
}
/* 详情页封面的同款集数角标(右下)：尺寸对齐同封面左上角的 .hg-web-detail__badge
     (19px 高 / 4px 圆角 / 11px 字)，配色沿用卡片角标的半透明深色胶囊。 */
.hg-web-detail__episode{
  position:absolute;right:calc(10 * var(--hg-public-unit));bottom:calc(10 * var(--hg-public-unit));height:calc(19 * var(--hg-public-unit));padding:0 calc(8 * var(--hg-public-unit));border-radius:calc(4 * var(--hg-public-unit));
  background:rgba(0,0,0,.55);border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.14);
  color:#fff;font-size:max(11px,calc(11 * var(--hg-text-unit)));font-weight:600;
  display:inline-flex;align-items:center;
  -webkit-backdrop-filter:blur(calc(4 * var(--hg-public-unit)));backdrop-filter:blur(calc(4 * var(--hg-public-unit)));
}
/* 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 calc(6 * var(--hg-public-unit));border-radius:calc(5 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
@media (max-width:1023px){
  .hg-card-grid .hg-drama-card__cover{border-radius:calc(10 * var(--hg-public-unit));}
  .hg-card-grid .hg-drama-card__body{padding:calc(8 * var(--hg-public-unit)) 0 0;}
  .hg-card-grid .hg-drama-card__tags{margin-top:calc(6 * var(--hg-public-unit));gap:calc(4 * var(--hg-public-unit));}
  .hg-drama-card__score{right:calc(6 * var(--hg-public-unit));top:calc(6 * var(--hg-public-unit));bottom:auto;padding:0 calc(6 * var(--hg-public-unit));border-radius:calc(5 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
  .hg-drama-card__episode{right:calc(6 * var(--hg-public-unit));bottom:calc(6 * var(--hg-public-unit));padding:0 calc(6 * var(--hg-public-unit));border-radius:calc(5 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
}
/* 列表页页头「更新说明」（推荐内容页的「每日 00:00 更新推荐版本」）。
     common.css 只提供了 hg-page-header__text/__extra，没有这行的类，故同样走私有样式。
     位置在面包屑与 h1 之间，用次要色小字，避免抢标题的视觉重量。 */
.hg-page-note{margin:calc(-4 * var(--hg-public-unit)) 0 calc(8 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));color:rgba(255,255,255,.45);}
@media (max-width:768px){.hg-page-note{margin:calc(-2 * var(--hg-public-unit)) 0 calc(6 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));}}
/* 分页左右箭头：放大到 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:calc(6 * var(--hg-public-unit));cursor:pointer;text-decoration:none;
}
.hg-pager__arrow img{
  width:calc(16 * var(--hg-public-unit))!important;height:calc(16 * var(--hg-public-unit))!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:calc(60 * var(--hg-public-unit))!important;height:calc(78 * var(--hg-public-unit))!important;max-width:none!important;object-fit:contain;pointer-events:none;}
@media (max-width:768px){.hg-fab__dl{width:calc(40 * var(--hg-public-unit))!important;height:calc(52 * var(--hg-public-unit))!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:max(12px,calc(18 * var(--hg-text-unit)));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__hot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(12 * var(--hg-public-unit));}
.hg-search-suggest__sort{display:none;}
.hg-search-suggest__actions{display:flex;align-items:center;gap:calc(8 * var(--hg-public-unit));flex-shrink:0;}
.hg-search-suggest__clear-text{border:0;background:transparent;color:rgba(255,255,255,.45);font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:1;padding:calc(6 * var(--hg-public-unit)) calc(4 * var(--hg-public-unit));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:calc(36 * var(--hg-public-unit));height:calc(36 * var(--hg-public-unit));border:0;border-radius:calc(18 * var(--hg-public-unit));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:calc(22 * var(--hg-public-unit))!important;height:calc(22 * var(--hg-public-unit))!important;}
/* 顶栏搜索提交按钮：占原 .hg-search img 的右侧位置(order:1)。 */
.hg-search__submit{order:1;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:calc(28 * var(--hg-public-unit));height:calc(28 * var(--hg-public-unit));margin:0;padding:0;border:0;background:transparent;cursor:pointer;opacity:.75;}
.hg-search__submit:hover{opacity:1;}
.hg-search__submit img{width:calc(15 * var(--hg-public-unit))!important;height:calc(15 * var(--hg-public-unit))!important;opacity:1;order:0;}
/* PC 搜索建议弹窗（设计稿 3468:15680 main-overlay-card）。
     common 用 left:50%+translateX(-50%) 相对搜索表单居中，表单贴顶栏右侧、弹层宽 576px → 右半边溢出视口。 */
@media (min-width:1024px){
  .hg-search-suggest{
    left:auto;right:calc(calc(16 * var(--hg-pc-unit)) - var(--hg-page-gutter));transform:none;width:min(calc(576 * var(--hg-pc-unit)),calc(100vw - calc(32 * var(--hg-pc-unit))));
  }
  /* common 的 max-height:min(72vh,calc(720 * var(--hg-pc-unit))) 在 900 高屏只剩 calc(648 * var(--hg-pc-unit))，稿高 680 的弹层把猜你喜欢的标签行裁进滚动区；
       改为顶栏(79)下方可视高度扣 calc(16 * var(--hg-pc-unit)) 底边距。 */
  /* 暖深灰面板接近不透明，模糊仅补质感，避免正文和海报线条透入搜索内容。 */
  .hg-search-suggest__panel{padding:calc(32 * var(--hg-pc-unit));gap:calc(24 * var(--hg-pc-unit));border-radius:calc(24 * var(--hg-pc-unit));background:#2a2826;background:linear-gradient(145deg,rgba(42,40,38,.98),rgba(31,30,29,.98));-webkit-backdrop-filter:blur(calc(24 * var(--hg-pc-unit)));backdrop-filter:blur(calc(24 * var(--hg-pc-unit)));box-shadow:0 calc(16 * var(--hg-pc-unit)) calc(40 * var(--hg-pc-unit)) rgba(0,0,0,.5);max-height:calc(100vh - calc(95 * var(--hg-pc-unit)));}
  /* 热搜榜「最新/最热」（稿 3524:51174）：80×40 圆角 10，间距 15；按钮比标题高 15，上探 calc(5 * var(--hg-pc-unit))、下压 calc(10 * var(--hg-pc-unit)) 不撑开标题行。 */
  .hg-search-suggest__sort{display:flex;gap:calc(15 * var(--hg-pc-unit));flex-shrink:0;margin:calc(-5 * var(--hg-pc-unit)) 0 calc(-10 * var(--hg-pc-unit));}
  .hg-search-suggest .hg-search-suggest__sort-btn{width:calc(80 * var(--hg-pc-unit));height:calc(40 * var(--hg-pc-unit));padding:calc(10 * var(--hg-pc-unit));border:0;border-radius:calc(10 * var(--hg-pc-unit));background:rgba(255,255,255,.1);color:#fff;font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:500;line-height:calc(20 * var(--hg-text-unit));cursor:pointer;}
  .hg-search-suggest .hg-search-suggest__sort-btn.is-active{background:rgba(255,210,28,.2);color:#ffd21c;}
  .hg-search-suggest__section{gap:calc(15 * var(--hg-pc-unit));}
  .hg-search-suggest__section:has([data-search-history]){gap:calc(20 * var(--hg-pc-unit));}
  .hg-search-suggest__section:has(.hg-search-suggest__guess){gap:calc(24 * var(--hg-pc-unit));}
  .hg-search-suggest__section .hg-search-suggest__title{line-height:calc(25 * var(--hg-text-unit));}
  .hg-search-suggest .hg-search-suggest__close{background:rgba(255,255,255,.06);}
  .hg-search-suggest .hg-search-suggest__close:hover{background:rgba(255,255,255,.12);}
  .hg-search-suggest__empty{line-height:calc(21 * var(--hg-text-unit));}
  .hg-search-suggest__divider{flex-shrink:0;margin-top:calc(-1 * var(--hg-pc-unit));}
  .hg-search-suggest__hot{grid-template-columns:repeat(2,calc(248 * var(--hg-pc-unit)));gap:calc(8 * var(--hg-pc-unit)) calc(15 * var(--hg-pc-unit));}
  .hg-search-suggest__hot-item{justify-content:space-between;gap:calc(6 * var(--hg-pc-unit));padding:calc(12 * var(--hg-pc-unit));border-radius:calc(6 * var(--hg-pc-unit));background:rgba(255,255,255,.05);}
  .hg-search-suggest__rank,.hg-search-suggest__rank.is-top{width:auto;font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:600;line-height:calc(22 * var(--hg-text-unit));color:#ffd21c;}
  .hg-search-suggest__hot-title{font-size:max(12px,calc(15 * var(--hg-text-unit)));font-weight:500;line-height:calc(21 * var(--hg-text-unit));}
  .hg-search-suggest__heat{margin-left:calc(6 * var(--hg-pc-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));color:#8e8e93;text-align:right;}
  /* 猜你喜欢：稿子是 116 宽的纯封面卡（封面 116×155 + 标题 + 一行纯文字标签），无卡底/评分/集数/简介 */
  .hg-search-suggest__guess{grid-template-columns:repeat(4,calc(116 * var(--hg-pc-unit)));gap:calc(15 * var(--hg-pc-unit));}
  .hg-search-suggest .hg-search-suggest__guess .hg-drama-card{display:flex;flex-direction:column;gap:calc(6 * var(--hg-pc-unit));padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;--hg-tag-h:calc(17 * var(--hg-pc-unit));}
  .hg-search-suggest__guess .hg-drama-card__cover{aspect-ratio:116/155;border-radius:calc(12 * var(--hg-pc-unit));background:#171616;}
  .hg-search-suggest__guess .hg-drama-card__badge{left:0;top:0;height:calc(25 * var(--hg-pc-unit));padding:0 calc(10 * var(--hg-pc-unit));border-radius:calc(12 * var(--hg-pc-unit)) 0 calc(12 * var(--hg-pc-unit)) 0;background:#ffd21c;color:#000;font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:600;line-height:calc(25 * var(--hg-text-unit));}
  /* 稿子只画了单枚「原创」；两枚并存沿用全站组合角标（橙色「热播」打底，左侧叠黄色斜切块切图），横排不换行。 */
  .hg-search-suggest__guess .hg-drama-card__badge--new{background:#89eed3;}
  .hg-search-suggest__guess .hg-drama-card__badge:has(+ .hg-drama-card__badge--new){z-index:2;width:calc(39 * var(--hg-pc-unit));padding:0;border-radius:calc(12 * var(--hg-pc-unit)) 0 0 0;background:url(../images/search/m/badge-shape.svg) 0 0/100% 100% no-repeat;text-align:center;}
  .hg-search-suggest__guess .hg-drama-card__badge + .hg-drama-card__badge--new{z-index:1;padding:0 calc(7.5 * var(--hg-pc-unit)) 0 calc(42.5 * var(--hg-pc-unit));border-radius:calc(12 * var(--hg-pc-unit)) 0 calc(12 * var(--hg-pc-unit)) calc(12 * var(--hg-pc-unit));transform:none;}
  .hg-search-suggest__guess .hg-drama-card__score,
  .hg-search-suggest__guess .hg-drama-card__episode,
  .hg-search-suggest__guess .hg-drama-card__views,
  .hg-search-suggest__guess .hg-drama-card__desc{display:none!important;}
  .hg-search-suggest__guess .hg-drama-card__body{display:flex;flex-direction:column;gap:calc(2 * var(--hg-pc-unit));padding:0;}
  .hg-search-suggest__guess .hg-drama-card__title{font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:500;line-height:calc(20 * var(--hg-text-unit));color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hg-search-suggest__guess .hg-drama-card__title a{color:inherit;}
  .hg-search-suggest__guess .hg-drama-card__tags{margin:0;padding:0;gap:0 calc(8 * var(--hg-pc-unit));opacity:.65;}
  .hg-search-suggest__guess .hg-tag{padding:0;border:0;border-radius:0;background:transparent;color:rgba(255,255,255,.9);font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:400;line-height:calc(17 * var(--hg-text-unit));}
}
/* 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:calc(12 * var(--hg-public-unit))!important;right:calc(12 * var(--hg-public-unit))!important;width:auto!important;max-width:none!important;transform:none!important;
    top:calc(100% - calc(1 * var(--hg-public-unit)))!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:calc(20 * var(--hg-public-unit));}}
/* 搜索建议「猜你喜欢」与最近浏览弹窗里的紧凑卡：胶囊是 1px 6px + 15px 行高 */
.hg-search-suggest__guess .hg-drama-card,
.hg-history-dialog__list .hg-drama-card{--hg-tag-h:calc(19 * var(--hg-public-unit));}
/* 首页「分类推荐」列表项的文字区：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:calc(12 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));background:transparent;
}
.hg-post-card__meta{margin:0 0 calc(6 * var(--hg-public-unit));display:flex;align-items:center;flex-wrap:wrap;gap:calc(8 * var(--hg-public-unit));
  color:#fff;font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));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:calc(12 * var(--hg-public-unit));}
.hg-history-dialog__tabs{margin-bottom:calc(12 * var(--hg-public-unit));gap:calc(16 * var(--hg-public-unit));}
.hg-history-dialog__list{
  display:grid!important;
  align-items:stretch!important;
  align-content:start!important;
  justify-items:stretch;
  gap:calc(12 * var(--hg-public-unit));
  grid-auto-rows:max-content!important;
  grid-template-rows:none;
}
/* 帖子页签为单列横条，仅重排历史生成器已有的封面、元信息和标题。
     body 的作用域须高于社区页稍后加载的 hgPostCardStyle，避免从帖子页打开又叠回图底。 */
.hg-history-dialog__list:has(> .hg-post-card){grid-template-columns:minmax(0,1fr)!important;}
.hg-history-dialog__list .hg-post-card{
  align-self:start;background:transparent;border:0;border-radius:calc(12 * var(--hg-public-unit));
}
.hg-history-dialog__list .hg-post-card__gallery{
  display:grid;grid-template-columns:min(32%,calc(240 * var(--hg-public-unit))) minmax(0,1fr);align-items:center;
  gap:calc(16 * var(--hg-public-unit));padding:calc(12 * var(--hg-public-unit));box-sizing:border-box;aspect-ratio:auto;height:auto!important;}
.hg-history-dialog__list .hg-post-card__images{
  position:relative;width:100%;height:auto;aspect-ratio:16/9;border-radius:calc(8 * var(--hg-public-unit));overflow:hidden;
}
.hg-history-dialog__list .hg-post-card__img{position:absolute;inset:0;}
.hg-history-dialog__list .hg-post-card:not(.hg-post-card--nocover) .hg-post-card__body{
  position:static;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:calc(8 * var(--hg-public-unit));padding:0;background:transparent;
}
.hg-history-dialog__list .hg-post-card__body h3{
  margin:0;font-size:max(12px,calc(16 * var(--hg-text-unit)));line-height:calc(24 * var(--hg-text-unit));font-weight:600;white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.hg-history-dialog__list .hg-post-card__meta{
  margin:0;min-width:0;flex-wrap:nowrap;gap:calc(6 * var(--hg-public-unit));color:rgba(255,255,255,.6);font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));
  white-space:nowrap;overflow:hidden;
}
.hg-history-dialog__list .hg-post-card__user,
.hg-history-dialog__list .hg-post-card__cat{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.hg-history-dialog__list .hg-post-card__cat{font-size:inherit;color:inherit;}
.hg-history-dialog__list .hg-post-card__date,
.hg-history-dialog__list .hg-post-card__dot{flex-shrink:0;}
.hg-history-dialog__list .hg-history-post-avatar{display:none;}
/* 统计使用历史弹窗专用类，避免帖子页的通用统计隐藏规则影响PC/H5。 */
.hg-history-dialog__list .hg-history-post__stats{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:0;color:#a9aebc;
  font-size:max(11px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));
}
.hg-history-dialog__list .hg-history-post__stats span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.hg-history-dialog__list .hg-history-post__stats img{display:block;flex:none;width:auto;height:14px;max-width:none;object-fit:contain;}
.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:calc(6 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));overflow:visible;
}
.hg-history-dialog__list .hg-drama-card__desc{margin-top:calc(4 * var(--hg-public-unit));}
/* 标签只显示一行：沿用上面「全站视频卡标签只展示一排」的 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:calc(4 * var(--hg-public-unit));padding-top:0;gap:calc(3 * var(--hg-public-unit)) calc(4 * var(--hg-public-unit));
}
/* 暂无记录：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:calc(200 * var(--hg-public-unit));
}
.hg-history-empty{
  margin:0;width:100%;box-sizing:border-box;padding:calc(48 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));
  color:#888;font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:1.5;text-align:center;
}
@media (max-width:640px){
  .hg-history-dialog__header{padding:calc(12 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit))!important;}
  .hg-history-dialog__tabs{padding:0 calc(16 * var(--hg-public-unit))!important;margin-bottom:0;}
  .hg-history-dialog__list{
    gap:calc(10 * var(--hg-public-unit));padding:calc(10 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit))!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:calc(6 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit)) calc(5 * var(--hg-public-unit));}
  /* 移动端 .hg-tag 行高 14px（桌面 15px），裁切线随之改小到 18px = 1+1+14+1+1，
       仍与胶囊实高恒等，避免多出留白、也不切到下边框。 */
  .hg-history-dialog__list .hg-drama-card{--hg-tag-h:calc(18 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-drama-card__tags{margin-top:calc(4 * var(--hg-public-unit));gap:calc(2 * var(--hg-public-unit)) calc(4 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-tag{padding:calc(1 * var(--hg-public-unit)) calc(5 * var(--hg-public-unit));font-size:max(10px,calc(10 * var(--hg-text-unit)));line-height:calc(14 * var(--hg-text-unit));}
  .hg-history-dialog__list .hg-post-card__gallery{grid-template-columns:calc(104 * var(--hg-public-unit)) minmax(0,1fr);gap:calc(10 * var(--hg-public-unit));padding:calc(10 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card:not(.hg-post-card--nocover) .hg-post-card__body{gap:calc(4 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card__body h3{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
  .hg-history-dialog__list .hg-post-card__meta{font-size:max(11px,calc(11 * var(--hg-text-unit)));}
}
/* PC 稿「最近浏览（弹窗）」3588:32482：920 宽毛玻璃面板 + 70% 黑遮罩；标题行 / 页签 / 列表纵向间距 24；
     卡片 160 宽、封面 213 高，左上角标 + 右上评分，封面下标题 16px 一行省略 + 「第N集」14px，不出简介/标签/集数角标。 */
@media (max-width:1023px){.hg-history-dialog__list .hg-drama-card__ep{display:none;}}
@media (min-width:1024px){
  .hg-history-dialog.is-open .hg-history-dialog__mask{background:rgba(0,0,0,.7);}
  .hg-history-dialog .hg-history-dialog__panel{display:flex;flex-direction:column;gap:calc(24 * var(--hg-public-unit));box-sizing:border-box;border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);border-radius:calc(24 * var(--hg-public-unit));background:rgba(31,29,29,.85);-webkit-backdrop-filter:blur(calc(5 * var(--hg-public-unit)));backdrop-filter:blur(calc(5 * var(--hg-public-unit)));}
  .hg-history-dialog .hg-history-dialog__header{flex:0 0 auto;margin:0;}
  .hg-history-dialog #hg-history-title{line-height:calc(28 * var(--hg-text-unit));}
  .hg-history-dialog .hg-history-dialog__clear{padding:calc(6 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:500;line-height:calc(17 * var(--hg-text-unit));}
  .hg-history-dialog .hg-history-dialog__close{display:flex;align-items:center;justify-content:center;}
  .hg-history-dialog .hg-history-dialog__close img{display:block;width:calc(12 * var(--hg-public-unit))!important;height:calc(12 * var(--hg-public-unit))!important;}
  .hg-history-dialog .hg-history-dialog__tabs{flex:0 0 auto;gap:calc(24 * var(--hg-public-unit));height:auto;margin:0;padding:0;border-bottom:calc(1 * var(--hg-public-unit)) solid #1f1f1f;}
  .hg-history-dialog .hg-history-tab{padding:0 0 calc(10 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:400;line-height:calc(20 * var(--hg-text-unit));color:#858585;}
  .hg-history-dialog .hg-history-tab.is-active{font-weight:600;color:#ffd21c;}
  .hg-history-dialog .hg-history-tab.is-active::after{left:0;right:0;bottom:0;width:auto;height:calc(2 * var(--hg-public-unit));margin:0;border-radius:0;background:#ffd21c;transform:none;}
  .hg-history-dialog .hg-history-dialog__list{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:calc(20 * var(--hg-public-unit));}
  .hg-history-dialog .hg-history-dialog__list:has(> .hg-post-card){grid-template-columns:minmax(0,1fr)!important;}
  /* 帖子卡底按用户确认的“与PC帖子列表一致”关系同步，非弹窗帖子卡的独立Figma色值测量。 */
  .hg-history-dialog .hg-history-dialog__list .hg-post-card{border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);border-radius:calc(16 * var(--hg-public-unit));background:#171719;}
  .hg-history-dialog__list .hg-post-card__gallery{grid-template-columns:32.2% minmax(0,1fr);align-items:start;gap:calc(20 * var(--hg-public-unit));padding:calc(20 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card__images{border-radius:calc(12 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card:not(.hg-post-card--nocover) .hg-post-card__body{justify-content:flex-start;gap:calc(18 * var(--hg-public-unit));padding-top:calc(8 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card__body h3{font-size:max(12px,calc(24 * var(--hg-text-unit)));line-height:calc(34 * var(--hg-text-unit));color:#f1f2f5;}
  .hg-history-dialog__list .hg-post-card__meta{height:calc(35 * var(--hg-public-unit));gap:calc(10 * var(--hg-public-unit));color:#a9aebc;font-size:max(12px,calc(16 * var(--hg-text-unit)));line-height:calc(22 * var(--hg-text-unit));}
  .hg-history-dialog__list .hg-post-card__meta:empty{display:none;}
  .hg-history-dialog__list .hg-history-post__stats{gap:calc(28 * var(--hg-public-unit));font-size:max(12px,calc(16 * var(--hg-text-unit)));line-height:calc(28 * var(--hg-text-unit));}
  .hg-history-dialog__list .hg-history-post__stats span{gap:calc(6 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-history-post__stats img{height:auto;}
  .hg-history-dialog__list .hg-history-post-avatar{
    display:flex;align-items:center;justify-content:center;flex:0 0 calc(30 * var(--hg-public-unit));width:calc(30 * var(--hg-public-unit));height:calc(30 * var(--hg-public-unit));border-radius:50%;
    background:url(/static/web/images/pc/post-avatar-bg.svg) center/cover no-repeat;color:#fff;font-size:max(12px,calc(18 * var(--hg-text-unit)));font-weight:700;line-height:1;
  }
  .hg-history-dialog__list .hg-drama-card{padding:0;border:0;border-radius:0;background:none;box-shadow:none;}
  .hg-history-dialog__list .hg-drama-card__cover{aspect-ratio:160/213;border-radius:calc(16.767 * var(--hg-public-unit));background:#242424;}
  .hg-history-dialog__list .hg-drama-card__cover img{width:100%!important;height:100%!important;-o-object-fit:cover;object-fit:cover;}
  .hg-history-dialog__list .hg-drama-card__badge{left:calc(8 * var(--hg-public-unit));top:calc(8.65 * var(--hg-public-unit));z-index:2;height:calc(26 * var(--hg-public-unit));padding:0 calc(10 * var(--hg-public-unit));border-radius:calc(100 * var(--hg-public-unit));background:#ffd321;box-shadow:none;color:#000;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:500;line-height:calc(26 * var(--hg-text-unit));transform:none;}
  .hg-history-dialog__list .hg-drama-card__score{top:calc(8 * var(--hg-public-unit));right:calc(8 * var(--hg-public-unit));bottom:auto;box-sizing:border-box;min-width:calc(51 * var(--hg-public-unit));height:calc(26 * var(--hg-public-unit));padding:0 calc(9 * var(--hg-public-unit));border:0;border-radius:calc(6 * var(--hg-public-unit));background:rgba(0,0,0,.69);-webkit-backdrop-filter:blur(calc(4.8 * var(--hg-public-unit)));backdrop-filter:blur(calc(4.8 * var(--hg-public-unit)));color:#ffd900;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:700;line-height:calc(26 * var(--hg-text-unit));text-align:center;}
  .hg-history-dialog__list .hg-drama-card__episode,
  .hg-history-dialog__list .hg-drama-card__desc,
  .hg-history-dialog__list .hg-drama-card__tags{display:none;}
  .hg-history-dialog__list .hg-drama-card__body{padding:calc(6 * var(--hg-public-unit)) 0 0;}
  .hg-history-dialog__list .hg-drama-card__title{margin:0;overflow:hidden;color:rgba(255,255,255,.9);font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:500;line-height:calc(22 * var(--hg-text-unit));white-space:nowrap;text-overflow:ellipsis;}
  .hg-history-dialog__list .hg-drama-card__ep{margin:calc(2 * var(--hg-public-unit)) 0 0;color:rgba(255,255,255,.6);font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
}
/* H5最近浏览（3588:33044）：贴底圆角面板，内容自然撑高，长记录只在列表内滚动。
   视频只展示历史原有的角标、评分、集数和标签，帖子继续使用已确认的紧凑横条。 */
@media (max-width:1023px){
  .hg-history-dialog{padding:0;align-items:flex-end;justify-content:center;background:transparent!important;}
  .hg-history-dialog.is-open .hg-history-dialog__mask{display:block;background:rgba(0,0,0,.65);}
  .hg-history-dialog .hg-history-dialog__panel{
    display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-width:none;height:auto!important;
    max-height:80vh;max-height:80dvh;margin:0;padding:0;border:0;border-radius:calc(24 * var(--hg-public-unit)) calc(24 * var(--hg-public-unit)) 0 0;
    background:#111115;overflow:hidden;
  }
  .hg-history-dialog .hg-history-dialog__header{
    position:relative;flex:0 0 auto;gap:calc(12 * var(--hg-public-unit));margin:0;padding:calc(30 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) calc(12 * var(--hg-public-unit))!important;background:transparent;
  }
  .hg-history-dialog .hg-history-dialog__header::after{content:"";position:absolute;left:calc(16 * var(--hg-public-unit));right:calc(16 * var(--hg-public-unit));bottom:0;height:calc(1 * var(--hg-public-unit));background:rgba(255,255,255,.12);}
  .hg-history-dialog #hg-history-title{font-size:max(12px,calc(20 * var(--hg-text-unit)));line-height:calc(28 * var(--hg-text-unit));}
  .hg-history-dialog .hg-history-dialog__actions{gap:calc(12 * var(--hg-public-unit));}
  .hg-history-dialog .hg-history-dialog__clear{height:calc(30 * var(--hg-public-unit));padding:0 calc(7 * var(--hg-public-unit));border:0;border-radius:calc(6 * var(--hg-public-unit));background:#28272b;color:#fff;font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));font-weight:500;}
  .hg-history-dialog .hg-history-dialog__close{width:calc(32 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));flex:0 0 calc(32 * var(--hg-public-unit));border:0;border-radius:50%;background:rgba(255,255,255,.15);}
  .hg-history-dialog .hg-history-dialog__close img{display:block;width:calc(20 * var(--hg-public-unit))!important;height:calc(20 * var(--hg-public-unit))!important;}
  .hg-history-dialog .hg-history-dialog__tabs{flex:0 0 auto;gap:calc(16 * var(--hg-public-unit));height:auto;margin:0;padding:calc(20 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) 0!important;border-bottom:calc(1 * var(--hg-public-unit)) solid #242428;background:transparent;}
  .hg-history-dialog .hg-history-tab{padding:0 0 calc(10 * var(--hg-public-unit));color:#858585;font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));font-weight:400;}
  .hg-history-dialog .hg-history-tab.is-active{color:#ffd21c;font-weight:600;}
  .hg-history-dialog .hg-history-tab.is-active::after{left:0;right:0;bottom:0;width:auto;height:calc(2 * var(--hg-public-unit));margin:0;border-radius:0;background:#ffd21c;transform:none;}
  .hg-history-dialog .hg-history-dialog__list{
    flex:0 1 auto;min-height:0;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:calc(14 * var(--hg-public-unit)) calc(10 * var(--hg-public-unit));padding:calc(14 * var(--hg-public-unit)) calc(12.5 * var(--hg-public-unit)) calc(calc(16 * var(--hg-public-unit)) + env(safe-area-inset-bottom,calc(0 * var(--hg-public-unit))))!important;overflow-y:auto;
  }
  .hg-history-dialog .hg-history-dialog__list:has(> .hg-post-card){grid-template-columns:minmax(0,1fr)!important;}
  .hg-history-dialog .hg-history-dialog__list:has(> .hg-history-empty){min-height:calc(160 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-drama-card{min-width:0;gap:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;--hg-tag-h:calc(20 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-drama-card__cover{aspect-ratio:3/4;border-radius:calc(12 * var(--hg-public-unit));background:#242424;}
  .hg-history-dialog__list .hg-drama-card__badge{left:calc(5 * var(--hg-public-unit));top:calc(6 * var(--hg-public-unit));z-index:2;height:calc(26 * var(--hg-public-unit));padding:0 calc(9.75 * var(--hg-public-unit));border-radius:calc(100 * var(--hg-public-unit));background:#ffd21c;color:#000;font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(26 * var(--hg-text-unit));font-weight:500;transform:none;}
  .hg-history-dialog__list .hg-drama-card__score{top:calc(6 * var(--hg-public-unit));right:calc(5 * var(--hg-public-unit));bottom:auto;box-sizing:border-box;min-width:calc(44 * var(--hg-public-unit));height:calc(26 * var(--hg-public-unit));padding:0 calc(6 * var(--hg-public-unit));border:0;border-radius:calc(6 * var(--hg-public-unit));background:rgba(0,0,0,.7);color:#ffd900;font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(26 * var(--hg-text-unit));font-weight:400;text-align:center;}
  .hg-history-dialog__list .hg-drama-card__episode{position:absolute;right:calc(5 * var(--hg-public-unit));bottom:calc(6 * var(--hg-public-unit));box-sizing:border-box;max-width:calc(100% - calc(10 * var(--hg-public-unit)));height:calc(23.5 * var(--hg-public-unit));padding:0 calc(6 * var(--hg-public-unit));border:0;border-radius:calc(4 * var(--hg-public-unit));background:rgba(0,0,0,.8);color:#fff;font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(23.5 * var(--hg-text-unit));font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hg-history-dialog__list .hg-drama-card__body{gap:0;padding:calc(6 * var(--hg-public-unit)) 0 0;background:transparent;}
  .hg-history-dialog__list .hg-drama-card__title{margin:0;color:rgba(255,255,255,.9);font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(19.5 * var(--hg-text-unit));font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hg-history-dialog__list .hg-drama-card__desc{display:none;}
  .hg-history-dialog__list .hg-drama-card__tags{display:flex;gap:calc(10 * var(--hg-public-unit));height:calc(20 * var(--hg-public-unit));margin:calc(2 * var(--hg-public-unit)) 0 0;padding:0;overflow:hidden;}
  .hg-history-dialog__list .hg-tag{height:calc(20 * var(--hg-public-unit));padding:calc(1 * var(--hg-public-unit)) calc(2 * var(--hg-public-unit));border:0;border-radius:calc(2 * var(--hg-public-unit));background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));font-weight:400;}
  .hg-history-dialog__list .hg-post-card__gallery{grid-template-columns:calc(104 * var(--hg-public-unit)) minmax(0,1fr);gap:calc(10 * var(--hg-public-unit));padding:calc(10 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card:not(.hg-post-card--nocover) .hg-post-card__body{gap:calc(4 * var(--hg-public-unit));}
  .hg-history-dialog__list .hg-post-card__body h3{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
  .hg-history-dialog__list .hg-post-card__meta{font-size:max(11px,calc(11 * var(--hg-text-unit)));}
}
/* 专题卡网格：封面16:9；H5单列，PC列数由后文设计稿规则控制。
     common.css 写死 height:298/155 + PC 3 列 / H5 1 列，这里覆盖。
     封面图改 absolute，避免 aspect-ratio 与 height:100% 互相撑不开。
     PC 文案区再贴底一点（common 是 bottom:16px），两端文案规格在后文分别覆盖。
     不改 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:calc(8 * var(--hg-public-unit));}
@media (max-width:1023px){
  .hg-topic-grid{grid-template-columns:minmax(0,1fr);gap:calc(10 * var(--hg-public-unit));margin-top:calc(14 * var(--hg-public-unit));}
  .hg-topic-card{height:auto;aspect-ratio:16/9;min-height:0;}
  .hg-topic-card__title{font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
}
/* 禅道 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-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:calc(6 * var(--hg-public-unit));padding:calc(48 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));grid-column:1/-1;color:#888;text-align:center;}
.hg-empty__art{flex-shrink:0;display:block;width:calc(188 * var(--hg-public-unit));height:calc(188 * var(--hg-public-unit));max-width:calc(188 * var(--hg-public-unit));margin:0 0 calc(6 * var(--hg-public-unit));-o-object-fit:contain;object-fit:contain;pointer-events:none;}
.hg-empty__title{margin:0;color:#fff;font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:500;line-height:calc(24 * var(--hg-text-unit));}
.hg-empty__desc{margin:0;max-width:calc(420 * var(--hg-public-unit));color:#858585;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:400;line-height:calc(20 * var(--hg-text-unit));}
@media (max-width:767px){
  .hg-empty{padding:calc(36 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));}
  .hg-empty__desc{max-width:calc(300 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
}
/* 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:calc(1 * var(--hg-public-unit))!important;text-underline-offset:calc(2 * var(--hg-public-unit));}
@media (hover:hover) and (pointer:fine){
  .hg-brand-link:hover{color:var(--color-primary);text-decoration-color:currentColor!important;}
}

/* SEO 10.13：首页品牌副标题、热门标签与官方声明。 */
.hg-hero__subtitle{font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:1.6;color:rgba(255,255,255,.75);margin:0 0 calc(8 * var(--hg-public-unit));}
/* 首页热门标签置于公告后，单行横滚，宽度始终受内容区约束。 */
.hg-home-popular-tags{margin:0 0 calc(26 * var(--hg-public-unit));min-width:0;}
.hg-home-popular-tags .hg-tagrow{position:relative;margin-top:calc(14 * var(--hg-public-unit));min-width:0;}
.hg-home-popular-tags .hg-tagrow__scroll{display:flex;flex-wrap:nowrap;gap:calc(8 * var(--hg-public-unit));width:100%;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;padding-bottom:calc(2 * var(--hg-public-unit));-webkit-overflow-scrolling:touch;}
.hg-home-popular-tags .hg-tagrow__scroll::-webkit-scrollbar{display:none;}
.hg-home-popular-tags .hg-tagrow__item{flex:1 1 0;min-width:max-content;display:inline-flex;align-items:center;justify-content:center;height:calc(32 * var(--hg-public-unit));padding:0 calc(10 * var(--hg-public-unit));border-radius:calc(999 * var(--hg-public-unit));background:rgba(255,255,255,.045);border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.07);color:rgba(255,255,255,.78);font-size:max(12px,calc(13 * var(--hg-text-unit)));text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.hg-home-popular-tags .hg-tagrow__item:focus-visible{outline:calc(2 * var(--hg-public-unit)) solid var(--color-primary)!important;outline-offset:calc(-2 * var(--hg-public-unit));}
@media(hover:hover) and (pointer:fine){.hg-home-popular-tags .hg-tagrow__item:hover{background:rgba(255,210,28,.13);color:#ffd21c;}}
/* 仅溢出时提示横滑，拖拽期间关闭文字选择；触摸仍使用浏览器原生滚动。 */
.hg-home-popular-tags .hg-tagrow__scroll.is-overflowing{cursor:grab;}
.hg-home-popular-tags .hg-tagrow__scroll.is-dragging{cursor:grabbing;user-select:none;}
.hg-home-popular-tags .hg-tagrow__scroll.is-dragging .hg-tagrow__item{cursor:grabbing;}
.hg-home-popular-tags .hg-tagrow__scroll:focus-visible{outline:calc(2 * var(--hg-public-unit)) solid var(--color-primary);outline-offset:calc(2 * var(--hg-public-unit));}
.hg-home-popular-tags .hg-tagrow__fade{position:absolute;top:0;bottom:0;width:calc(64 * var(--hg-public-unit));pointer-events:none;opacity:0;transition:opacity .2s;z-index:2;}
.hg-home-popular-tags .hg-tagrow__fade--l{left:0;background:linear-gradient(90deg,#0d0d0d 10%,rgba(13,13,13,0));}
.hg-home-popular-tags .hg-tagrow__fade--r{right:0;background:linear-gradient(270deg,#0d0d0d 10%,rgba(13,13,13,0));}
.hg-home-popular-tags .hg-tagrow__fade.is-on{opacity:1;}
.hg-home-popular-tags .hg-tagrow__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:calc(28 * var(--hg-public-unit));height:calc(28 * var(--hg-public-unit));border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(28,28,28,.94);border:calc(1 * var(--hg-public-unit)) solid rgba(255,210,28,.45);color:#ffd21c;cursor:pointer;padding:0;box-shadow:0 calc(2 * var(--hg-public-unit)) calc(10 * var(--hg-public-unit)) rgba(0,0,0,.6);transition:background .15s,opacity .15s;}
.hg-home-popular-tags .hg-tagrow__nav.is-on{display:flex;}
.hg-home-popular-tags .hg-tagrow__nav--l{left:calc(-5 * var(--hg-public-unit));}
.hg-home-popular-tags .hg-tagrow__nav--r{right:calc(-5 * var(--hg-public-unit));}
.hg-home-popular-tags .hg-tagrow__nav svg{width:calc(12 * var(--hg-public-unit));height:calc(12 * var(--hg-public-unit));display:block;}
/* 到边界保留箭头及焦点，aria-disabled 对应脚本中的动作守卫。 */
.hg-home-popular-tags .hg-tagrow__nav[aria-disabled="true"]{opacity:.35;cursor:default;}
/* 未聚焦的边界箭头不遮住首尾标签，已经聚焦的箭头保留可见。 */
.hg-home-popular-tags .hg-tagrow__nav[aria-disabled="true"]:not(:focus){visibility:hidden;}
.hg-home-popular-tags .hg-tagrow__nav:focus-visible{outline:calc(2 * var(--hg-public-unit)) solid var(--color-primary);outline-offset:calc(2 * var(--hg-public-unit));}
@media(hover:hover) and (pointer:fine){.hg-home-popular-tags .hg-tagrow__nav[aria-disabled="false"]:hover{background:rgba(255,210,28,.2);}}
.hg-home-popular-tags .hg-tagrow__bar{display:none;position:relative;height:calc(3 * var(--hg-public-unit));border-radius:calc(2 * var(--hg-public-unit));margin-top:calc(9 * var(--hg-public-unit));background:rgba(255,255,255,.07);overflow:hidden;}
.hg-home-popular-tags .hg-tagrow__bar.is-on{display:block;}
.hg-home-popular-tags .hg-tagrow__bar>span{position:absolute;top:0;bottom:0;left:0;border-radius:calc(2 * var(--hg-public-unit));background:#ffd21c;}
@media(prefers-reduced-motion:reduce){.hg-home-popular-tags .hg-tagrow__item,.hg-home-popular-tags .hg-tagrow__fade,.hg-home-popular-tags .hg-tagrow__nav{transition:none;}}
.hg-brand-declare{max-width:calc(900 * var(--hg-public-unit));margin:calc(48 * var(--hg-public-unit)) auto 0;padding:calc(22 * var(--hg-public-unit)) calc(24 * var(--hg-public-unit));border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.08);border-radius:calc(12 * var(--hg-public-unit));background:rgba(255,255,255,.02);}
.hg-brand-declare h2{font-size:max(12px,calc(16 * var(--hg-text-unit)));margin:0 0 calc(12 * var(--hg-public-unit));color:rgba(255,255,255,.9);}
.hg-brand-declare p{margin:0 0 calc(10 * var(--hg-public-unit));font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:1.9;color:rgba(255,255,255,.6);}
.hg-brand-declare p:last-child{margin-bottom:0;}
.hg-brand-declare strong{color:rgba(255,255,255,.92);font-weight:600;}
.hg-brand-declare a{color:rgba(255,210,28,.8);text-decoration:none;}
.hg-brand-declare a:hover{text-decoration:underline;}
/* 九个信任页共用更新日期样式，FAQ问题降为h3后保持原卡片字号。 */
.hg-page__updated{margin:calc(16 * var(--hg-public-unit)) 0 0;padding:calc(11 * var(--hg-public-unit)) calc(15 * var(--hg-public-unit));border-radius:0 calc(8 * var(--hg-public-unit)) calc(8 * var(--hg-public-unit)) 0;border-left:calc(2 * var(--hg-public-unit)) solid rgba(255,210,28,.38);background:rgba(255,255,255,.024);color:rgba(255,255,255,.5);font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:1.8;}
.hg-page__updated time{color:rgba(255,255,255,.8);}
.hg-faq>.hg-site-info__grid{margin-top:calc(20 * var(--hg-public-unit));}
.hg-site-info__card h3{margin:0 0 calc(12 * var(--hg-public-unit));font-size:max(12px,calc(18 * var(--hg-text-unit)));line-height:1.5;color:#fff;font-weight:600;}
/* 回家页长标签与域名不拆行，窄屏允许元信息换行，复制按钮仍可见。 */
.hg-homeway-page .hg-homeway-permanent__label{width:auto;min-width:auto;flex:0 0 auto;white-space:nowrap;font-size:max(12px,calc(13 * var(--hg-text-unit)));}
.hg-homeway-page .hg-homeway-permanent__meta{gap:calc(10 * var(--hg-public-unit));flex:1 1 auto;min-width:0;flex-wrap:wrap;}
.hg-homeway-page .hg-homeway-permanent__item{gap:calc(8 * var(--hg-public-unit));}
.hg-homeway-page .hg-homeway-permanent__domain{word-break:normal;overflow-wrap:normal;white-space:nowrap;font-size:max(12px,calc(14 * var(--hg-text-unit)));}
.hg-homeway-page .hg-homeway-panel .hg-btn--pill{padding-left:calc(8 * var(--hg-public-unit));padding-right:calc(8 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));}
@media(max-width:640px){.hg-brand-declare{padding:calc(18 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));margin-top:calc(32 * var(--hg-public-unit));}.hg-homeway-page .hg-homeway-permanent__meta{gap:calc(4 * var(--hg-public-unit)) calc(10 * var(--hg-public-unit));}.hg-homeway-page .hg-homeway-permanent__item{min-height:calc(90 * var(--hg-public-unit));}}

.hg-faq>h2{margin:calc(24 * var(--hg-public-unit)) 0 calc(16 * var(--hg-public-unit));font-size:max(12px,calc(22 * var(--hg-text-unit)));line-height:1.5;font-weight:600;color:#fff;}

/* ================= PC 设计稿 1.4.0（Figma 首页-版本1 3464:9536）全站共用部分 =================
     顶栏 / 内容列 / 视频卡 / 页脚 / 悬浮工具在各 PC 页面是同一套组件，规则统一收在这里；
     首页独有的 hero / 公告 / 标签 / 楼层间距写在 cyber-home.tpl 页内 <style>。
     切图全部是从 Figma 导出的透明底资源（web/static/web/images/pc/），不用 CSS 模拟图形。
     只覆盖 ≥1024px，H5 版式不受影响。 */

/* PC采用1920设计坐标，内容1440与两侧240始终等比；H5使用独立稿。 */

.hg-nav-caret{display:none;}
/* H5 抽屉展开博客子菜单时，整行金色底，子项与父级文字对齐。 */
.hg-mobile-nav .hg-nav-group__row{position:relative;}
.hg-mobile-nav .hg-nav-group__row>.hg-nav-item{width:100%;box-sizing:border-box;padding-right:calc(36 * var(--hg-public-unit));}
.hg-mobile-nav .hg-nav-group__row>.hg-nav-item.is-active::after{content:none;}
.hg-mobile-nav .hg-nav-group.is-open>.hg-nav-group__row>.hg-nav-item,
.hg-mobile-nav .hg-nav-group.is-open>.hg-nav-group__row>.hg-nav-item:hover{
  background:rgba(255,210,28,.12);color:#ffd21c;font-weight:600;
}
.hg-mobile-nav .hg-nav-group__toggle{
  position:absolute;top:0;right:calc(4 * var(--hg-public-unit));z-index:1;display:flex;align-items:center;justify-content:center;
  width:calc(32 * var(--hg-public-unit));height:calc(40 * var(--hg-public-unit));margin:0;padding:0;border:0;background:transparent;cursor:pointer;
}
/* 切图按 750 二倍图导出（15.592×9.293），页面按一半显示，与稿面 15×7.5 的三角形同大。 */
.hg-mobile-nav .hg-nav-group__toggle img{display:block;width:calc(7.796 * var(--hg-public-unit));height:calc(4.646 * var(--hg-public-unit));}
.hg-mobile-nav .hg-nav-group.is-open .hg-nav-group__toggle img{transform:rotate(180deg);}
.hg-mobile-nav .hg-nav-sub{display:flex;flex-direction:column;}
.hg-mobile-nav .hg-nav-sub[hidden]{display:none;}
.hg-mobile-nav .hg-nav-sub a{
  display:flex;align-items:center;height:calc(40 * var(--hg-public-unit));margin-top:calc(2 * var(--hg-public-unit));padding:0 calc(12 * var(--hg-public-unit)) 0 calc(41 * var(--hg-public-unit));border-radius:calc(10 * var(--hg-public-unit));
  color:rgba(255,255,255,.65);font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:400;line-height:calc(21 * var(--hg-text-unit));text-decoration:none;
}
.hg-mobile-nav .hg-nav-sub a:hover{color:#fff;}
.hg-mobile-nav .hg-nav-sub a.is-current{color:#ffd21c;font-weight:600;}
/* PC图片/素材以1920为比例上限；正文用可用宽度，文字另设可读下限。 */
@media (min-width:1024px){
  :root{
    --hg-pc-unit:min(calc(100vw / 1920),1px);
    --hg-text-unit:max(.875px,var(--hg-pc-unit));
    --hg-page-min-gutter:clamp(24px,5vw,96px);
    --hg-page-content-width:min(1440px,calc(100vw - 2 * var(--hg-page-min-gutter)));
    --hg-page-gutter:max(0px,calc((100% - var(--hg-page-content-width)) / 2));
    --hg-main-video-columns:7;
  }
  body,.hg-layout{width:100%;background-color:#0b0b0d}
  /* 根内容盒扣除滚动条占位，避免嵌套容器反复扣除页面边距。 */
  @supports (container-type:inline-size) and (width:1cqw){
    html{container-type:inline-size}
    :root{--hg-page-content-width:min(1440px,calc(100cqw - 2 * var(--hg-page-min-gutter)));}
  }
}
@media (min-width:1280px){:root{--hg-page-min-gutter:96px;}}

/* PC文字设置可读下限，顶部与正文使用可用宽度；图片和素材继续沿用原设计单位。 */
@media (min-width:1024px){
  :root{--dx-header-height:76px;}
  /* 单行顶部实际高度参与文档流，滚动时仍贴顶。 */
  body #app-header{position:sticky;top:0;padding-top:0;}
  /* body与固定顶栏按真实clientWidth居中，避免把滚动条占位算入内容中心。 */
  body #app-header .hg-header.hg-header,
  body #app-header .hg-header.hg-header.is-scrolled{
    position:relative;width:100%;height:auto;min-height:76px;border-bottom:0;
    -webkit-backdrop-filter:blur(calc(25 * var(--hg-pc-unit)));backdrop-filter:blur(calc(25 * var(--hg-pc-unit)))
  }
  body:not(.hg-page-home) #app-header .hg-header.hg-header,
  body:not(.hg-page-home) #app-header .hg-header.hg-header.is-scrolled{background:#111113}
  .hg-header,.hg-header *{font-family:"PingFang SC","Microsoft YaHei",sans-serif}
  .hg-header__inner{
    box-sizing:border-box;--hg-header-logo-width:clamp(112px,calc(136 * var(--hg-pc-unit)),136px);width:var(--hg-page-content-width);
    margin-inline:auto;padding:0;min-height:76px;height:auto;gap:12px 16px;flex-wrap:nowrap
  }
  .hg-header__logo{flex:0 0 var(--hg-header-logo-width);width:var(--hg-header-logo-width);margin-right:0}
  .hg-header__logo picture{display:block;width:100%}
  .hg-header__logo img{width:var(--hg-header-logo-width)!important;height:auto!important}
  /* 导航保留全部文字且始终单行，窄PC搜索另外收起为按钮。 */
  .hg-topbar-nav{flex:1 1 auto;min-width:0;max-width:none;gap:0 4px;flex-wrap:nowrap;overflow:visible}
  .hg-topbar-nav__item{
    flex:0 0 auto;height:41px;padding:10px 9px;border-radius:0;background:none;
    color:#d9d9d9;font-size:14px;font-weight:600;line-height:21px;white-space:nowrap
  }
  .hg-topbar-nav__item:hover,.hg-topbar-nav__item.is-active,
  .hg-topbar-drop.is-open>.hg-topbar-nav__item{color:#ffd321;background:none;font-weight:600}
  .hg-topbar-drop{position:relative;display:flex;align-items:center;flex:0 0 auto;}
  .hg-topbar-drop>.hg-topbar-nav__item{padding-right:2px;}
  .hg-topbar-drop__toggle{
    display:flex;align-items:center;justify-content:center;width:22px;height:41px;
    margin:0;padding:0;border:0;background:none;color:#d9d9d9;cursor:pointer;
  }
  .hg-topbar-drop__toggle:hover,.hg-topbar-drop.is-open>.hg-topbar-drop__toggle,
  .hg-topbar-drop>.hg-topbar-nav__item.is-active+.hg-topbar-drop__toggle{color:#ffd321;}
  .hg-nav-caret{display:block;width:calc(12 * var(--hg-pc-unit));height:calc(12 * var(--hg-pc-unit));flex-shrink:0;color:inherit;transform:rotate(180deg);transition:transform 160ms ease;}
  .hg-topbar-drop.is-open .hg-nav-caret{transform:rotate(0deg);}
  @media(prefers-reduced-motion:reduce){.hg-nav-caret{transition:none;}}
  .hg-topbar-drop__menu{
    position:absolute;top:100%;left:50%;z-index:40;transform:translateX(-50%);
    display:flex;flex-direction:column;width:calc(122 * var(--hg-pc-unit));margin:0;padding:calc(9 * var(--hg-pc-unit)) 0;box-sizing:border-box;
    border:calc(1 * var(--hg-pc-unit)) solid rgba(255,255,255,.1);border-radius:calc(12 * var(--hg-pc-unit));
    background:rgba(27,21,19,.8);-webkit-backdrop-filter:blur(calc(4 * var(--hg-pc-unit)));backdrop-filter:blur(calc(4 * var(--hg-pc-unit)));
    box-shadow:0 calc(4 * var(--hg-pc-unit)) calc(18 * var(--hg-pc-unit)) rgba(0,0,0,.25);
  }
  .hg-topbar-drop__menu[hidden]{display:none;}
  .hg-topbar-drop__menu a{
    display:flex;align-items:center;justify-content:center;height:calc(40 * var(--hg-pc-unit));padding:0;
    color:#aaa7af;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:400;line-height:calc(20 * var(--hg-text-unit));text-decoration:none;white-space:nowrap;
  }
  .hg-topbar-drop__menu a:hover,
  .hg-topbar-drop__menu a.is-current{color:#ffd21c;}
  /* 排行榜切换（3523:35956）：未选中16设计像素 / 50%白，当前榜是金色 #ffd21c 与2设计像素下划线。
     热播榜页点亮热播榜，推荐榜页点亮推荐榜，潜力/飙升榜页点亮自己那一项。 */
  .hg-rank-page .hg-pill-tabs{gap:calc(30 * var(--hg-pc-unit));align-items:flex-end;border-bottom:calc(1 * var(--hg-pc-unit)) solid rgba(255,255,255,.07);}
  .hg-rank-page .hg-pill-tabs__item{
    position:relative;height:auto;padding:0 0 calc(12 * var(--hg-pc-unit));border:0;border-radius:0;background:none;
    color:rgba(255,255,255,.5);font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:500;line-height:calc(22.5 * var(--hg-text-unit));gap:0;
  }
  .hg-rank-page .hg-pill-tabs__icon{display:none;}
  .hg-rank-page .hg-pill-tabs__item.is-active{
    background:none;border-color:transparent;color:#ffd21c;font-size:max(12px,calc(18 * var(--hg-text-unit)));font-weight:600;
  }
  .hg-rank-page .hg-pill-tabs__item.is-active::after{
    content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--hg-pc-unit));width:auto;height:calc(2 * var(--hg-pc-unit));margin:0;border-radius:0;background:#ffd21c;
  }
  .hg-header__search{
    display:flex;position:relative;left:auto;right:auto;top:auto;flex:0 999 210px;
    width:210px;min-width:140px;height:38px;margin-left:auto;padding:0;background:none;border:0
  }
  .hg-search{
    height:38px;padding:0 0 0 15px;gap:0;border-radius:24px;background:rgba(221,221,221,.15);
    border:calc(1 * var(--hg-pc-unit)) solid rgba(255,255,255,.094);-webkit-backdrop-filter:blur(calc(4 * var(--hg-pc-unit)));backdrop-filter:blur(calc(4 * var(--hg-pc-unit)))
  }
  .hg-search input{height:36px;font-size:14px;color:#fff}
  .hg-search input::placeholder{color:rgba(255,255,255,.5)}
  .hg-search__submit{order:2;display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;margin:0;padding:10px;border:0;background:none;opacity:1}
  .hg-search__submit img{width:16px!important;height:16px!important}
  .hg-header__auth{order:0;flex:0 0 auto;height:50px;margin-left:0}
  button.hg-header__login.hg-header__login{
    min-width:0;height:38px;padding:0 17px;border-radius:24px;
    background-image:none;background-color:#ffd321;color:#14130e;font-size:14px;font-weight:600;line-height:21px
  }
  .hg-header__search-btn{display:none;}
  #app-header .hg-header__search .hg-search-suggest{
    top:calc(100% + calc(8 * var(--hg-pc-unit)));right:0;left:auto;width:min(calc(576 * var(--hg-pc-unit)),calc(100vw - calc(32 * var(--hg-pc-unit))));
    max-width:none;transform:none;
  }
  /* 登录首帧占位与真实头像使用同一设计边长，保留换入头像时的稳定位置。 */
  .hg-header .cyber-user__avatar,.hg-header .cyber-user__avatar img{width:50px;height:50px;border-radius:25px;}
  .hg-header .cyber-user__avatar .hg-avatar{font-size:max(12px,calc(21 * var(--hg-text-unit)));}
  html.hg-logged #app-header .hg-header__auth::before{width:50px;height:50px;}
  .hg-header .hg-unread-badge{top:calc(-2 * var(--hg-pc-unit));right:calc(-2 * var(--hg-pc-unit));min-width:calc(18 * var(--hg-pc-unit));height:calc(18 * var(--hg-pc-unit));padding:0 calc(5 * var(--hg-pc-unit));border-radius:calc(999 * var(--hg-pc-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));}
  .hg-header .cyber-user__menu{top:calc(100% + calc(10 * var(--hg-pc-unit)));min-width:calc(180 * var(--hg-pc-unit));padding:calc(6 * var(--hg-pc-unit));border-width:calc(1 * var(--hg-pc-unit));border-radius:calc(12 * var(--hg-pc-unit));box-shadow:0 calc(16 * var(--hg-pc-unit)) calc(40 * var(--hg-pc-unit)) rgba(0,0,0,.55);transform:translateY(calc(-6 * var(--hg-pc-unit)));}
  .hg-header .cyber-user.is-open .cyber-user__menu{transform:none;}
  .hg-header .cyber-user__head{gap:calc(10 * var(--hg-pc-unit));padding:calc(10 * var(--hg-pc-unit)) calc(12 * var(--hg-pc-unit));border-bottom-width:calc(1 * var(--hg-pc-unit));}
  .hg-header .cyber-user__ava,.hg-header .cyber-user__ava img{width:calc(32 * var(--hg-pc-unit));height:calc(32 * var(--hg-pc-unit));border-radius:calc(16 * var(--hg-pc-unit));}
  .hg-header .cyber-user__ava .hg-avatar{font-size:max(12px,calc(13 * var(--hg-text-unit)));}
  .hg-header .cyber-user__name{font-size:max(12px,calc(14 * var(--hg-text-unit)));}
  .hg-header .cyber-user__item{padding:calc(10 * var(--hg-pc-unit)) calc(12 * var(--hg-pc-unit));border-radius:calc(8 * var(--hg-pc-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));}
}

/* 当前Figma新导出确认视频标题为16，旧导出中的20不再作为设计真值。
   标题容器38.63保留布局，各PC视口经公共单位同比缩放。 */
/* 常规楼层标题：当前Figma Text 3804:36254，26字号、36容器、100%行高。 */
@media (min-width:1024px){
  .hg-section-title h2{display:flex;align-items:center;height:calc(36 * var(--hg-pc-unit));margin:0;font-family:"PingFang SC","PingFangSC","Microsoft YaHei",sans-serif;font-size:max(12px,calc(26 * var(--hg-text-unit)));font-weight:600;line-height:1;letter-spacing:0;color:#fff}
}
/* 视频卡（3466:3171）：3:4 封面，左上原创角标、右上评分、左下播放量、右下集数；封面下标题 20px + 标签行。 */
.hg-drama-card__views{display:none;}
/* 标题承接绝对定位的辅助文案，长标题截断后不让隐藏后缀撑宽页面。 */
.hg-card-grid .hg-drama-card__title{position:relative;}
@media (min-width:1024px){
  /* 用户指定主视频区七列；仅匹配主内容里的视频卡，不作用于侧栏、弹窗及其他内容格式。 */
  .hg-main>.main>.hg-section>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main>.hg-list-page>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-channel-page>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-topic-detail>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-creator-page>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-search-results>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-search-guess-block>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-web-play__related>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-web-detail__related>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main .hg-topic-related>.hg-card-grid:has(>.hg-drama-card),
  .hg-main>.main #topics-related>.hg-card-grid:has(>.hg-drama-card){grid-template-columns:repeat(var(--hg-main-video-columns),minmax(0,1fr));}
  .hg-card-grid .hg-drama-card{gap:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;--hg-tag-h:calc(24 * var(--hg-public-unit));}
  .hg-card-grid .hg-drama-card__cover{border-radius:calc(16.767 * var(--hg-public-unit));background:#242424;}
  /* 左上角标（稿 3523:47600 / 3523:47039 / 3523:46726）：单枚「原创」黄胶囊、单枚「热播」橙胶囊，均 46×26；
       两枚并存拼成 82×26 橙胶囊，左侧叠 44.5 宽黄色斜切块（切图），「热播」文字落在 x=48。 */
  .hg-card-grid .hg-drama-card__badge{left:calc(8 * var(--hg-public-unit));top:calc(8.34 * var(--hg-public-unit));z-index:2;height:calc(26 * var(--hg-public-unit));padding:0 calc(10 * var(--hg-public-unit));border-radius:calc(100 * var(--hg-public-unit));background:#ffd321;box-shadow:none;color:#000;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:500;line-height:calc(26 * var(--hg-text-unit));transform:none;}
  .hg-card-grid .hg-drama-card__badge:has(+ .hg-drama-card__badge--new){padding:0 calc(8.5 * var(--hg-public-unit)) 0 calc(10 * var(--hg-public-unit));border-radius:0;background:url(../images/pc/card-badge-original.svg) 0 0/100% 100% no-repeat;}
  .hg-card-grid .hg-drama-card__badge--new{background:#89eed3;color:#000;}
  .hg-card-grid .hg-drama-card__badge + .hg-drama-card__badge--new{z-index:1;padding:0 calc(8 * var(--hg-public-unit)) 0 calc(48 * var(--hg-public-unit));transform:none;}
  .hg-card-grid .hg-drama-card__score{top:calc(8.33 * var(--hg-public-unit));right:calc(8.26 * var(--hg-public-unit));bottom:auto;box-sizing:border-box;min-width:calc(51 * var(--hg-public-unit));height:calc(26 * var(--hg-public-unit));padding:0 calc(9 * var(--hg-public-unit));border:0;border-radius:calc(6 * var(--hg-public-unit));background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(calc(4.8 * var(--hg-public-unit)));backdrop-filter:blur(calc(4.8 * var(--hg-public-unit)));color:#ffd900;font-size:max(12px,calc(13 * var(--hg-text-unit)));font-weight:700;line-height:calc(26 * var(--hg-text-unit));text-align:center;}
  .hg-card-grid .hg-drama-card__episode{right:calc(8.26 * var(--hg-public-unit));bottom:calc(10 * var(--hg-public-unit));height:calc(27 * var(--hg-public-unit));padding:0 calc(8 * var(--hg-public-unit));border:0;border-radius:calc(6.438 * var(--hg-public-unit));background:rgba(0,0,0,.8);-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:400;line-height:calc(27 * var(--hg-text-unit));}
  .hg-card-grid .hg-ep-time__at{margin-right:calc(4 * var(--hg-public-unit));}
  .hg-card-grid .hg-drama-card__views{position:absolute;left:calc(8 * var(--hg-public-unit));bottom:calc(10 * var(--hg-public-unit));z-index:2;display:inline-flex;align-items:center;gap:calc(3 * var(--hg-public-unit));height:calc(26 * var(--hg-public-unit));padding:0 calc(7 * var(--hg-public-unit));border-radius:calc(6 * var(--hg-public-unit));background:rgba(0,0,0,.8);color:#fff;font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));white-space:nowrap;pointer-events:none;}
  .hg-card-grid .hg-drama-card__views img{display:block;width:calc(16 * var(--hg-public-unit))!important;height:calc(16 * var(--hg-public-unit))!important;flex-shrink:0;}
  .hg-card-grid .hg-drama-card__body{padding:0;}
  .hg-card-grid .hg-drama-card__title{height:calc(38.63 * var(--hg-public-unit));font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:500;line-height:calc(38.63 * var(--hg-text-unit));letter-spacing:0;font-family:"PingFang SC","PingFangSC","Microsoft YaHei",sans-serif;color:#e7e6e6;}
  .hg-card-grid .hg-drama-card__title a{font-family:inherit;}
  .hg-card-grid .hg-drama-card__desc{display:none;}
  .hg-card-grid .hg-drama-card__tags{height:calc(20.387 * var(--hg-public-unit));margin-top:0;padding-top:0;gap:calc(16.767 * var(--hg-public-unit));align-items:center;overflow:visible;}
  .hg-card-grid .hg-drama-card .hg-tag{padding:calc(2 * var(--hg-public-unit)) calc(4 * var(--hg-public-unit));border:0;border-radius:calc(4 * var(--hg-public-unit));background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:400;line-height:calc(20 * var(--hg-text-unit));}
}
/* H5 卡片左上角标（750 稿各页同一组件，换算 1:1）：单枚 43.5×26 胶囊，两枚并存 74×26（左侧 39 宽黄色斜切块切图）。 */
@media (max-width:1023px){
  .hg-card-grid .hg-drama-card__badge{left:calc(5 * var(--hg-public-unit));top:calc(6 * var(--hg-public-unit));z-index:2;height:calc(26 * var(--hg-public-unit));padding:0 calc(9.75 * var(--hg-public-unit));border-radius:calc(100 * var(--hg-public-unit));background:#ffd21c;box-shadow:none;color:#000;font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:500;line-height:calc(26 * var(--hg-text-unit));transform:none;}
  .hg-card-grid .hg-drama-card__badge:has(+ .hg-drama-card__badge--new){width:calc(39 * var(--hg-public-unit));padding:0;border-radius:0;background:url(../images/search/m/badge-shape.svg) 0 0/100% 100% no-repeat;text-align:center;}
  .hg-card-grid .hg-drama-card__badge--new{background:#89eed3;color:#000;}
  .hg-card-grid .hg-drama-card__badge + .hg-drama-card__badge--new{z-index:1;padding:0 calc(7.5 * var(--hg-public-unit)) 0 calc(42.5 * var(--hg-public-unit));transform:none;}
}

/* 页脚（3466:4550）：#0d0c0c 底 + 1px 顶线；左 logo / 地址 / 版权，右三列链接（列起点 1304 / 1457 / 1610）。 */
@media (min-width:1024px){
  .hg-footer{padding:calc(30 * var(--hg-public-unit)) var(--hg-page-gutter) calc(38 * var(--hg-public-unit));}
  .hg-footer__inner{flex-direction:row;justify-content:space-between;gap:calc(64 * var(--hg-public-unit));}
  .hg-footer__addrs{order:2;margin-top:calc(13 * var(--hg-public-unit));padding-left:calc(8 * var(--hg-public-unit));gap:calc(6 * var(--hg-public-unit));font-weight:500;}
  .hg-footer__copy{order:3;margin-top:calc(18.5 * var(--hg-public-unit));padding-left:calc(8 * var(--hg-public-unit));}
  .hg-footer__cols{display:grid;grid-template-columns:calc(153 * var(--hg-public-unit)) calc(153 * var(--hg-public-unit)) calc(70 * var(--hg-public-unit));gap:0;width:auto;flex:0 0 auto;}
  .hg-footer__col{width:auto;min-width:0;}
}

/* 悬浮工具：PC 按钮56px、下载卡88×92px；H5 按钮44px、下载卡72×76px。
   工具独立于正文缩放单位，窄PC和大屏保持同一可操作尺寸。 */
.hg-fab__dlwrap[hidden]{display:none!important;}
.hg-fab{--hg-fab-button-size:44px;--hg-fab-panel-width:56px;--hg-fab-download-width:72px;--hg-fab-download-height:76px;--hg-fab-icon-size:18px;--hg-fab-label-size:11px;--hg-fab-label-line:16px;--hg-fab-art-width:36px;--hg-fab-art-height:40px;--hg-fab-art-top:7px;--hg-fab-image-width:50px;--hg-fab-image-height:49.57px;--hg-fab-image-left:-8px;--hg-fab-pill-height:22px;--hg-fab-pill-padding:7px;--hg-fab-pill-bottom:6px;right:calc(12 * var(--hg-public-unit));bottom:calc(20 * var(--hg-public-unit));gap:16px;align-items:center;}
@media (min-width:1024px){.hg-fab{--hg-fab-button-size:56px;--hg-fab-panel-width:68px;--hg-fab-download-width:88px;--hg-fab-download-height:92px;--hg-fab-icon-size:20px;--hg-fab-label-size:12px;--hg-fab-label-line:18px;--hg-fab-art-width:44px;--hg-fab-art-height:48px;--hg-fab-art-top:8px;--hg-fab-image-width:60px;--hg-fab-image-height:59.48px;--hg-fab-image-left:-10px;--hg-fab-pill-height:24px;--hg-fab-pill-padding:10px;--hg-fab-pill-bottom:8px;right:calc(26 * var(--hg-public-unit));bottom:calc(40 * var(--hg-public-unit));gap:calc(40 * var(--hg-public-unit));}}
.hg-fab__dlwrap{display:block;position:relative;width:var(--hg-fab-download-width);height:var(--hg-fab-download-height);}
.hg-fab .hg-fab__btn--download{display:block;position:relative;width:var(--hg-fab-download-width);height:var(--hg-fab-download-height);box-sizing:border-box;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;background-image:linear-gradient(149.42deg,rgba(71,66,46,.72) 19.322%,rgba(46,43,30,.72) 46.389%,rgba(43,40,25,.72) 80.473%);}
.hg-fab__btn--download .hg-fab__dl{display:none!important;}
/* 光晕跟随透明插图，下载卡自身负责圆角裁切。 */
.hg-fab__dlart{display:block;position:absolute;left:50%;top:var(--hg-fab-art-top);transform:translateX(-50%);width:var(--hg-fab-art-width);height:var(--hg-fab-art-height);overflow:visible;}
.hg-fab__dlart img{position:absolute;left:var(--hg-fab-image-left);top:-4px;width:var(--hg-fab-image-width)!important;height:var(--hg-fab-image-height)!important;max-width:none!important;filter:drop-shadow(0 3px 18px rgba(255,210,28,.24));}
.hg-fab__dlpill{display:flex;position:absolute;left:50%;bottom:var(--hg-fab-pill-bottom);transform:translateX(-50%);height:var(--hg-fab-pill-height);padding:0 var(--hg-fab-pill-padding);align-items:center;border-radius:100px;background-image:linear-gradient(90deg,#ffd21c,#f5a623);color:#000;font-size:var(--hg-fab-label-size);font-weight:500;line-height:var(--hg-fab-label-line);white-space:nowrap;}
.hg-fab__dlclose{display:block;position:absolute;right:-4px;top:-4px;z-index:2;width:20px;height:20px;padding:0;border:0;cursor:pointer;}
.hg-fab__dlclose img{display:block;width:20px!important;height:20px!important;}
.hg-fab__panel{display:flex;flex-direction:column;gap:4px;width:var(--hg-fab-panel-width);box-sizing:border-box;padding:5px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.hg-fab__panel button.hg-fab__btn{width:var(--hg-fab-button-size);height:var(--hg-fab-button-size);flex-direction:column;justify-content:center;gap:2px;border-radius:9px;background:none;}
.hg-fab__panel button.hg-fab__btn--history{order:-1;background:#ffd321;}
.hg-fab__panel .hg-fab__btn--backtop{opacity:1!important;pointer-events:auto!important;}
.hg-fab__panel .hg-fab__bg,.hg-fab__panel .hg-fab__icon{display:none!important;}
.hg-fab__pcicon{display:block;width:var(--hg-fab-icon-size)!important;height:var(--hg-fab-icon-size)!important;flex-shrink:0;}
.hg-fab__label{display:block;color:#a1a1aa;font-size:var(--hg-fab-label-size);font-weight:500;line-height:var(--hg-fab-label-line);white-space:nowrap;}
.hg-fab__btn--history .hg-fab__label{color:#000;}
@media (hover:hover) and (pointer:fine){
  .hg-fab .hg-fab__panel button.hg-fab__btn--backtop:hover{background:rgba(255,255,255,.1);}
}
/* ---- PC 设计稿：专题卡（首页专题推荐 3466:3675 / 全部专题 3481:20088 共用） ----
     3 列 464×261、无描边、自下而上压暗；文案白色：剧集数 12 / 标题 18 / 简介 14（单行省略）。
     H5 卡片同样展示现有简介，使用下面单独的两行规格。 */
.hg-topic-card__desc{display:none;}
@media (min-width:1024px){
  .hg-topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(24 * var(--hg-public-unit));}
  .hg-topic-card{height:auto;aspect-ratio:464/261;border:0;border-radius:calc(16 * var(--hg-public-unit));}
  .hg-topic-card::after{background:linear-gradient(0deg,rgba(0,0,0,.7) 61.339%,rgba(0,0,0,0) 85.276%);}
  .hg-topic-card__body{left:calc(14 * var(--hg-public-unit));right:calc(20 * var(--hg-public-unit));bottom:calc(15 * var(--hg-public-unit));}
  .hg-topic-card__meta{display:flex;margin:0 0 calc(8 * var(--hg-public-unit));color:#fff;font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:500;line-height:calc(17 * var(--hg-text-unit));}
  .hg-topic-card__title{font-size:max(12px,calc(18 * var(--hg-text-unit)));line-height:calc(25 * var(--hg-text-unit));font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .hg-topic-card__desc{display:block;margin-top:calc(4 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));color:rgba(255,255,255,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media (max-width:1023px){
  .hg-topic-card{border:0;box-shadow:none;}
  .hg-topic-card::after{background:linear-gradient(0deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 45%,transparent 72%);}
  .hg-topic-card__body{left:calc(12 * var(--hg-public-unit));right:calc(12 * var(--hg-public-unit));bottom:calc(12 * var(--hg-public-unit));}
  .hg-topic-card__meta{margin:0 0 calc(4 * var(--hg-public-unit));color:#fff;font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(16 * var(--hg-text-unit));}
  .hg-topic-card__title{font-size:max(12px,calc(14 * var(--hg-text-unit)));line-height:calc(20 * var(--hg-text-unit));}
  .hg-topic-card__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-top:calc(4 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(17 * var(--hg-text-unit));color:rgba(255,255,255,.6);white-space:normal;overflow:hidden;text-overflow:ellipsis;}
}
/* ---- PC 设计稿：分页（pagination-component）----
     箭头 28×32 透明底 + 12px 灰色 chevron 切图（pc/pager-*.svg，<picture> 只在 PC 换图），
     当前页 32 黄底 + 粉色投影；输入框 76×32 #23211f；「页」白色。覆盖上方 H5 口径的黄底箭头。 */
@media (min-width:1024px){
  .hg-pager{margin-top:calc(15 * var(--hg-public-unit));}
  .hg-pager__arrow{width:calc(28 * var(--hg-public-unit));height:calc(32 * var(--hg-public-unit));background:none!important;border-radius:0;}
  .hg-pager__arrow img{width:calc(12 * var(--hg-public-unit))!important;height:calc(12 * var(--hg-public-unit))!important;filter:none;}
  .hg-pager__arrow:hover:not(:disabled){filter:none;}
  .hg-pager__page{font-weight:600;}
  .hg-pager__page.is-active{width:calc(32 * var(--hg-public-unit));padding:0;filter:drop-shadow(0 calc(4 * var(--hg-public-unit)) calc(5 * var(--hg-public-unit)) rgba(233,78,143,.25));}
  .hg-pager__jump-input{width:calc(76 * var(--hg-public-unit));padding:0 calc(8 * var(--hg-public-unit));border-color:rgba(255,255,255,.2);background:#23211f;}
  .hg-pager__jump-unit{padding-left:calc(4 * var(--hg-public-unit));color:#fff;font-weight:500;}
}

/* ================= 设计稿 1.4.0 全站共性（PC 1920 稿 / H5 750 稿按 1:2 换算） =================
     页面底色、内页顶栏、页脚、FAQ、视频卡、分页、面包屑、帖子卡在各页面是同一套组件，统一收在这里。
     首页的玻璃顶栏、排行榜/搜索页的页内 FAQ 与顶栏由各自模板 <style> 覆盖，不受影响。 */
:root{--color-page:#0b0b0d;}
/* 页面底色独立调整，移动端通用浮层保留原有底色。 */
@media (max-width:1023px){:root{--color-popover-bg:#111115;}}
/* PC各页面共享新版顶部底色；H5保留各页面原有背景。 */
@media (max-width:1023px){body:not(.hg-page-home):not(.hg-page-search) #app-header .hg-header{background:#111113;}}

/* 页脚：PC #0d0c0c、H5 #151515，均带 1px 顶线。分栏标题原是内联样式，挪成类以便分断点。 */
.hg-footer{background:#0d0c0c;border-top:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);}
.hg-footer__title{margin:0 0 calc(12 * var(--hg-public-unit));color:#fff;font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:500;line-height:calc(19.5 * var(--hg-text-unit));white-space:nowrap;}
@media (max-width:1023px){
  .hg-footer{padding:calc(24.5 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit)) calc(18 * var(--hg-public-unit));background:#151515;}
  .hg-footer__inner{gap:0;}
  .hg-footer__copy{order:2;margin-top:calc(12 * var(--hg-public-unit));color:rgba(255,255,255,.3);font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(19.8 * var(--hg-text-unit));}
  .hg-footer__addrs{order:3;margin-top:calc(3 * var(--hg-public-unit));gap:calc(3 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(19.8 * var(--hg-text-unit));letter-spacing:0;}
  .hg-footer__addrs span{color:rgba(255,255,255,.3);}
  .hg-footer__addrs a{font-weight:400;}
  .hg-footer__cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0 calc(16 * var(--hg-public-unit));box-sizing:border-box;width:100%;margin-top:calc(16 * var(--hg-public-unit));padding:calc(16.5 * var(--hg-public-unit)) 0 calc(14 * var(--hg-public-unit));border-top:calc(.5 * var(--hg-public-unit)) solid rgba(255,255,255,.07);border-bottom:calc(.5 * var(--hg-public-unit)) solid rgba(255,255,255,.07);}
  .hg-footer__col{width:auto;min-width:0;}
  .hg-footer__title{margin-bottom:calc(10 * var(--hg-public-unit));font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
  .hg-footer__col a{margin-top:calc(5 * var(--hg-public-unit));color:rgba(255,255,255,.4);font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(18 * var(--hg-text-unit));}
}

/* FAQ：保留折叠交互，只对齐配色字号；展开态不再变黄。选择器带 .hg-faq 前缀，压过 common.css 里回家页的两层选择器。 */
.hg-faq .hg-faq__item,.hg-faq .hg-faq__item[open]{border:calc(1 * var(--hg-public-unit)) solid rgba(255,255,255,.1);border-radius:calc(14 * var(--hg-public-unit));background:rgba(255,255,255,.05);box-shadow:none;}
.hg-faq .hg-faq__item summary,.hg-faq .hg-faq__item[open] summary{padding:calc(16 * var(--hg-public-unit)) calc(20 * var(--hg-public-unit));color:#fff;font-size:max(12px,calc(16 * var(--hg-text-unit)));font-weight:500;line-height:calc(22 * var(--hg-text-unit));}
.hg-faq .hg-faq__body{padding:calc(12 * var(--hg-public-unit)) calc(20 * var(--hg-public-unit)) calc(16 * var(--hg-public-unit));border-top:calc(.77 * var(--hg-public-unit)) solid rgba(255,255,255,.05);}
.hg-faq .hg-faq__body p{color:rgba(255,255,255,.5);font-size:max(12px,calc(13 * var(--hg-text-unit)));line-height:calc(22.1 * var(--hg-text-unit));}
@media (min-width:1024px){
  .hg-faq .hg-faq__title,.hg-faq>h2{margin-bottom:calc(20 * var(--hg-public-unit));font-size:max(12px,calc(28 * var(--hg-text-unit)));line-height:calc(39 * var(--hg-text-unit));font-weight:600;}
}
@media (max-width:1023px){
  .hg-faq .hg-faq__title,.hg-faq>h2{display:flex;align-items:center;gap:calc(7 * var(--hg-public-unit));margin-bottom:calc(17 * var(--hg-public-unit));color:#fff;font-size:max(12px,calc(16 * var(--hg-text-unit)));line-height:calc(24 * var(--hg-text-unit));font-weight:600;}
  .hg-faq .hg-faq__title::before,.hg-faq>h2::before{content:"";flex:0 0 calc(3 * var(--hg-public-unit));width:calc(3 * var(--hg-public-unit));height:calc(16 * var(--hg-public-unit));border-radius:calc(1.5 * var(--hg-public-unit));background:#ffd21c;}
  .hg-faq .hg-faq__list{gap:calc(8 * var(--hg-public-unit));}
  .hg-faq .hg-faq__list .hg-faq__item,.hg-faq .hg-faq__list .hg-faq__item[open]{border-width:calc(.5 * var(--hg-public-unit));border-radius:calc(8 * var(--hg-public-unit));background:#1d1d21;box-shadow:0 calc(2 * var(--hg-public-unit)) calc(4 * var(--hg-public-unit)) rgba(0,0,0,.3);}
  .hg-faq .hg-faq__item summary,.hg-faq .hg-faq__item[open] summary{padding:calc(14.4 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:600;line-height:calc(21 * var(--hg-text-unit));}
  .hg-faq .hg-faq__item[open] summary{padding-bottom:0;}
  .hg-faq .hg-faq__body{padding:calc(8 * var(--hg-public-unit)) calc(14.4 * var(--hg-public-unit)) calc(14.4 * var(--hg-public-unit));border-top:0;}
  .hg-faq .hg-faq__body p{color:rgba(255,255,255,.45);font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(20.4 * var(--hg-text-unit));}
}

/* 帖子卡：#1d1d21（页面底上叠 5% 白）+ 淡描边。 */
.hg-post-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.06);}

/* 视频卡播放量单位按稿大写（8.3W）。 */
.hg-drama-card__views{text-transform:uppercase;}
/* H5 视频卡（3540:61153）：封面 12 圆角；右上评分 44×26 黑底金字；左下播放量、右下「X前 更新至N集」黑底 11px；
     片名 14px 中粗 90% 白，下面直接接标签（灰底灰字无描边），不出简介。 */
@media (max-width:1023px){
  .hg-card-grid{column-gap:calc(11 * var(--hg-public-unit));}
  .hg-card-grid .hg-drama-card__cover{border-radius:calc(12 * var(--hg-public-unit));background:#242424;}
  .hg-card-grid .hg-drama-card__score{top:calc(6 * var(--hg-public-unit));right:calc(5 * var(--hg-public-unit));bottom:auto;box-sizing:border-box;min-width:calc(44 * var(--hg-public-unit));height:calc(26 * var(--hg-public-unit));padding:0 calc(6 * var(--hg-public-unit));border:0;border-radius:calc(6 * var(--hg-public-unit));background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(calc(4.8 * var(--hg-public-unit)));backdrop-filter:blur(calc(4.8 * var(--hg-public-unit)));color:#ffd900;font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:400;line-height:calc(26 * var(--hg-text-unit));text-align:center;}
  .hg-card-grid .hg-drama-card__episode{right:calc(5 * var(--hg-public-unit));bottom:calc(6 * var(--hg-public-unit));height:calc(23.5 * var(--hg-public-unit));padding:0 calc(6 * var(--hg-public-unit));border:0;border-radius:calc(4 * var(--hg-public-unit));background:rgba(0,0,0,.8);-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;font-size:max(11px,calc(11 * var(--hg-text-unit)));font-weight:400;line-height:calc(23.5 * var(--hg-text-unit));}
  .hg-card-grid .hg-ep-time__at{margin-right:calc(3 * var(--hg-public-unit));}
  .hg-card-grid .hg-drama-card__views{position:absolute;left:calc(5 * var(--hg-public-unit));bottom:calc(6 * var(--hg-public-unit));z-index:2;display:inline-flex;align-items:center;gap:calc(2 * var(--hg-public-unit));height:calc(23.5 * var(--hg-public-unit));padding:0 calc(5 * var(--hg-public-unit));border-radius:calc(4 * var(--hg-public-unit));background:rgba(0,0,0,.8);color:#fff;font-size:max(11px,calc(11 * var(--hg-text-unit)));line-height:calc(23.5 * var(--hg-text-unit));white-space:nowrap;pointer-events:none;}
  .hg-card-grid .hg-drama-card__views img{display:block;width:calc(12 * var(--hg-public-unit))!important;height:calc(12 * var(--hg-public-unit))!important;flex-shrink:0;}
  .hg-card-grid .hg-drama-card__body{padding:calc(6 * var(--hg-public-unit)) 0 0;}
  .hg-card-grid .hg-drama-card__title{font-size:max(12px,calc(14 * var(--hg-text-unit)));font-weight:500;line-height:calc(19.5 * var(--hg-text-unit));color:rgba(255,255,255,.9);}
  .hg-card-grid .hg-drama-card__desc{display:none;}
  .hg-card-grid .hg-drama-card__tags{margin-top:calc(2 * var(--hg-public-unit));gap:calc(10 * var(--hg-public-unit));}
  .hg-card-grid .hg-drama-card .hg-tag{padding:calc(1 * var(--hg-public-unit)) calc(2 * var(--hg-public-unit));border:0;border-radius:calc(2 * var(--hg-public-unit));background:rgba(255,255,255,.05);color:rgba(255,255,255,.6);font-size:max(12px,calc(12 * var(--hg-text-unit)));font-weight:400;line-height:calc(18 * var(--hg-text-unit));}
}
/* 首页、频道、搜索和个人列表共用底角一行，完整播放量优先，长集数在剩余宽度内省略。 */
.hg-card-grid .hg-drama-card__cover{display:flex;align-items:flex-end;gap:calc(4 * var(--hg-public-unit));box-sizing:border-box;padding:0 calc(8 * var(--hg-public-unit)) calc(10 * var(--hg-public-unit));}
.hg-card-grid .hg-drama-card__views,.hg-card-grid .hg-drama-card__episode{position:relative;inset:auto;}
.hg-card-grid .hg-drama-card__views{order:0;flex:0 0 auto;}
.hg-card-grid .hg-drama-card__episode{order:1;flex:0 1 auto;min-width:0;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:1023px){.hg-card-grid .hg-drama-card__cover{padding:0 calc(5 * var(--hg-public-unit)) calc(6 * var(--hg-public-unit));}}

/* H5 分页（3540:60770）：一行排完，页码 16 方块、箭头无底色、跳转组同行。 */
@media (max-width:1023px){
  .hg-pager{flex-wrap:nowrap;gap:calc(4 * var(--hg-public-unit));min-height:0;margin-top:calc(16 * var(--hg-public-unit));}
  .hg-pager__arrow{width:calc(16 * var(--hg-public-unit));height:calc(18.5 * var(--hg-public-unit));background:none!important;border-radius:0;}
  .hg-pager__arrow img{width:calc(8 * var(--hg-public-unit))!important;height:calc(8 * var(--hg-public-unit))!important;filter:none;}
  .hg-pager__arrow:hover:not(:disabled){filter:none;}
  .hg-pager__page{min-width:calc(16 * var(--hg-public-unit));height:calc(16 * var(--hg-public-unit));padding:0 calc(2 * var(--hg-public-unit));border-radius:calc(3 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));font-weight:600;}
  .hg-pager__page.is-active{filter:drop-shadow(0 calc(2 * var(--hg-public-unit)) calc(2.5 * var(--hg-public-unit)) rgba(233,78,143,.25));}
  .hg-pager__dots{width:calc(12 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));}
  .hg-pager__jump{gap:calc(4 * var(--hg-public-unit));margin-left:calc(4 * var(--hg-public-unit));}
  .hg-pager__jump-btn{height:calc(23 * var(--hg-public-unit));padding:0 calc(8 * var(--hg-public-unit));border-radius:calc(3 * var(--hg-public-unit));font-size:max(11px,calc(11 * var(--hg-text-unit)));}
  .hg-pager__jump-input{width:calc(49 * var(--hg-public-unit));height:calc(23 * var(--hg-public-unit));padding:0 calc(4 * var(--hg-public-unit));border-radius:calc(3 * var(--hg-public-unit));border-color:rgba(255,255,255,.2);background:#222120;font-size:max(11px,calc(11 * var(--hg-text-unit)));}
  .hg-pager__jump-unit{padding-left:calc(2 * var(--hg-public-unit));color:#fff;font-size:max(11px,calc(11 * var(--hg-text-unit)));font-weight:500;}
  .hg-breadcrumb{font-size:max(12px,calc(12 * var(--hg-text-unit)));line-height:calc(17 * var(--hg-text-unit));}
}

/* 卡片流 feed 广告的标题与描述：覆盖 SDK 浅底文案配色，保留字号与图片。 */
.hg-ssp-slot [data-ssp-feed-content] [data-ssp-title]{color:rgba(255,255,255,.9)!important;font-weight:500;}
.hg-ssp-slot [data-ssp-feed-content] [data-ssp-description]{color:rgba(255,255,255,.75)!important;}
.hg-card-grid .hg-ssp-slot [data-ssp-feed-content]{padding:0!important;}
@media (max-width:1023px){
  .hg-card-grid .hg-ssp-slot [data-ssp-feed-content] [data-ssp-title]{padding-top:calc(6 * var(--hg-public-unit));font-size:max(12px,calc(14 * var(--hg-text-unit)))!important;line-height:calc(19.5 * var(--hg-text-unit))!important;}
}
@media (min-width:1024px){
  .hg-card-grid .hg-ssp-slot [data-ssp-feed-content] [data-ssp-title]{font-size:max(12px,calc(20 * var(--hg-text-unit)))!important;line-height:calc(38.6 * var(--hg-text-unit))!important;white-space:nowrap!important;}
}
/* 主视频网格的feed文案与邻视频标题同款，素材内覆盖文案、侧栏和弹层不参与。 */
.hg-main>.main .hg-card-grid:not(:is(aside *,dialog *,[role="dialog"] *,.hg-web-play__side *,.hg-play__panel *,.hg-history-dialog *,.hg-search-suggest *))>.hg-ssp-slot[data-ssp-format="feed"] [data-ssp-feed-content] [data-ssp-title]{font-family:inherit!important;font-weight:500!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
@media (max-width:1023px){
  .hg-main>.main .hg-card-grid:not(:is(aside *,dialog *,[role="dialog"] *,.hg-web-play__side *,.hg-play__panel *,.hg-history-dialog *,.hg-search-suggest *))>.hg-ssp-slot[data-ssp-format="feed"] [data-ssp-feed-content] [data-ssp-title]{font-size:max(12px,calc(14 * var(--hg-text-unit)))!important;line-height:calc(19.5 * var(--hg-text-unit))!important;}
}
@media (min-width:1024px){
  .hg-main>.main .hg-card-grid:not(:is(aside *,dialog *,[role="dialog"] *,.hg-web-play__side *,.hg-play__panel *,.hg-history-dialog *,.hg-search-suggest *))>.hg-ssp-slot[data-ssp-format="feed"] [data-ssp-feed-content] [data-ssp-title]{font-family:"PingFang SC","PingFangSC","Microsoft YaHei",sans-serif!important;font-size:max(12px,calc(16 * var(--hg-text-unit)))!important;line-height:calc(38.63 * var(--hg-text-unit))!important;}
}

/* PC列表页头、正文、公告与首页说明区共用Figma同比例内宽。 */
@media (min-width:1024px){
  /* 仅独立横幅跟随正文宽度，其他格式与窄面板保留原有限宽。 */
  .hg-main .hg-ssp-slot[data-ssp-format="banner"]{--hg-independent-ad-max:var(--hg-page-content-width);}
  /* 横幅外壳与1440正文同列，单幅700由组件限制，余量留在两幅之间。 */
  .hg-main .hg-ssp-slot[data-ssp-format="banner"][data-ssp-layout="stacked"]{--hg-independent-ad-max:min(var(--hg-page-content-width),1440px);}
  .hg-page-home .hg-main>.main>.hg-section,
  .hg-page-home .hg-main>.main>.hg-announce,
  .hg-page-home .hg-main>.main>.hg-brand-declare{
    box-sizing:border-box;width:var(--hg-page-content-width);
    max-width:var(--hg-page-content-width);margin-inline:auto;padding-inline:0;
  }
  /* 首页横幅原有行内宽度与页内 !important 边距，按楼层实际内容宽对齐。 */
  .hg-page-home .hg-main>.main>.hg-ssp-slot{
    width:min(var(--hg-independent-ad-max,calc(1100 * var(--hg-public-unit))),calc(100% - 2 * var(--hg-page-gutter)))!important;
    max-width:var(--hg-independent-ad-max,calc(1100 * var(--hg-public-unit)))!important;margin-left:auto!important;margin-right:auto!important;}
  .hg-main>.main .hg-channel-page .hg-channel-tabs,
  .hg-main>.main>.hg-list-page:not(.hg-homeway-page)>.hg-breadcrumb,
  .hg-main>.main .hg-channel-page>.hg-channel-page__head,
  .hg-main>.main .hg-channel-page .hg-channel-page__intro,
  .hg-main>.main .hg-channel-page>.hg-channel-page__geo,
  .hg-main>.main>.hg-list-page>.hg-page-header,
  .hg-main>.main>.hg-list-page>.hg-page-note,
  .hg-main>.main .hg-topic-page>.hg-topic-lead,
  .hg-main>.main .hg-topic-detail>.hg-topic-banner,
  .hg-main>.main .hg-rank-page>.hg-rank-head,
  .hg-main>.main .hg-search-page>.hg-search-page__head,
  .hg-main>.main .hg-search-page .hg-search-page__intro,
  .hg-main>.main .hg-community-page>.hg-community-page__title,
  .hg-main>.main .hg-community-page>.hg-community-page__lead,
  .hg-main>.main .hg-community-page>.hg-community-page__geo,
  .hg-main>.main .hg-channel-page>.hg-card-grid,
  .hg-main>.main .hg-channel-page>.hg-post-list,
  .hg-main>.main .hg-channel-page>.hg-community-tag-page__toolbar,
  .hg-main>.main .hg-channel-page>.hg-section-title:not([data-panel-title]),
  .hg-main>.main .hg-channel-page>.hg-channel-pager,
  .hg-main>.main .hg-channel-page>.hg-faq,
  .hg-main>.main>.hg-list-page>.hg-card-grid,
  .hg-main>.main>.hg-list-page>.hg-pager,
  .hg-main>.main>.hg-list-page>h2,
  .hg-page-topics .hg-main>.main .hg-topic-page>.hg-topic-grid,
  .hg-page-topics .hg-main>.main .hg-topic-page>#topics-related,
  .hg-page-topics .hg-main>.main .hg-topic-page>#topics-faq,
  .hg-main>.main .hg-topic-detail>.hg-topic-works-head,
  .hg-main>.main .hg-topic-detail>.hg-card-grid,
  .hg-main>.main .hg-topic-detail>.hg-pager,
  .hg-main>.main .hg-topic-detail>.hg-topic-related,
  .hg-main>.main .hg-topic-detail>.hg-faq,
  .hg-main>.main .hg-rank-page>.hg-rank-list,
  .hg-main>.main .hg-rank-page>.hg-rank-head>.hg-pill-tabs,
  .hg-main>.main .hg-rank-page>.hg-faq,
  .hg-main>.main .hg-search-page .hg-search-tabbar,
  .hg-main>.main .hg-search-page .hg-search-page__meta,
  .hg-main>.main .hg-search-page>.hg-search-results,
  .hg-main>.main .hg-search-page>.hg-search-empty-wrap,
  .hg-main>.main .hg-search-page>.hg-search-hot,
  .hg-main>.main .hg-search-page>.hg-search-guess-block,
  .hg-main>.main .hg-search-page>.hg-faq,
  .hg-main>.main .hg-community-page>.hg-cate-feed,
  .hg-main>.main .hg-community-page>.hg-gossip-tabs,
  .hg-main>.main .hg-community-page>.hg-community-toolbar,
  .hg-main>.main .hg-community-page>.hg-post-list,
  .hg-main>.main .hg-community-page>.hg-pager,
  .hg-main>.main .hg-community-page>.hg-faq,
  .hg-main>.main .hg-creator-page>.hg-creator-tabs,
  .hg-main>.main .hg-creator-page>.hg-creator-sorts,
  .hg-main>.main .hg-creator-page>.hg-card-grid,
  .hg-main>.main .hg-creator-page>.hg-post-list,
  .hg-main>.main .hg-creator-page>.hg-pager,
  .hg-main>.main .hg-post-detail>.hg-post-detail__related,
  .hg-main>.main .hg-web-detail>.hg-web-detail__related,
  .hg-main>.main .hg-web-play>.hg-web-play__related{
    box-sizing:border-box;width:100%;max-width:var(--hg-page-content-width);margin-inline:auto;
  }
  /* 普通列表的小节标题沿用行内字号与垂直间距，只覆盖其中写死的水平 margin。 */
  .hg-main>.main>.hg-list-page>h2{margin-inline:auto!important;}
  /* 仅列表正文直属横幅随内容列居中，卡片流与播放器内部广告继续沿用各自容器。 */
  .hg-main>.main>.hg-list-page>.hg-ssp-slot,
  .hg-main>.main .hg-channel-page>.hg-ssp-slot,
  .hg-page-topics .hg-main>.main .hg-topic-page>.hg-ssp-slot,
  .hg-main>.main .hg-topic-detail>.hg-ssp-slot,
  .hg-main>.main .hg-search-page>.hg-ssp-slot,
  .hg-main>.main .hg-community-page>.hg-ssp-slot,
  .hg-main>.main .hg-post-detail>.hg-ssp-slot,
  .hg-main>.main .hg-web-play>.hg-ssp-slot[data-ssp-format="banner"],
  .hg-main>.main .hg-web-detail>.hg-ssp-slot[data-ssp-format="banner"],
  .hg-main>.main .hg-homeway-panel>.hg-ssp-slot[data-ssp-format="banner"]{
    width:100%!important;max-width:var(--hg-independent-ad-max,calc(1100 * var(--hg-public-unit)))!important;margin-left:auto!important;margin-right:auto!important;}
}

/* 窄PC只压缩导航间距与品牌，不缩文字；搜索展开层覆盖导航右侧，不改变行宽。 */
@media (min-width:1024px) and (max-width:1399px){
  .hg-header__inner{--hg-header-logo-width:clamp(96px,8.75vw,120px);gap:8px;}
  .hg-topbar-nav{gap:0 2px;}
  .hg-topbar-nav__item{padding-inline:3px;}
  .hg-header__search{flex:0 0 36px;width:36px;min-width:36px;height:36px;z-index:42;}
  .hg-header__search .hg-search{position:absolute;top:0;right:0;width:36px;height:36px;box-sizing:border-box;padding:0;border:0;}
  .hg-header__search .hg-search input{flex:0 0 0;width:0;min-width:0;padding:0;opacity:0;pointer-events:none;}
  .hg-header__search:focus-within .hg-search{width:210px;padding-left:12px;background:#303034;box-shadow:0 0 0 4px rgba(16,16,20,.95);}
  .hg-header__search:focus-within .hg-search input{flex:1 1 auto;width:100%;opacity:1;pointer-events:auto;}
  .hg-header__auth{height:44px;}
  .hg-header .cyber-user__avatar,.hg-header .cyber-user__avatar img{width:40px;height:40px;border-radius:20px;}
  html.hg-logged #app-header .hg-header__auth::before{width:40px;height:40px;}
  button.hg-header__login.hg-header__login{height:36px;padding-inline:12px;}
}
/* 内容留白加宽后只收紧导航水平内距，保持14px文字及正常十二入口完整可见。 */
@media (min-width:1024px) and (max-width:1100px){.hg-topbar-nav__item{padding-inline:1.5px;}}
@media (min-width:1400px) and (max-width:1599px){.hg-topbar-nav__item{padding-inline:5.5px;}}
/* 额外长菜单允许横向滚动；锚点固定浮层脱离滚动裁切，吃瓜菜单仍完整展开。 */
@media (min-width:1024px){
  @supports (anchor-name:--hg-community-menu) and (left:anchor(center)){
    .hg-topbar-nav{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;}
    .hg-topbar-nav::-webkit-scrollbar{display:none;}
    .hg-topbar-drop{anchor-name:--hg-community-menu;}
    .hg-topbar-drop__menu{position:fixed;position-anchor:--hg-community-menu;top:anchor(bottom);left:anchor(center);}
  }
}

/* 字体保持可读下限，相应行盒承接完整文字，避免标题、角标和分页裁字。 */
@media (min-width:1024px){
  .hg-section-title h2{height:auto;min-height:calc(36 * var(--hg-text-unit));}
  .hg-card-grid .hg-drama-card__title{height:calc(38.63 * var(--hg-text-unit));}
  .hg-card-grid .hg-drama-card{--hg-tag-h:calc(24 * var(--hg-text-unit));}
  .hg-card-grid .hg-drama-card__tags{height:auto;min-height:calc(24 * var(--hg-text-unit));}
  .hg-drama-card__cover .hg-drama-card__badges .hg-drama-card__badge,
  .hg-card-grid .hg-drama-card__score,
  .hg-card-grid .hg-drama-card__views{height:calc(26 * var(--hg-text-unit));min-height:22px;}
  .hg-card-grid .hg-drama-card__episode{height:calc(27 * var(--hg-text-unit));min-height:23px;}
  .hg-pager__page,.hg-pager__arrow,.hg-pager__jump-btn,.hg-pager__jump-input,.hg-pager__input{height:max(28px,calc(32 * var(--hg-public-unit)));min-height:28px;}
  .hg-pager__page{min-width:max(28px,calc(32 * var(--hg-public-unit)));}
  .hg-footer__cols{grid-template-columns:repeat(3,minmax(max-content,1fr));width:auto;gap:clamp(24px,calc(96 * var(--hg-pc-unit)),96px);}
  .hg-footer__col{width:auto;min-width:calc(70 * var(--hg-text-unit));}
  .hg-header .hg-unread-badge{min-height:14px;min-width:14px;}
  .hg-faq .hg-faq__item summary,.hg-faq .hg-faq__item[open] summary{font-size:max(14px,calc(14 * var(--hg-text-unit)));line-height:max(20px,calc(21 * var(--hg-text-unit)));}
  .hg-faq .hg-faq__body p{font-size:max(14px,calc(13 * var(--hg-text-unit)));line-height:max(20px,calc(22 * var(--hg-text-unit)));}
  /* PC主视频卡题材文字与标题拉开层级，不改筛选标签、侧栏或弹窗。 */
  .hg-main>.main .hg-card-grid:not(:is(.hg-history-dialog__list,aside *,dialog *,[role="dialog"] *,.hg-web-play__side *,.hg-play__panel *,.hg-history-dialog *,.hg-search-suggest *))>.hg-drama-card .hg-tag{font-size:12px;line-height:18px;}
}