/*!
 * ww-overrides.css — ww 皮肤的 dx149 增量样式。
 *
 * 规则：**不改** web/static/web/css/ww/ 下从 wwsq 搬来的原文件（将来好逐字比对），
 * 所有本项目差异一律写在这里，并在 layouts/ww-home.tpl 里最后加载。
 */

/* 1) ww/index.css 里 .theme-bg 引的是 wwsq 站点根路径 /images/theme-bg.png，
      dx149 静态资源挂在 /static/web 下 → 这里修正路径（不动原文件）。 */
.theme-bg {
  background-image: url(/static/web/images/theme-bg.png);
}

/* 2) 登录弹层：wwsq 用 zui.js 的 $().modal('show') 控制显隐，本项目用原生 JS 加 .in，
      补上 zui 主题里缺的可见态。7/29 对齐线上实测：弹框顶到视口顶（无 10vh 顶距）、
      无整屏压暗遮罩（线上 .modal 背景透明、页面不变暗）、阴影 0 5px 15px。 */
.dx-modal.modal.in {
  display: block;
  opacity: 1;
}
.dx-modal.modal.in .modal-dialog {
  transform: translate(0, 0);
}
/* zui 的 .modal-dialog 背景走 --color-dialog-background，而 ww 主题(common.css)没有定义这个
   变量 → 弹层整个透明、字压在卡片上。这里用 ww 自己的色板补上（底色/圆角与线上实测一致）。 */
.dx-modal .modal-dialog {
  background-color: var(--dx-base1-color);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
/* 已删：.modal-content/.modal-header 的 padding/border 覆写是早期臆造值；
   线上实测 header = zui 默认 padding 15px + common.css 的 border-bottom 分隔线，
   content 无额外 padding，让底层样式直接生效。 */
body.modal-open {
  overflow: hidden;
}

/* 3) PC 搜索面板：ww/common.css 只写了 :hover 展开，本项目改成点击展开（.is-open）。 */
.pc-search-drop.is-open .pc-search-drop-content {
  pointer-events: auto;
  z-index: 20;
}
.pc-search-drop.is-open .pc-search-drop-content-box {
  transform: translateZ(0);
  opacity: 1;
}

/* 4) footer 地址行的复制按钮（cyber 皮肤是图标按钮，这里沿用 ww 的文字风格）。 */
.ww-footer-addr code {
  font-family: inherit;
}
.ww-addr-copy {
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  background: transparent;
  color: inherit;
}

/* 5) 首页 H1：内容与 cyber 皮肤同源(web_home_h1)，ww 版式里放在楼层下方做 SEO 文案。 */
.ww-home-h1 {
  font-size: 14px;
  font-weight: 400;
}

/* ── 精选合集卡：补 ww/common.css 里缺失的两条规则 ────────────────────────
   实测 wwsq 页面上这两个类是生效的（aspect-ratio: 329/186、fc-meta 为
   flex/12px/#999），但搬过来的 common.css 里没有对应规则——大概率是
   wwsq 侧还有一份未随本次一起搬运的样式来源。这里按实测到的计算值补齐。 */
.aspect-\[329\/186\] {
  aspect-ratio: 329 / 186;
}
.fc-meta {
  display: flex;
  align-items: center;
  color: #999;
}

/* ── 合集列表分类胶囊（wwsq 隐性布局缺陷修补）────────────────────────
   wwsq 的 md:flex-1 会把胶囊按条数均分：inline-flex 容器先按内容总和收缩，
   再均分给各 li。wwsq 的 tab 名恰好全是 4 字（热度优先/女王合集/热门合集），
   均分结果正好放得下；dx149 的分类名长短不一（SM、女王…），「热度优先」
   会被均分压窄折成两行。桌面档改回内容自适应宽（tab 名等长时视觉与 wwsq
   完全一致）；移动端保持 wwsq 的 w-full 均分行为不动。 */
@media (min-width: 768px) {
  .featured-collections-page nav[aria-label="排序方式"] li {
    flex: 0 0 auto;
  }
}

/* ── 帖子详情正文图（产品意见 7/28）──────────────────────────────────
   ① 图片间距：全局清掉 Quill 空段落(<p><br></p>)后连续图片会贴死，
      给正文图补上下边距（img 是替换元素，inline 状态下垂直 margin 也生效）。
   ② 占位图拉满：占位 SVG 原始 600×600，按 wwsq 的 width:auto 只渲染 600px
      → 右侧留缝。用属性选择器只对**未解密**的占位态拉满（解密后 src 变
      blob:，规则自动失效，真实图片回到原始宽度不被拉伸）。 */
.markdown-body img {
  margin: 12px 0;
}
.markdown-body img[src*="poster_loading"] {
  width: 100%;
  height: auto;
}

/* ── zui 按钮主色变量 ────────────────────────────────────────────────
   dx149 的 lib/zui.css 里 .btn-primary 走 var(--color-primary)，而 ww 主题
   (common.css)只定义了 --dx-primary-color（wwsq 那份 zui v1.4.1 用的是后者）。
   变量缺失 → 关注/发表评论等 .btn-primary 背景全透明。这里把两个变量对齐。 */
:root {
  /* ── 品牌主色（Figma DX-149 痴汉俱乐部，2026-7-29 换肤）────────────
     设计稿主视觉红 #BE3535 取代 wwsq 遗留的粉 #be3535；common.css 的
     --dx-primary-color 在此覆盖，全站 bg-primary/text-primary/swiper/按钮
     等所有引用一起翻。base16 是主色 10% 透明度衍生（标签胶囊底等）。 */
  --dx-primary-color: #be3535;
  --dx-base16-color: rgba(190, 53, 53, 0.1);
  --color-primary: var(--dx-primary-color, #be3535);
  /* zui .popover 背景变量（头像下拉菜单面板）；ww 主题未定义 → 透明，线上实测 #222 */
  --color-popover-bg: #222;
}

/* ── 直播回放角标背景图 ──────────────────────────────────────────────
   wwsq 用 bg-[url('../images/list-right-label.png')] 这个任意值原子类，
   但它在搬来的 common.css 里没有对应规则（实测 wwsq 页面上生效，说明其
   构建产物与这份 CSS 不完全一致）。这里按实测到的效果补一条等价规则，
   选择器用语义类名，避免依赖那个不存在的原子类。 */
.ww-live-badge,
.video-items .poster .absolute.left-0.top-0[class*="list-right-label"] {
  /* 7/29 换肤：原 list-right-label.png 是 wwsq 粉色切图，CSS 变量翻不动，
     改为品牌红纯 CSS 丝带（右端斜切对齐原图形状） */
  background-color: var(--dx-primary-color, #be3535);
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border-radius: 2px 0 0 2px;
}

/* ── 个人中心收藏子筛选 tab（dx149 增量，借 records 页的 dx-line-tabs 风格） ──
   profiles.css 里有 wwsq 档案页专用的 .dx-tab-item{flex:1}（配 tab-li 均分场景），
   与 records 风格 tab（li 自带 dx-tab-item）同页共存时会把子筛选均分成整行。
   wwsq 两者从不同页出现，属隐性冲突（同坑 #14 一类），这里按 records 页
   实测效果收窄回内容宽。 */
.ww-user-fav-tabs > .dx-line-tab-item.dx-tab-item {
  flex: 0 0 auto;
}
/* 同一冲突的第二处（7/29 用户截图发现）：profiles.css 把 .dx-tab-item::after 定义成
   top:0 的 1px 竖分隔线（wwsq 档案页 tab-li 场景用），压掉了 common.css 里
   .dx-line-tab-item::after 的 33px 底部下划线 → 激活线变成顶部小竖点、
   非激活 tab 还渗出一条白线。按 common.css 原义收回来。 */
.ww-user-fav-tabs > .dx-line-tab-item.dx-tab-item::after {
  width: 33px;
  top: auto;
  bottom: 0;
  background-color: transparent;
}
.ww-user-fav-tabs > .dx-line-tab-item.dx-tab-item.is-active::after {
  background-color: var(--dx-primary-color);
}

/* ── zui .btn 尺寸对齐 wwsq ─────────────────────────────────────────
   wwsq 的 zui v1.4.1 是 .btn{height:40px;padding:5px 12px}（实测 focus-user
   计算高度 40px / line-height 20px），dx149 搬的 zui 构建是 height:34px;
   padding:0 12px。差 6px 全皮肤按钮都能看出来（关注/取消关注/表单提交）。
   模板里 !h-8 之类的 important 原子类仍按原样生效。 */
.btn {
  height: 40px;
  padding: 5px 12px;
  line-height: 20px;
}

/* ── 表单输入框底色对齐 wwsq ────────────────────────────────────────
   wwsq 的 zui v1.4.1 有 .form-control{background:var(--dx-base2-color)}（#0f0f0f，
   登录框/档案表单的深色输入底），dx149 搬的 zui 构建没有这条 → 输入框透明。
   :not([class*="bg-"]) 是为了不压掉模板里显式带 bg-* 原子类的输入框
   （头部搜索框 bg-base6——wwsq 里 zui 先于 common.css 加载所以 bg-base6 能赢，
   本文件加载在最后，直接写 .form-control 会反过来压掉它）。 */
.form-control:not([class*="bg-"]) {
  background-color: var(--dx-base2-color, #0f0f0f);
}


/* ── 404 页下半区版式（dx149 增量美化，产品 7/29）─────────────────────
   wwsq 线上对 #content404 没有任何 CSS（裸排版：左对齐小字标题、白底裸输入框、
   fa 字体缺失导致的空搜索按钮）。插画原样保留但限宽，下半区按 ww 色板重排：
   居中、深色搜索框 + 主色搜索钮、分类改胶囊。 */
.content404-wrapper {
  padding: 8px 0 56px;
}
#content404 {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
#content404 .icon svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0 auto;
}
#content404 .msg h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 20px 0 10px;
}
#content404 .error-desc {
  color: #9a9a9a;
  margin-bottom: 28px;
}
#content404 .controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#content404 .return-home {
  min-width: 160px;
}
#content404 .search-box {
  width: 100%;
}
#content404 .search-box form {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
#content404 .search-form-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 4px 0 0 4px;
  background: var(--dx-base2-color, #0f0f0f);
  color: #fff;
  font-size: 13px;
  outline: none;
}
#content404 .search-form-input::placeholder {
  color: #666;
}
#content404 .search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  border: 0;
  border-radius: 0 4px 4px 0;
  background: var(--dx-primary-color, #be3535);
  color: #fff;
  cursor: pointer;
}
#content404 .hot-cats {
  margin-top: 40px;
}
#content404 .hot-cats p {
  color: #9a9a9a;
  font-size: 14px;
  margin-bottom: 14px;
}
#content404 .hot-cats ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#content404 .hot-cats a {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 9999px;
  background: var(--dx-base3-color, #222);
  color: #d2d2d2;
  text-decoration: none;
  transition: color .2s;
}
#content404 .hot-cats a:hover {
  color: var(--dx-primary-color, #be3535);
}

/* ── 页头登录胶囊（Figma DX-149 主站稿，7/29 换肤）───────────────────
   设计稿页头右侧是品牌红胶囊「登录/注册」+ 用户小图标，替代 wwsq 的纯文字
   登录/注册。登录态头像 popover 不变。 */
.ww-auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 0;
  border-radius: 9999px;
  background: var(--dx-primary-color, #be3535);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.ww-auth-pill:hover {
  opacity: .85;
}

/* ── 页头导航图标（Figma DX-149 主站稿，7/29 换肤）───────────────────
   每个导航项前的红黑手绘小图（位图素材 images/nav/ch-*.png，从设计稿逐个导出）。 */
.ww-nav-ico {
  /* 设计稿是 30×30；页头 h=85px 下按 24px 呈现（原 18px 用户反馈太小）。
     素材为 4x（120px）导出，高分屏下不糊。 */
  width: 24px;
  height: 24px;
  margin-right: 6px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ── 首页楼层标题图标（Figma DX-149 主站稿，7/29 换肤）───────────────
   楼层标题右侧的手绘小图（HOT火焰/星星书签/分类标签），替代原 #latest New 角标。
   设计稿里是 36×36，页面按 h2 字号配比取 32px（移动端 26px）。 */
.ww-floor-ico {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: 0 0 auto;
}
@media (min-width: 768px) {
  .ww-floor-ico { width: 32px; height: 32px; }
}

/* ── 首页热门标签行（Figma DX-149 主站稿，7/29 换肤）─────────────────
   设计稿实测：胶囊 h=29 / radius 22 / padding 4px 8px / gap 10 /
   底色 #BE3535@30% / 文字 15px #E85151（带 # 前缀）；两端各一个品牌红圆钮。
   原实现是 #252525 深灰胶囊 + 无箭头，与设计稿不符。 */
.ht-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ht-list {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
}
.ht-list::-webkit-scrollbar { display: none; }
.ht-list > li { flex: 0 0 auto; }
.ht-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  /* 设计稿胶囊是 fixed 100px + padding 4/8（文字 69px 居中）；这里 min-width 取 100px
     保证短标签与设计稿等宽，长标签靠 padding 自适应撑开。 */
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 22px;
  background: rgba(190, 53, 53, .3);
  color: #e85151;
  font-size: 15px;
  line-height: 21px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s;
}
.ht-chip:hover {
  background: rgba(190, 53, 53, .5);
  color: #fff;
}
.ht-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dx-primary-color, #be3535);
  color: #fff;
  cursor: pointer;
  transition: opacity .2s;
}
.ht-arrow:hover { opacity: .85; }
.ht-arrow svg { width: 16px; height: 16px; }
/* 设计稿两端圆钮是常显的（其 5 个标签并未溢出仍绘制箭头），这里保持常显；
   滚到端点/无溢出时降透明度做轻量反馈，不改变"箭头始终在位"的版式。 */
.ht-arrow.is-off { opacity: .35; cursor: default; }

/* ── 返回顶部按钮淡入淡出（7/29 用户反馈：display 硬切换不丝滑）──────────────
   common.css 的 .dx-backtop{display:none} 改为常驻布局 + opacity 过渡；
   显隐由 ww-shell.js 切 is-visible 类（>100px 淡入）。zui 的 [data-backtop]
   滚动隐藏处理器已通过移除该属性绕开（floatbar.tpl）。 */
.dx-backtop {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.dx-backtop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── 横幅广告位占位底色与占位板拼色（7/29 用户反馈：占位板两侧露灰边）──────
   common.css 的 img[data-src] 占位底是 #353535，而设计稿长条占位板
   (ad_loading_wide.svg) 底是 #222222——contain 缩放后两侧灰边割裂。
   底色对齐后整条槽位视觉连成一根通长的 #222222 横条（占位板"拉长"到满宽）。 */
.dx-banner-item img[data-src] {
  background: #222222;
}

/* ── 顶部站标完整显示（7/29 用户反馈：logo 右边被裁）────────────────────────
   头部 <picture> 盒子按 wwsq logo 比例定的（75×25 / lg 101×35 ≈ 2.89:1），
   dx149 的 logo.png 是 516×156 ≈ 3.31:1，被 object-fit:cover 填盒后横向溢出
   裁切——右缘「部」字笔刷被切掉。contain 完整收纳（宽向顶满、高向居中留白）。 */
.app-logo {
  object-fit: contain;
}

/* ── 法务/静态单页（/faq /dmca /terms /privacy /2257 /content-removal）─────────
   ww 皮肤没有对应的 wwsq 原型页（wwsq 这些页走的是另一套外壳），这里给 bodyHTML
   （后台 sq_setting 录入的富文本）一套可读排版：限宽、标题层级、段距、列表与表格。 */
.ww-legal { max-width: 900px; margin: 0 auto; padding: 24px 16px 56px; color: #d8d8d8; }
.ww-legal__title { margin: 0 0 20px; font-size: 22px; line-height: 1.4; font-weight: 600; color: #fff; }
.ww-legal__body { font-size: 14px; line-height: 1.9; word-break: break-word; }
.ww-legal__body h1, .ww-legal__body h2, .ww-legal__body h3 { margin: 28px 0 12px; color: #fff; line-height: 1.5; }
.ww-legal__body h1 { font-size: 20px; }
.ww-legal__body h2 { font-size: 17px; }
.ww-legal__body h3 { font-size: 15px; }
.ww-legal__body p { margin: 0 0 14px; }
.ww-legal__body ul, .ww-legal__body ol { margin: 0 0 14px; padding-left: 22px; }
.ww-legal__body li { margin: 6px 0; }
.ww-legal__body a { color: #BE3535; text-decoration: underline; }
.ww-legal__body strong, .ww-legal__body b { color: #fff; }
.ww-legal__body table { width: 100%; border-collapse: collapse; margin: 0 0 16px; display: block; overflow-x: auto; }
.ww-legal__body th, .ww-legal__body td { border: 1px solid #333; padding: 8px 10px; text-align: left; }
.ww-legal__body img { max-width: 100%; height: auto; }
@media (min-width: 768px) {
  .ww-legal { padding: 32px 20px 72px; }
  .ww-legal__title { font-size: 26px; }
  .ww-legal__body { font-size: 15px; }
}

/* ── 顶部站标尺寸（7/29 产品调整）───────────────────────────────────────
   ⚠️ 不能用 w-[152px] 这类自拟 Tailwind 原子类：ww 的 CSS 是预编译产物，只含 wwsq
   源码里真实用过的类，自拟的规则不存在 → <picture> 失去尺寸约束被撑大（坑 #1）。

   尺寸口径按设计图的**相对比例**定，而不是照抄它的绝对像素：
   设计图里 logo 高 ≈ 顶栏高的 60%（logo 66 / 顶栏 110）。dx149 的 H5 顶栏只有 60px，
   若直接照搬 213×66 会比整条顶栏还高、溢出显得巨大（7/29 实测 64 > 60）。
   故按比例取 H5 logo 高 ≈ 36px（60px 的 60%）→ 宽 = 36 × 3.31 ≈ 119。

   只给宽度 + aspect-ratio（logo.png 516×156），高度由浏览器按比例算，永不变形。
   窄屏再用 min(...,34vw) 收缩，避免挤到汉堡/搜索图标。 */
.app-logo-box {
  display: block;
  width: min(119px, 34vw);
  aspect-ratio: 516 / 156;
  height: auto;
}
@media (min-width: 1024px) {
  /* 桌面顶栏更高(约 76px)，可放到 150 宽 ≈ 45 高，同样约占 60% */
  .app-logo-box { width: 150px; }
}
/* 只作用于顶栏站标：.app-logo 类名被 wwsq 的抽屉头像/页脚徽标复用（ww-shell.js
   注入的 <img class="app-logo … w-[40px] h-[40px]">），全局 100% 会把 40px 头像
   撑到父容器大小（BUG #39319 实测 76×76）。 */
.app-logo-box .app-logo { width: 100%; height: 100%; object-fit: contain; }

/* ── iOS 输入框聚焦自动放大（BUG #39318 / #40173）────────────────────────
   iOS Safari 对字号 <16px 的输入控件聚焦时自动放大页面；ww 的表单控件是 13px
   （wwsq 线上同款，它自己也有这毛病）。viewport 不加 maximum-scale=1（会禁掉
   安卓 pinch 缩放），改用 iOS 专属探测（-webkit-touch-callout 只有 iOS 实现）
   把移动端输入控件提到 16px——安卓/桌面视觉与 wwsq 保持一致。
   !important 必须带：评论框等控件挂着 text-sm/text-[14px] 原子字号类
   （类选择器 0-1-0 压过这里的裸元素选择器 0-0-1，40173 就是这么漏的），
   本块已被 iOS+移动端双重条件圈死，提权只影响该场景。 */
@media (max-width: 767px) {
  @supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="email"],
    textarea,
    select,
    .form-control {
      font-size: 16px !important;
    }
  }
}

/* ── 帖子正文视频挂载点（BUG：社区详情页无视频展示）──────────────────────
   RewritePostContentVideo 把 Quill 视频块改写成 .post-video-player，由
   pages/ww-post-detail.js 挂 xgplayer。create_player 的默认宽高是 100%×100%，
   挂载盒自己必须有尺寸（原始 ql-video 块无任何尺寸类）——16:9 比例盒 +
   min-height 兜底（老安卓不认 aspect-ratio 时保证播放器可见可点）。 */
.markdown-body .post-video-player {
  width: 100%;
  min-height: 210px;
  aspect-ratio: 16 / 9;
  background: #000;
  margin: 12px 0;
}
@media (min-width: 768px) {
  .markdown-body .post-video-player { min-height: 360px; }
}

/* ── 首页 H1 / 楼层标题字号（运营 SEO 验收 8/12 一1️⃣）────────────────────
   验收要求「h1 字体调小；h2 字体调小，且比 h1 小」。
   改前实测（验收站 dx149-web，桌面与移动一致，无断点差异）：H1 32px、楼层标题 24px。
   改后：H1 26px、楼层标题 20px —— 两者都变小，且保持 h1 > h2 的层级。

   ⚠️ 定值必须实测，不能按 Tailwind 默认刻度推：ww 的 CSS 是 wwsq 的 Tailwind 预编译
   产物，**刻度被重新标定过** —— text-xl=16px、text-2xl=18px、text-3xl=20px、
   text-4xl=22px，而 text-5xl / text-6xl 在产物里根本不存在（用了等于没写，元素退回
   继承字号）。原来那串 `text-2xl md:text-5xl` 里的 md:text-5xl 就是个空类。
   同理不能自拟 text-[26px]（坑 #1：产物里没有的类不会生效），尺寸只能写在这里。

   作用域只到首页：其它页 H1 仍是原类串，验收未要求改（坑 #19：尺寸覆写一律挂具体类，
   不写全局 h1/h2 规则）。.ww-home-floor-title 也用在底部「精品推荐/友情链接」两块的
   div 标题上 —— 那两处不是 h 标签，但视觉上就是楼层标题，跟着一起收才不突兀。
   不加断点：原设计在两个断点就是同一尺寸，保持一致。 */
.ww-home-h1 { font-size: 26px; line-height: 1.35; }
.ww-home-floor-title { font-size: 20px; line-height: 1.35; }

/* ── 吃瓜详情：标题与正文标题层级（运营 SEO 验收 8/12 六1️⃣）──────────────────
   要求「标题 24 号，h1 22 号，h3 20 号」。实测改前：页面主标题 32px、正文 h2 24px、
   正文 h3 18.72px（正文里的 h 标签吃的是浏览器默认 em 值，层级看不出来）。
   改后：主标题 24px，正文 h1 22 / h2 21 / h3 20，形成单调递减。
   h2 取 21px 落在 22 与 20 之间（验收只给了 h1/h3 两个值）。

   主标题走语义类 .ww-post-title 而不是改原子类：它原本挂 `text-xl md:text-2xl`，
   在本产物里算出来是 16/18px，与验收站实测的 32px 对不上（两边 cascade 有差异），
   与其赌哪条规则赢，不如给个专属类钉死。ww-overrides.css 在 head 里排最后，
   与 .text-xl 同为 0-1-0 时按源码顺序取胜，无需 !important。 */
.ww-post-title { font-size: 24px; line-height: 1.4; }
.markdown-body h1 { font-size: 22px; line-height: 1.4; font-weight: 600; margin: 16px 0 8px; }
.markdown-body h2 { font-size: 21px; line-height: 1.4; font-weight: 600; margin: 14px 0 8px; }
.markdown-body h3 { font-size: 20px; line-height: 1.4; font-weight: 600; margin: 12px 0 6px; }

/* ── 列表页顶部区域观感（8/13）────────────────────────────────────────────────

   ① 吸顶条底色
   ww 的 CSS 里 .bg-black 被重定义过两次：Tailwind 原版的纯黑，以及后面一条
   `background-color: var(--dx-main-bg-color)`。实际生效的是纯黑那条，于是所有
   吸顶条在 #181818 的页面上压出一条黑带（吃瓜分类页 tab 行最明显）。
   按 ww 自己那条规则表达的意图，吸顶条底色应当等于页面主色 —— 它的职责是
   吸顶时遮住下方滚动内容，不是画一条装饰色带。
   不直接改 .bg-black：同一个类还用在视频时长角标上，那里必须是纯黑。
   故模板给吸顶条加 .ww-stickbar 语义类，只改这一类元素。

   ② 面包屑顶部留白
   8/12 把面包屑移到 H1 之上后，无广告投放的页面上它成了 <main> 的首个元素、
   直接贴在顶栏下沿（实测间距 0px）。有广告时 ads-top 会自然垫开，所以只在
   「面包屑就是首元素」这一种情况补留白 —— 用 :first-child 命中，有广告时不生效，
   不会双重间距。标签页此前是在模板里手工包 pt-3 的（ww-tag-detail），
   这条规则覆盖全部列表页，新页面不用再各自记得包一层。 */
.ww-stickbar { background-color: var(--dx-main-bg-color); }

main > .dx-breadcrumbs:first-child { margin-top: 12px; }
@media (min-width: 768px) {
  main > .dx-breadcrumbs:first-child { margin-top: 20px; }
}

/* ── .dx-container 在 1280~1367px 视口下左贴边 + 右溢出（8/13）──────────────
   ww 的 common.css 里：
     基础规则           .dx-container{margin:auto; padding:0 12px}     ← 居中带边距
     @media ≥1280px     .dx-container{width:1367px; padding:0}         ← 定宽、去边距
   断点是 1280 但宽度给了 1367 —— 视口落在这 87px 区间内时，容器比视口还宽，
   于是内容左边贴死视口边缘、右边溢出（实测 1280 视口：left=0, 右溢出 87px）。
   这是 wwsq 自带的缺陷，笔记本常见的 1280/1366 分辨率正好全中。

   修法：保留它 1367px 的设计宽度，但封顶到视口并留 24px 边距。
   宽屏（≥1415px）下结果与 wwsq 完全一致（1367 居中），只在会溢出的区间生效。
   边距取 24 而不是基础规则的 12：12px 在 1280 这类桌面宽度上视觉几乎贴边，
   而这个区间正是笔记本主力分辨率。
   width 先写死值再写 min()：老浏览器不认 min() 会忽略后一行、退回原行为，不会塌成 0。 */
@media (min-width: 1280px) {
  .dx-container {
    width: 1367px;
    width: min(1367px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── body 的 100vw 造成全站横向滚动条（8/13）──────────────────────────────
   ww 的 common.css 里 body{width:100vw}。100vw **包含纵向滚动条的宽度**，
   而可用区是 clientWidth（已扣掉滚动条），于是只要页面能纵向滚动，body 就比
   可用区宽约 10px → 每个页面都能左右拖动一点，内容整体也被推得更贴左。
   改成 100%：body 是 position:absolute，百分比按 html 宽度算（已扣滚动条），
   视觉宽度与原来一致，只是不再溢出。 */
body { width: 100%; }

/* ── 帖子置顶角标（社区列表 / 首页吃瓜楼层）────────────────────────────────
   后台 sq_post.top>0 的帖会排到列表最前；角标让运营能在前台一眼认出。
   挂在 .post-item-poster 左上，盖过遮罩文字。 */
.post-item-poster { position: relative; }
.ww-post-pin {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  background: #c0392b;
  border-radius: 2px;
  pointer-events: none;
}

/* ── /drama/ 短剧列表：对照 DX150 /ai-duanju/ 列表页 ─────────────────────────
   1) 内容区脱离 ww 的 1367 定宽，改用 DX150 同款 page-gutter（宽屏约 96px），
      否则 4 列卡片只有 ~320px 宽，比 150 全宽列表明显偏小。
   2) 封面 object-fit:cover 铺满 9:12 框（150 竖海报用 contain 也能撑满；
      本站横图用 contain 会缩成邮票）。 */
@media (min-width: 1280px) {
  .ww-drama-main.dx-container {
    width: 100%;
    max-width: none;
    padding-left: 96px;
    padding-right: 96px;
    box-sizing: border-box;
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .ww-drama-main.dx-container {
    width: 100%;
    max-width: none;
    padding-left: clamp(24px, 5vw, 96px);
    padding-right: clamp(24px, 5vw, 96px);
    box-sizing: border-box;
  }
}
.hg-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 1280px) {
  .hg-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hg-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hg-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
  }
}
.hg-card-grid .hg-drama-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  min-width: 0;
  transition: none;
}
.hg-card-grid .hg-drama-card:hover { transform: none; }
/* 剧集/短剧列表卡：横版封面，对齐 /videos/ 列表 aspect-w-16 aspect-h-9（约 16:9） */
.hg-drama-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dx-base2-color, #1a1a1a);
}
.hg-drama-card__cover img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
}
.hg-drama-card__badge {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(99deg, #dfa048 1.5%, #ffe166 98.5%);
  color: #0d0d0d;
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  pointer-events: none;
}
.hg-drama-card__score {
  position: absolute;
  right: 8px;
  top: 8px;
  left: auto;
  bottom: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #ff9f2e;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: .02em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.hg-drama-card__score-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: inherit;
  display: block;
}
.hg-drama-card__episode {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 1rem);
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.hg-card-grid .hg-drama-card__body {
  padding: 10px 0 0;
}
.hg-drama-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-drama-card__title a {
  color: inherit;
  text-decoration: none;
}
.hg-card-grid .hg-drama-card:hover .hg-drama-card__title {
  color: var(--color-primary, #ff8c2f);
}
.hg-drama-card__desc {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: rgba(255, 255, 255, .6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hg-drama-card__meta {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, .45);
}
.hg-drama-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding-top: 0;
  max-height: 26px;
  overflow: hidden;
}
.hg-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.hg-tag:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}
@media (max-width: 1023px) {
  .hg-card-grid .hg-drama-card__cover { border-radius: 10px; }
  .hg-card-grid .hg-drama-card__body { padding: 8px 0 0; }
  .hg-drama-card__title { font-size: 14px; line-height: 20px; }
  .hg-drama-card__desc { font-size: 12px; line-height: 16px; }
  .hg-drama-card__badge {
    left: 6px;
    top: 6px;
    padding: 2px 6px;
    font-size: 10px;
    line-height: 14px;
  }
  .hg-drama-card__score {
    right: 6px;
    top: 6px;
    left: auto;
    padding: 1px 6px 1px 5px;
    font-size: 11px;
    line-height: 18px;
  }
  .hg-drama-card__score-icon {
    width: 11px;
    height: 11px;
  }
  .hg-drama-card__episode {
    right: 6px;
    bottom: 6px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 11px;
    line-height: 18px;
  }
  .hg-drama-card__tags { margin-top: 6px; gap: 4px; max-height: 22px; }
  .hg-tag { padding: 2px 6px; font-size: 10px; line-height: 15px; }
}

/* ── 短剧介绍页 /detail/：对照 DX150 hg-video-detail ────────────────────────
   ww/common.css 有全局 img{width:100%;height:100%}，必须用更高特异度+固定盒
   把海报/头像钉死，否则横海报被冲掉比例、选集格/按钮也被冲掉。 */
.hg-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, .6);
}
.hg-breadcrumb a,
.hg-breadcrumb__sep { color: rgba(255, 255, 255, .6); text-decoration: none !important; }
.hg-breadcrumb a:hover { color: var(--color-primary, #be3535); }
.hg-breadcrumb__current { color: var(--color-primary, #be3535); }

.hg-web-detail { padding: 8px 0 48px; box-sizing: border-box; }
.hg-web-detail__hero,
.hg-web-detail__episodes {
  display: flex;
  flex-direction: row;
  padding: 32px;
  border-radius: 20px;
  background: #161616;
  margin-top: 16px;
  box-sizing: border-box;
}
.hg-web-detail__hero {
  gap: 28px;
  align-items: flex-start;
}
.hg-web-detail__hero > .hg-web-detail__poster { align-self: flex-start; }
.hg-web-detail__poster {
  position: relative;
  width: 320px;
  aspect-ratio: 16 / 9;
  height: auto;
  flex: 0 0 320px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--dx-base2-color, #1a1a1a);
}
.hg-web-detail__poster img,
.hg-web-detail__poster-img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  border-radius: 12px;
  display: block;
  pointer-events: auto;
  background: var(--dx-base2-color, #1a1a1a);
}
.hg-web-detail__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  height: 19px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--color-primary, #be3535);
  color: #111;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}
.hg-web-detail__episode {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  height: 19px;
  padding: 0 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.hg-web-detail__info { flex: 1; min-width: 0; }
.hg-web-detail__author,
.hg-web-detail__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hg-web-detail__author img,
.hg-web-detail__avatar {
  width: 34px !important;
  height: 34px !important;
  max-width: none !important;
  border-radius: 999px;
  object-fit: cover !important;
  pointer-events: auto;
  flex-shrink: 0;
}
.hg-web-detail__author strong {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.hg-web-detail__author strong a {
  color: inherit;
  text-decoration: none !important;
}
.hg-web-detail__author .hg-web-detail__follow {
  flex: none;
  width: auto !important;
  height: 26px !important;
  padding: 0 14px;
  border: 1px solid var(--color-primary, #be3535);
  border-radius: 999px;
  background: var(--color-primary, #be3535);
  background-color: var(--color-primary, #be3535);
  color: #111;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hg-web-detail__author .hg-web-detail__follow.is-followed {
  background-color: transparent;
  color: var(--color-primary, #be3535);
}
.hg-web-detail__info h1 {
  margin: 0 0 12px !important;
  font-size: 36px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #fff;
}
.hg-web-detail__meta {
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .65);
  font-size: 14px;
}
.hg-web-detail__section-title {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 24px;
  font-weight: 600 !important;
  color: #fff;
}
.hg-web-detail__desc-wrap { position: relative; margin: 0 0 16px; }
.hg-web-detail__desc-wrap .hg-web-detail__desc { margin: 0; }
.hg-web-detail__desc {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.6;
}
.hg-web-detail__desc.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hg-web-detail__desc.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.hg-web-detail__expand {
  border: 0;
  background: transparent;
  color: var(--color-primary, #be3535);
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  font-size: 14px;
  width: auto !important;
  height: auto !important;
}
.hg-web-detail__expand[hidden] { display: none; }
.hg-web-detail__desc-wrap.is-collapsed .hg-web-detail__expand {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0 0 0 30px;
  font-size: 14px;
  line-height: 1.6;
  background: linear-gradient(90deg, rgba(22, 22, 22, 0) 0, #161616 26px, #161616 100%);
}
.hg-web-detail__desc-wrap:not(.is-collapsed) .hg-web-detail__expand { margin: 4px 0 0; }
.hg-web-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.hg-web-detail__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.hg-web-detail__play,
.hg-web-detail__share {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  height: 52px !important;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
  box-sizing: border-box;
  flex-direction: row !important;
  padding: 0 26px;
}
.hg-web-detail__play {
  background: var(--color-primary, #be3535);
  color: #111 !important;
}
.hg-web-detail__play.is-disabled,
.hg-web-detail__play[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.hg-web-detail__share {
  padding: 0 22px;
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .18);
}
.hg-web-detail__episodes {
  flex-direction: column;
  gap: 18px;
}
.hg-web-detail__ep-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.hg-web-detail__ep-head > div { min-width: 0; }
.hg-web-detail__ep-title {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-web-detail__ep-head p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
}
.hg-web-detail__ep-tip {
  color: var(--color-primary, #be3535);
  font-size: 13px;
  white-space: nowrap;
}
.hg-web-detail__ep-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 10px;
}
.hg-web-detail__ep-grid a {
  display: flex !important;
  flex-direction: row !important;
  height: 44px !important;
  width: auto !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  color: #fff !important;
  font-size: 14px;
  text-decoration: none !important;
  border: 0;
  box-shadow: none;
  padding: 0;
  box-sizing: border-box;
}
.hg-web-detail__ep-grid a.is-active,
.hg-web-detail__ep-grid a:hover {
  background: var(--color-primary, #be3535);
  color: #111 !important;
  font-weight: 600;
}
.hg-web-detail__ep-grid a.is-locked {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
.hg-web-detail__related { margin-top: 36px; }
.hg-web-detail__related h2 {
  margin: 0 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #fff;
}
/* 介绍页相关卡封面也要压过全局 img{100%} */
.hg-web-detail .hg-drama-card__cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  pointer-events: auto;
}
@media (max-width: 1023px) {
  .hg-web-detail { padding: 4px 0 32px; }
  .hg-web-detail__hero {
    flex-direction: column;
    padding: 20px;
    gap: 16px;
  }
  .hg-web-detail__poster {
    width: 100%;
    flex: none;
  }
  .hg-web-detail__episodes { padding: 20px; }
  .hg-web-detail__info h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
  }
  .hg-web-detail__section-title {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }
  .hg-web-detail__ep-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .hg-web-detail__play,
  .hg-web-detail__share { height: 44px !important; font-size: 14px; }
  .hg-web-detail__related h2 { font-size: 20px !important; }
}

/* ── 短剧播放页：对照 DX150 hg-web-play（左播放器 + 右 380px 选集） ───────── */
.hg-web-play__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  margin-top: 16px;
  align-items: start;
}
.hg-web-play__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.hg-web-play__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: rgba(255, 255, 255, .95);
}
.hg-web-play__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.hg-web-play__viewport .player-container,
.hg-web-play__viewport #mse,
.hg-web-play__viewport .xgplayer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
.hg-web-play__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hg-web-play__action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #22222a;
  background: #161616;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.hg-web-play__action[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}
.hg-web-play__action:hover {
  border-color: rgba(190, 53, 53, .45);
  color: var(--color-primary, #be3535);
}
.hg-web-play__like-icon {
  color: #fff;
  stroke: currentColor;
  fill: none;
  flex: none;
}
.hg-web-play__collect-icon {
  color: #fff;
  fill: currentColor;
  stroke: none;
  flex: none;
}
.hg-web-play__desc {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #161616;
}
.hg-web-play__desc > h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.hg-web-play__desc > p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .72);
  white-space: pre-wrap;
  word-break: break-word;
}
.hg-web-play__side {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #161616;
  padding: 20px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (min-width: 1200px) {
  .hg-web-play__side:not(.is-single) {
    /* 右侧贴齐播放器高度：标题+16:9 视口；集数多时内部滚动 */
    position: sticky;
    top: 96px;
    height: calc(22px * 1.3 + 16px + ((min(1200px, 100vw) - 64px - 380px - 24px) * 9 / 16));
    max-height: calc(100vh - 120px);
  }
}
.hg-web-play__side.is-single {
  max-height: none;
  align-self: start;
}
.hg-web-play__side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.hg-web-play__side-head > div { min-width: 0; }
.hg-web-play__side-title {
  margin: 0;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hg-web-play__side-head p {
  margin: 6px 0 0;
  font-size: 12px;
  color: #8a8a93;
}
.hg-web-play__side-current {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary, #be3535);
  white-space: nowrap;
  flex: none;
}
.hg-web-play__side-rule {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hg-web-play__ep-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}
.hg-web-play__ep {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 40px !important;
  width: auto !important;
  border-radius: 8px;
  border: 1px solid #22222a;
  background: #1d1d1e;
  color: #8a8a93 !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
}
.hg-web-play__ep.is-active,
.hg-web-play__ep:hover {
  background: var(--color-primary, #be3535);
  border-color: var(--color-primary, #be3535);
  color: #fff !important;
  font-weight: 700;
}
.hg-web-play__ep.is-locked {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .hg-web-play__main {
    grid-template-columns: 1fr;
  }
  .hg-web-play__side {
    min-height: 0;
    max-height: none;
    position: static;
  }
}
@media (max-width: 1023px) {
  .hg-web-play__viewport { aspect-ratio: 16 / 9; }
  .hg-web-play__title { font-size: 18px; }
  .hg-web-play__action {
    flex: 1 1 calc(50% - 6px);
    min-height: 44px;
  }
}

.hg-web-play { padding: 8px 0 48px; }
.hg-web-play__related { margin-top: 32px; }
.hg-web-play__related h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

/* 观看记录：勾选后再清除 */
.records-item {
  position: relative;
}
.records-pick {
  display: none;
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 4;
  width: 22px;
  height: 22px;
  margin: 0;
  cursor: pointer;
}
body.is-records-editing .records-pick {
  display: block;
}
.records-pick input {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.records-pick__box {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .35);
  box-sizing: border-box;
  pointer-events: none;
}
.records-pick input:checked + .records-pick__box {
  border-color: var(--color-primary, #be3535);
  background: var(--color-primary, #be3535);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2' d='M3.5 8.2l3 3 6-6.4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
body.is-records-editing .records-item.is-checked .poster,
body.is-records-editing .records-item.is-checked .post-item,
body.is-records-editing .records-item.is-checked > a {
  outline: 2px solid var(--color-primary, #be3535);
  outline-offset: 0;
}
.records-edit-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  margin: 16px -4px 0;
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.records-edit-bar[hidden] {
  display: none !important;
}
.records-edit-bar__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ddd;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.records-edit-bar__count {
  color: rgba(255, 255, 255, .55);
  font-size: 13px;
}
.records-confirm-delete {
  margin-left: auto;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: var(--color-primary, #be3535);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.records-confirm-delete:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (max-width: 1023px) {
  .records-pick,
  .records-pick input {
    width: 20px;
    height: 20px;
  }
  .records-edit-bar {
    gap: 10px;
    padding: 10px 12px;
  }
}

/* 点赞/收藏高亮：专用 data-on，压过播放页 .hg-web-play__action / 图标的 color:#fff，
   以及详情页 Tailwind text-[#6a7282]。on 态用品牌红 + 实心填充，别只换描边。 */
button.video-like[data-on="true"],
button.video-collect[data-on="true"] {
  color: var(--dx-primary-color, #be3535);
}
button.video-like[data-on="true"] .svg-icon,
button.video-collect[data-on="true"] .svg-icon {
  color: inherit;
  fill: currentColor;
}
.hg-web-play__action.video-like[data-on="true"],
.hg-web-play__action.video-collect[data-on="true"] {
  color: var(--dx-primary-color, #be3535);
  border-color: rgba(190, 53, 53, .55);
}
.hg-web-play__action.video-like[data-on="true"] .hg-web-play__like-icon,
.hg-web-play__action.video-collect[data-on="true"] .hg-web-play__collect-icon {
  color: var(--dx-primary-color, #be3535);
}
.hg-web-play__action.video-like[data-on="true"] .hg-web-play__like-icon {
  fill: currentColor;
  stroke: currentColor;
}

/* 分享条默认 hidden；仅复制失败时用 is-open 展开，让用户能手抄。 */
.share-container.is-open {
  display: flex !important;
}