@charset "utf-8";
/* ============================================================================
* 自定义配色 / 字体覆盖文件
* 放置位置：template/default/asset/css/my-theme.css
* 引入位置：html/public/include.html 和 html/user/include.html
* 要放在 public-head-main.css 之后，否则不生效
*
* ★ 改完记得把引入标签的 ?v=1 版本号 +1，否则浏览器/CDN 用旧缓存
* ★ 深色模式下看站，就改【第二块 .bstem】；改上面那块不会有反应
* ==========================================================================*/
/* ############################################################################
*
* ★★★ 本站已定制的值 ★★★
* （我以后再发这个文件都会带上这一段，不会再像上次那样把你的改动冲掉）
*
* ──────────────────────────────────────────────────────────────────────
* 位置 项目 当前值
* ──────────────────────────────────────────────────────────────────────
* 手机端搜索框收窄 --search-width 70% ← 不是 55%
* ☰ 三条横线水平位置 --menu-shift 10px
* 右上角「最新」按钮/弹窗 整段隐藏 已隐藏（无注释）
* ☰ 侧边菜单「直播」 隐藏 已隐藏
* ☰ 侧边菜单「留言」 隐藏 已隐藏
* ☰ 侧边菜单「最新」 保留 保留（注释状态）
* 板块标题「最新」两个字 隐藏 已隐藏
* 悬浮球默认落点 .extra-fab bottom 16px（见文件最末一段）
* 首页手机端背景图 改用 webp 435KB → 9KB
* 电脑端页脚背景图 改用 webp 266KB → 10KB
* 电脑端(PC)布局修正 见文件最末「PC 端修正」整块
* 播放页来源滚动条 文案已换成自己的（见 my_play_tip.html）
* 首页影片网格（手机） 照抄「更多」页：3 列 / gap 10px 8px / 片名 14px
* 竖版封面比例 5/6 → 120%（官方 20/29 → 145%，太高）
* 分类页「共有 N 个影片」 已隐藏
* 详情页「暂无评分」星星块 已隐藏
* 首页「最近更新(N)」角标 已隐藏
* ──────────────────────────────────────────────────────────────────────
*
* 说明：文件里第 148 行那一段「上传 PNG logo 后图片超大」的修复，
* 现在其实用不上了 —— 顶栏的图片 logo 已经换成
* module/my_site_title.html（网站名称文字）。
* 留着不影响任何东西，万一以后想换回图片 logo 还能直接用，所以没删。
*
* ##########################################################################*/
/* ===========================================================================
* 【第一块】亮色模式 —— body 没有 bstem class 时生效
* 如果你后台已经设成「默认黑色」且关闭了切换按钮，这一块可以整个不管
* ==========================================================================*/
:root {
/* ---------- 背景 ---------- */
--tpl-bg-base: #ffffff; /* 整站最底层背景 */
--tpl-bg-muted: #f9f9f9; /* 卡片/区块/输入框背景 */
--tpl-bg-login: #ffffff; /* 登录注册弹窗背景 */
/* ---------- 文字 ---------- */
--tpl-text: #333333; /* 正文默认字色 */
--tpl-text-strong: #111111; /* 标题/片名 */
--tpl-text-muted: #666666; /* 次要文字：年份、地区、简介 */
--tpl-text-subtle: #999999; /* 最弱文字：时间戳、占位符 */
--tpl-social-name: #576b95; /* 用户名/昵称 */
/* ---------- 主色 ---------- */
--tpl-accent: #40cc92; /* 主色：按钮、选中态、高亮 */
--tpl-accent-hover: #36b67e; /* 主色悬停（比主色压暗 10~15%） */
--tpl-accent-muted: rgba(64,204,146,.24); /* 主色半透明底 */
/* ---------- 边框 ---------- */
--tpl-border: #e5e5e5; /* 主分割线、输入框描边 */
--tpl-border-soft: #eeeeee; /* 弱分割线 */
}
/* ===========================================================================
* 【第二块】深色模式 —— body 有 bstem class 时生效 ★ 你主要改这里
*
* 下面给的是「深色紧凑」的一套起手值：
* 底色比官方默认更沉一点，卡片层次拉开，弱分割线压暗（深色模式最影响观感）
* 你把颜色换成自己想要的即可，结构不用动
* ==========================================================================*/
.bstem,
body.bstem {
/* ---------- 背景（三层，从深到浅：底 → 卡片 → 浮层） ---------- */
--tpl-bg-base: #0f0f13; /* 整站底色。官方默认 #16151b，这里更沉 */
--tpl-bg-muted: #1a1a20; /* 卡片/区块背景。要比底色亮一点，否则卡片"糊"在背景里 */
--tpl-bg-login: #22222b; /* 弹窗背景。再亮一档 */
/* ---------- 文字（三级对比，别都用同一个亮度） ---------- */
--tpl-text: #d6d6db; /* 正文。不要用纯白 #fff，深色底上刺眼 */
--tpl-text-strong: #f2f3f5; /* 标题/片名。最亮的一级 */
--tpl-text-muted: #8e8e96; /* 次要文字 */
--tpl-text-subtle: #6b6b73; /* 最弱文字 */
--tpl-social-name: #91a8cc; /* 用户名 */
/* ---------- 主色 ---------- */
/* 换主色只需改这 3 行。举例：
蓝 #3b82f6 / hover #2f6fd0 / muted rgba(59,130,246,.22)
橙 #ff7a45 / hover #e56733 / muted rgba(255,122,69,.22)
紫 #a855f7 / hover #9040d8 / muted rgba(168,85,247,.22)
红 #ef4444 / hover #d23a3a / muted rgba(239,68,68,.22) */
--tpl-accent: #40cc92;
--tpl-accent-hover: #36b67e;
--tpl-accent-muted: rgba(64,204,146,.22);
/* ---------- 边框 ---------- */
--tpl-border: #33333c; /* 官方默认 #d8d8d8 在深色下太亮，建议压暗 */
--tpl-border-soft: #24242c; /* 弱分割线。深色模式观感好坏主要看它 */
}
/* ===========================================================================
* 【第三块】紧凑度 —— 字号与行高（亮/深色共用，写在 :root 即可）
*
* 想更紧凑：优先减行高，别急着缩字号。
* 行高比字号更影响"密度感"，字缩小了反而伤可读性。
* ==========================================================================*/
:root {
--tpl-font-heading: 14px; /* 标题字号（片名、区块标题） */
--tpl-line-heading: 18px; /* 标题行高。官方 20px，这里收 2px */
--tpl-font-body: 12px; /* 正文字号 */
--tpl-line-body: 16px; /* 正文行高。官方 18px，这里收 2px */
}
/* ===========================================================================
* 【第四块】圆角 —— 想要方正紧凑观感就调小
* ==========================================================================*/
:root {
--tpl-radius: 8px; /* 搜索框、按钮。官方 25px（胶囊形），8px 更方正 */
--tpl-radius-cover: 4px; /* 封面图圆角 */
--tpl-radius-nav-bottom: 4px; /* 底部导航圆角 */
}
/* ===========================================================================
* 【第五块】封面比例 —— ⚠️ ratio 和 pad 必须一起改
*
* pad = 高 ÷ 宽 × 100%
* 只改一个会导致封面变形或上下留白
*
* 竖版常用： 2/3 → pad 150% （标准电影海报）
* 20/29 → pad 145% （官方默认，略扁）
* 27/40 → pad 148.148%
* 横版常用： 16/9 → pad 56.25% （标准视频缩略图）
* 69/40 → pad 57.971% （官方默认）
* ==========================================================================*/
:root {
/* ★ 已改：官方默认 20/29 → 145%（很高）。压矮成 5/6 → 120%。
ratio 和 pad 必须配套改，改一个会变形。对照表：
2/3 → 150% 标准电影海报，比官方还高
20/29 → 145% 官方默认
3/4 → 133.333% 稍矮
5/6 → 120% ← 当前
1/1 → 100% 正方形
4/3 → 75% 横版
⚠ 海报图本身是竖版的，压矮之后是【居中裁切】
（.vodlist_thumb 用的是 background-size:cover），上下各裁掉一点。
片名如果印在海报很上面或很下面，可能会被裁到 —— 先看效果，
裁得难看就往回调到 133% 或 145%。
⚠ 这两个是全站变量，首页、分类页、搜索页、相关推荐一起变。
只想改首页的话告诉我，我把它挪进首页的选择器里。 */
--tpl-poster-v-ratio: 5/6;
--tpl-poster-v-pad: 120%;
--tpl-poster-h-ratio: 69/40;
--tpl-poster-h-pad: 57.97101%;
}
/* ===========================================================================
* 【第六块】自定义补丁区
* 上面的变量覆盖不了的零散样式写在这里。
* 用浏览器右键「检查」找到元素的 class，照着写就行。
*
* 示例（默认注释掉，需要时去掉 / * * /）：
* ==========================================================================*/
/* 收窄卡片间距，让首页更密 */
/*
.mac-poster { margin-bottom: 6px !important; }
*/
/* 顶部导航压矮 */
/*
.head_box { height: 46px !important; }
*/
/* 隐藏页脚某个板块 */
/*
.foot_link { display: none !important; }
*/
/* ============================================================================
* 【修复】上传 PNG logo 后图片超大、盖住搜索框
*
* 原因：官方 head.css 里只给 .mac-logo-lottie（Lottie 动画容器）加了
* max-height:50px，对 ![]()
完全没有尺寸约束。
* 官方默认 logo 是 .json 动画，所以没暴露这个问题；
* 你换成 PNG 后，img 按原始 512×512 渲染，就撑爆了。
*
* 下面给 img 补上约束。头部/页脚分开设，跟官方 Lottie 的尺寸对齐。
* ==========================================================================*/
/* 头部 logo —— 官方 Lottie 是 max-height:50px，这里对齐 */
.head_logo .mac-logo .logo img,
.head_logo .mac-logo .logo > img{
max-height: 44px; /* ← 觉得还大就调小，40 / 36 都行 */
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
/* 页脚 logo —— 官方是 58px */
.foot-logo .mac-logo .logo img,
.mac-logo--foot .logo img{
max-height: 44px;
width: auto;
max-width: 100%;
display: block;
object-fit: contain;
}
/* 兜底：任何 .mac-logo 里的 img 都不许超高 */
.mac-logo .logo img{
max-height: 44px;
width: auto;
}
/* 顺带：logo 容器别被挤压，也别把搜索框挤没 */
.head_logo{
flex-shrink: 0;
max-width: 46%;
}
/* ============================================================================
* 手机端搜索框收窄 （第 6 版 —— 改用百分比定宽）
*
* 第 5 版位置对了（☰ 回到最左、右边缘贴齐），但收得不够。
* 因为那版用的是 margin-left: 50px —— 固定像素，在手机上只占约 13%，
* 你要的是"搜索框占屏幕一半"，那得用百分比直接定宽。
*
* 这一版：给搜索胶囊设百分比宽度 + margin-left:auto 推到右边。
* ☰ 不动，右边缘贴齐，剩下的全变成中间空隙。
*
* ★ 调法：只改下面 --search-width 那个百分比 = 搜索框占屏幕的宽度
* 70% 当前（你定的常用值，后面新站也照这个来）
* 60% 再窄一点
* 55% 偏窄，给"搜索"按钮留的余量比较紧
* 50% 正好占屏幕一半
* 100% 恢复满宽
*
* 注意：低于 45% 时，"火影忍者"那行提示文字会被挤得几乎看不见，
* 因为里面还要塞 🔥 图标 + 输入框 + "搜索"按钮三样东西。
* 真想更窄，建议同时把按钮里的"搜索"两个字去掉、只留图标。
* ==========================================================================*/
#topnav .mobile-head .head_b{
--search-width: 70%;
}
/* 1) .head_search 保持满宽（☰ 靠它待在最左） */
#topnav .mobile-head .head_b > .head_search.head_search_mobile.head_search_mobile_capsule{
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 2) ☰ 原地不动、不被压缩 */
#topnav .mobile-head .head_b .head_search.head_search_mobile_capsule > .head_menu_b{
flex: 0 0 auto !important;
margin: 0 0 0 var(--menu-shift) !important; /* 左移量见下方说明 */
}
/* 3) 搜索胶囊：百分比定宽 + 推到最右 */
#topnav .mobile-head .head_b .head_search.head_search_mobile.head_search_mobile_capsule > .head_search_inner{
flex: 0 0 auto !important;
width: var(--search-width) !important;
max-width: var(--search-width) !important;
min-width: 0 !important;
margin-left: auto !important;
margin-right: 0 !important;
}
/* ============================================================================
* ☰ 三条横线的水平位置
*
* ☰ 比上面的 logo 略偏左，是因为第一行（logo 那行）和第二行（☰+搜索框那行）
* 是两个不同的容器，各自内边距对不齐 —— 不是哪里写错了。
*
* ★ 改 --menu-shift 这一个数字：
* 10px 跟 logo 左边缘对齐 （你说的第一种，当前）
* 45px 居中在 logo 正下方 （你说的第二种）
* 0px 回到原位
*
* 两种都试试哪个顺眼，数字可随便微调：8px / 12px / 40px 都行。
* ==========================================================================*/
#topnav .mobile-head .head_b{
--menu-shift: 10px;
}
/* ============================================================================
* 右上角「最新」按钮 + 「最新公告」弹窗
*
* 这个功能【官方没有后台开关】—— 按钮和弹窗都是无条件渲染的。
* 想关掉就把下面这段的注释去掉；想留着就不用管这里，去改内容即可
* （内容改哪里见随附的对照表）。
* ==========================================================================*/
#topnav .top_ico:has(> .js-save-site-url){ display: none !important; }
#topnav .top_link.js-save-site-url{ display: none !important; }
/* ============================================================================
* ☰ 侧边菜单里隐藏用不上的项
*
* 官方 all_menu.html 里，这三项【没有后台开关】，是无条件渲染的：
* 直播 留言 最新
* （排行榜和专题有开关，去 模板配置 里关，别在这里动）
*
* 想关哪个，把对应那行前面的 / * 和 * / 去掉即可。
* ==========================================================================*/
/* 隐藏「直播」 */
.all_menu .all-menu-item:has(> a[href*="live/show"]){ display: none !important; }
/* 隐藏「留言」 */
.all_menu .all-menu-item:has(> a[href*="gbook/index"]){ display: none !important; }
/* 隐藏「最新」——默认保留，一般还挺有用
.all_menu .all-menu-item:has(> a[href*="last_vod"]){ display: none !important; }
*/
/* 隐藏「排行榜」——建议改用后台 模板配置 → theme[rank][btn]
.all_menu .all-menu-item:has(> a[href*="label/rank"]){ display: none !important; }
*/
/* ============================================================================
* 板块标题去掉「最新」两个字
*
* 现象：首页板块标题显示成「最新 高清在线」，前面那两个字是官方硬加的。
*
* 为什么用 CSS 隐藏、而不是去删模板里的字：
* 这句标题在 4 个地方各写了一遍，其中最主要的一处在压缩过的
* asset/js/index-home-parts.js 里（手机端板块是 AJAX 拉回来后由它拼的）。
* 去改压缩 JS 既难改又会被官方更新覆盖。这条 CSS 一行管住全部 4 处，
* 而且升级不受影响。
*
* 影响范围：所有带 .hu-section-head 的板块标题
* = 首页各分类板块 / 漫画板块 / 文章板块 / 最近更新页的分组标题。
*
* 想把「最新」加回来：把下面这行删掉，或在行首行尾包上 / * * /
* ==========================================================================*/
.hu-section-head h2 > [data-lang="string_zuixin"]{ display: none !important; }
/* 顺手把它后面那个字留下的一点点缩进也去掉，标题左边缘对齐 */
.hu-section-head h2 > [data-lang="string_zuixin"] + span{ margin-left: 0 !important; }
/* ============================================================================
* 右下角悬浮球（快捷菜单 / 白夜模式切换）默认落点
*
* 现象：悬浮球默认停在屏幕右侧【偏中间】的高度，点开之后那三个按钮
* 正好压在「热门分类」标签格子的右边一列上，把分类名挡住了。
*
* 原因：官方 public-head-early.css 在手机端给它写的是
* .extra{ bottom:3rem; right:.175rem }
* 这个模板的 1rem 在手机上约等于 40px，所以 3rem ≈ 120px ——
* 官方是按「底部还有导航栏 + 底部广告条」来留的避让高度。
* 我们这两样都没有，这 120px 就成了纯粹把它往上顶的空高度。
* （另外官方还有 .foot_stem .extra{bottom:110px} 和
* .foot_nav.foot_stem .extra{bottom:180px} 两条，是底部导航栏
* 存在时才生效的；下面这条带 !important，三种情况都能管住。）
*
* 处理：收回成 16px，贴回屏幕右下角。
*
* ★ 注意：悬浮球本身是【可以手动拖动】的（foot-hlstem.js 里有拖拽逻辑），
* 这条规则只改它每次打开页面时的【默认落点】，不影响拖动。
* 另外官方的拖拽【没有做位置记忆】（我查过，那段代码里没有写
* localStorage / sessionStorage / Cookie），所以访客每刷新一次页面
* 都会回到这个默认落点 —— 这正是必须把默认值调对的原因：
* 你自己拖开了没用，别人打开还是挡着。
*
* ★ 调法：只改下面的 16px
* 16px 贴近右下角（当前）
* 24px 稍微抬起一点
* 120px 大致回到官方原来的高度
* ==========================================================================*/
.extra.extra-fab{
bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}
/* ============================================================================
* 首页手机端背景图：435 KB 的 PNG 换成 9 KB 的 WebP
*
* ---- 这是首页最大的一个文件 ----
* 官方 head.css 里给手机端首页贴了一张背景图
* images/home/home-bg@2x.png 浅色模式 435 KB
* images/home/home-bg@2x-balck.png 深色模式 167 KB
* 你整个首页所有资源加起来才 996 KB，这一张就占了 44%。
*
* ---- 为什么能小这么多 ----
* 这张图是一片很柔和的淡绿渐变，几乎没有细节。
* PNG 是无损格式，专门用来存图标线稿这种边界分明的图，
* 存渐变时会把每一个像素的细微差别都老老实实记下来，所以特别大。
* WebP 有损压缩对渐变几乎是降维打击 —— 我实测过色差：
* 最大 15/255，平均 0.7/255，肉眼完全看不出区别。
*
* 浅色 435 KB → 9.1 KB 小了 98%
* 深色 167 KB → 4.3 KB 小了 97%
*
* ---- 用法 ----
* 把 home-bg@2x.webp 和 home-bg@2x-balck.webp 两个文件放到
* template/default/images/home/
* 原来的两个 png 【不要删】，留着当后备（万一哪天想退回去，
* 把下面这段整个删掉就自动用回 png 了）。
*
* ---- 兼容性 ----
* WebP 在 2020 年之后的浏览器全都支持（Chrome、Edge、Safari 14+、
* 安卓各家内核、微信/QQ 内置浏览器）。真遇到极老的机器，
* 背景图不显示而已，页面照常能用 —— 它只是装饰。
* ==========================================================================*/
@media screen and (max-width: 820px){
body.home-index-body{
background-image: url(../../images/home/home-bg@2x.webp) !important;
}
}
/* 深色那条官方没有写在媒体查询里（电脑端深色也会用到），所以这里也放在外面 */
body.home-index-body.bstem{
background-image: url(../../images/home/home-bg@2x-balck.webp) !important;
}
/* ============================================================================
* 电脑端页脚背景图：266 KB 的 PNG 换成 10 KB 的 WebP
*
* 跟首页背景图同一个道理：images/la/foot-bg.png 是一张 3840×440 的淡色横幅，
* 用 PNG 存等于把每个像素的细微渐变都记下来，所以 266 KB。
*
* 浅色 266 KB → 9.9 KB
* 深色 181 KB → 7.9 KB
*
* 这张图只在【电脑端】加载 —— 官方 foot.css 里有
* @media (max-width:820px){ .foot{background:none} }
* 手机端本来就不下它。所以这一条优化手机用户感觉不到，电脑用户能感觉到。
*
* 用法：把 foot-bg.webp 和 foot-bg-black.webp 放到
* template/default/images/la/
* 原来的 png 别删，留着当后备。
* ==========================================================================*/
/* ★ 必须包在 min-width:821px 里面。
官方 foot.css 有一条 @media (max-width:820px){ .foot{background:none} }
让手机端不加载这张图。如果我们这里不限定屏幕宽度、又带了 !important，
反而会把官方那条盖掉，等于给手机用户凭空加回一张背景图 —— 帮倒忙。 */
@media screen and (min-width: 821px){
.foot{
background-image: url(../../images/la/foot-bg.webp) !important;
}
/* 深色那条在 black.css 里是 .foot{background:...!important}（权重 0,1,0），
所以这里用 .bstem .foot（权重 0,2,0）才压得住。 */
.bstem .foot{
background-image: url(../../images/la/foot-bg-black.webp) !important;
}
}
/* ############################################################################
*
* ★★★ PC 端修正（2026-09-21 新增）★★★
*
* 背景：之前所有验证都在手机上做，PC 端第一次打开才发现四处不对。
* 下面四条都只在 min-width:821px 生效，**手机端一个像素都不会变**。
*
* ##########################################################################*/
/* ────────────────────────────────────────────────────────────────
* PC-1 站点名称被压成「C…」
*
* 官方 public-head-early.css 里写死了
* @media screen and (min-width:820px){ .head_logo{ width:3.25rem } }
* 那是给固定尺寸的图片 logo 留的槽位。我们换成文字之后，
* 文字被挤进这个窄槽，再叠加 head.css 里的 .head_logo{min-width:0}
* （网格布局允许无限压缩）和我们自己的 text-overflow:ellipsis，
* 结果就只剩一个「C…」。
*
* 手机端用的是另一条规则（max-width:820px），本来就正常，所以这里只改 PC。
* ──────────────────────────────────────────────────────────────── */
@media screen and (min-width: 821px){
#topnav .head_box.show-pc .head_logo{
width: auto !important;
min-width: -webkit-max-content;
min-width: max-content; /* 按文字实际宽度撑开，不再被压缩 */
}
}
/* ────────────────────────────────────────────────────────────────
* PC-2 顶部广告被固定导航栏压住
*
* 官方 .head_box 是 position:fixed（浮在页面上方，不占位置），
* 而 PC 端内容区【没有留顶部间距】—— 因为官方这个位置原本是首页轮播，
* 设计上就是「图从最顶开始、半透明头部浮在上面」。
* 我们把广告位放在这儿，就继承了这个效果。
*
* ★ 这个数字要跟你的头部实际高度对上。现在给的是估值。
* 怎么量准：电脑上打开首页 → F12 → Console 贴这一行回车
* document.querySelector('.head_box.show-pc').offsetHeight
* 出来的数字就是准确高度，填到下面 --pc-head-h 里。
*
* ★ 如果以后在后台重新打开【轮播 Banner】，建议把这一条注释掉 ——
* 轮播本来就是设计成钻到头部底下的，加了间距反而不好看。
* ──────────────────────────────────────────────────────────────── */
@media screen and (min-width: 821px){
.container.home-unified{
--pc-head-h: 76px;
padding-top: var(--pc-head-h);
}
}
/* ────────────────────────────────────────────────────────────────
* PC-3 上半部分满屏宽、下半部分居中，两边对不齐
*
* 原因在官方两条互相打架的规则：
* .container{ width:30rem; margin:auto } ← 全站容器，居中定宽
* .container.home-unified{ width:100% } ← 首页把它改成满屏
* .home-unified .home-detail{ width:30rem; margin:auto } ← 视频区又居中回去
*
* 结果：跑马灯、热门分类、广告位1和2 是【满屏宽】，
* 而视频板块和广告位3 是【30rem 居中】。
* 所以「热门分类」贴在屏幕最左边，「展开」被挤到最右边甚至切掉，
* 而下面的「高清在线」却是居中的 —— 看着像两个网站拼起来的。
*
* 下面让上半部分跟视频区用同一个宽度，整页就对齐了。
* 手机端 .home-detail 本来就是 width:100%，不受影响。
* ──────────────────────────────────────────────────────────────── */
@media screen and (min-width: 821px){
.container.home-unified > .my-ad-banner,
.container.home-unified > .mtw,
.container.home-unified > .mac-type-tags{
box-sizing: border-box;
width: 30rem; /* 跟 .home-detail 完全一致 */
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/* ────────────────────────────────────────────────────────────────
* PC-4 跑马灯在宽屏上能同时看到重复的两份
*
* 跑马灯的无缝循环是靠「同一批词输出两遍、动画走到 -50% 再跳回」实现的。
* 手机屏幕窄，一次只看得到一份，天衣无缝；
* PC 屏幕宽，两份同时进视野，就看出来是复制的了。
*
* 真正的修法在 my_tagwall.html 里（把复制份数从 2 提到 4），
* 这里只是配套：PC 上把每个标签稍微放大一点，让一份词占的宽度更长，
* 配合 4 份复制，任何屏幕宽度下都不会同时露出两份相同的开头。
* ──────────────────────────────────────────────────────────────── */
@media screen and (min-width: 821px){
.mtw{
--mtw-font: 14px;
--mtw-pad-h: 18px;
--mtw-gap: 10px;
}
}
/* ############################################################################
*
* ★★★ 采集上线后的调整（2026-09-21）★★★
*
* ##########################################################################*/
/* ────────────────────────────────────────────────────────────────
* 一、播放页/详情页那条滚动提示
*
* 原来这里有一条 .player_infotip--marquee{display:none} 把它整个藏了。
* 现在改成【保留滚动条、换掉里面的文案】，所以这条隐藏规则已撤销。
*
* 文案改这里：template/default/html/module/my_play_tip.html
* 涉及的两个模板：vod/play.html、vod/detail.html
*
* 想彻底不要这条滚动条，把下面这行前面的注释去掉即可：
* .player_infotip--marquee{ display: none !important; }
* ──────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────
* 二、首页每行影片数：手机端 3 个 → 2 个
*
* 官方 index.css 里写的是：
* @media (max-width:820px){
* .home-unified .hu-vlist{ grid-template-columns: repeat(3, minmax(0,1fr)) }
* .home-unified .mac-poster--h .hu-vlist{ repeat(2, ...) } ← 横版封面本来就是 2
* }
* 你的分类封面是竖版，所以走的是 3 列那条。
*
* ★ 想改回去或者再调：只改下面那个数字
* 2 当前，封面大、不拥挤，一屏看到的片少
* 3 官方默认
* 4 很挤，封面会很小，一般不建议
*
* ★ 配套建议：改成 2 列之后，每个板块显示的条数最好是【偶数】，
* 否则最后一行会只剩一个、右边空着。
* 改这个数字的地方：后台 → 模板配置 → 首页配置 → 每个板块显示数量
* 你现在是 6，6÷2=3 行，正好排满，不用动。
*
* PC 端没动（还是 6 列），你说过 PC 够用了。想改的话告诉我。
* ──────────────────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════
* 首页影片网格（手机端）—— 一个地方改全部
*
* 下面这 5 个变量控制首页板块里影片卡片的排布。
* 想换布局【只改这 5 个数字】，不用注释掉整段再放开另一段。
*
* ┌─────────────────────────────────────────────────────────┐
* │ 三套值，直接抄 │
* ├──────────────┬───────────────┬──────────┬───────────────┤
* │ │ 跟「更多」页一致│ 3列较松 │ 一排 2 个 │
* │ │ （当前） │ │ │
* ├──────────────┼───────────────┼──────────┼───────────────┤
* │ --cols │ 3 │ 3 │ 2 │
* │ --gap-x │ 8px │ 10px │ 10px │
* │ --gap-y │ 10px │ 14px │ 12px │
* │ --title-size │ 14px │ 12px │ 14px │
* │ --card-w │ 100% │ 100% │ 100% │
* └──────────────┴───────────────┴──────────┴───────────────┘
*
* ★ 第一列是【照抄分类页（点「更多」进去那个页面）的数值】。
* 我把 asset/css/type-show.css 里的实际值量出来了：
* grid-template-columns: repeat(3, minmax(0,1fr))
* gap: 10px 8px （行 10px / 列 8px）
* 片名: var(--tpl-font-heading) = 14px，最多两行
* 所以现在首页和「更多」页的卡片是【一模一样】的，不会有割裂感。
*
* ★ 每块板显示几条，在 html/module/index_theme_vars.html 里，现在是 6。
* 6 这个数字【两种布局都排得满】：3列×2行=6，2列×3行=6。
* 所以你切换列数时不用动它。
*
* ★ 海报的高矮不在这里，在本文件上方【第五块 封面比例】
* （--tpl-poster-v-ratio 和 --tpl-poster-v-pad，现在是 5/6 → 120%）。
*
* ---- 为什么默认给 3 列 ----
* 按 390px 宽的手机算：
* 2 列 + 120% → 卡片 190px 宽、含标题约 265px 高 → 一屏扫到 4 张
* 3 列 + 120% → 卡片 115px 宽、含标题约 175px 高 → 一屏扫到 9 张
* 影视站用户的核心动作是「扫」不是「看」，一屏能扫到的片越多命中率越高。
* 主流视频站手机端（爱奇艺/腾讯/B站/优酷）都是 3 列。
*
* 你之前觉得 3 列挤，那是在海报 145%（又瘦又高）的时候。
* 现在压到 120%、海报接近方形，再把上下间距拉到 14px、片名收到 12px，
* 观感跟那时候完全不是一回事。
*
* ★ 不喜欢就照上面表格把 5 个值换成「一排 2 个」那一列，刷新即可。
* ════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 820px){
.home-unified .hu-vlist{
--cols: 3;
--gap-x: 8px;
--gap-y: 10px;
--title-size: 14px;
--card-w: 100%;
/* 下面是把上面的变量接到实际属性上，不用动 */
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important;
gap: var(--gap-y, 14px) var(--gap-x, 10px) !important;
}
.home-unified .hu-vlist > li{
width: var(--card-w, 100%);
margin-left: auto;
margin-right: auto;
}
/* 片名：跟分类页一样，最多两行，超出打点。
分类页用的就是 -webkit-line-clamp:2 + line-height:1.3。 */
.home-unified .hu-vlist .vodlist_title{
font-size: var(--title-size, 14px);
line-height: 1.3;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.home-unified .hu-vlist .vodlist_sub{
font-size: calc(var(--title-size, 14px) - 2px);
}
}
/* ────────────────────────────────────────────────────────────────
* 分类页/筛选页：隐藏「共有 40 个影片」
*
* 它在 module/mac_catalog_filter_head.html 的 span.sx_total 里。
*
* 为什么用 CSS 藏、不直接把那段 HTML 删掉：
* asset/js/type-show.js 每次加载完列表都会去写 .mac_total 这个元素的内容。
* 把元素整个删掉的话，那句取元素的代码拿到 null，后面再取属性就会抛错，
* 有可能把整个列表渲染也一起带崩。留着元素、只是不显示，最稳。
*
* 想让它显示回来：删掉下面这一行。
* ──────────────────────────────────────────────────────────────── */
.sx_total{ display: none !important; }
/* ────────────────────────────────────────────────────────────────
* 影片详情页：隐藏「评分 ☆☆☆☆☆ 暂无评分」那一块
*
* 它是 html/vod/detail.html 第 39 行的
* div#detail_rating
* 由 asset/js/vod-detail-ajax-render.js 填充，内容来自 vod_score 字段。
*
* 为什么它永远是「暂无评分」：
* 采集源不带评分数据，而后台
* 「内容接入 → 视频采集设置 → 随机评分数」你设的是【关闭】，
* 所以每一部片的 vod_score 都是 0 → 渲染出来就是五颗空星 + 暂无评分。
* 一块永远不变的空数据摆在最显眼的位置，不如不要。
*
* 为什么用 CSS 藏、不删那个 div：
* 那段压缩 JS 会 getElementById('detail_rating') 然后写 innerHTML。
* 元素删了会拿到 null，后面再写属性就抛错，可能把详情页的
* 其它 AJAX 渲染一起带崩。留着元素、只是不显示，最稳。
*
* 想让它显示回来：删掉下面这一行。
* ──────────────────────────────────────────────────────────────── */
#detail_rating{ display: none !important; }
/* ────────────────────────────────────────────────────────────────
* 首页板块标题旁边的「最近更新 (40)」小角标
*
* 它不是模板里写的，是 asset/js/index-home-parts.js 生成的：
* function S(a){ ... '
* 最近更新
* 40
* ' }
* function R(a,t){ a.find(".hu-section-today-new").remove(); ... }
*
* 所以【首屏看不到、点了「换一换」才冒出来】——首屏是服务端直出的，
* 那段 JS 没参与；换一换走 AJAX，JS 接管渲染时才把它插进去。
* 不是 bug，是两条渲染路径不一致。
*
* 数字来自接口返回的 today_new_count（今日新增多少部）。
* 刚采集完的时候全站片子都是"今天新增"，所以显示的数字等于整个分类的总数，
* 看着很怪。而且对访客也没什么意义。
*
* 用 CSS 藏而不是改 JS：那是压缩过的官方文件，改了下次更新就没了，
* 而且它自己会 remove 再插入，改起来容易出错。
*
* 想让它显示回来：删掉下面这一行。
* ──────────────────────────────────────────────────────────────── */
.hu-section-today-new{ display: none !important; }
/* ────────────────────────────────────────────────────────────────
* 首页：两个板块之间的留白收紧（手机端）
*
* ---- 原来为什么那么空 ----
* 官方在这里叠了三层留白：
* index.css .home-unified .home-refresh-wrap{padding:17px 0} 下边 17px
* index.css .home-unified .latest-tab-box{margin-bottom:10px} 10px
* index.css .home-unified .hu-section-head{min-height:50px} 标题行 50px
* （标题文字本身只有 20px×1.2 ≈ 24px 高，居中之后
* 上下各自动撑出 13px 的空白）
* 加起来 17+10+13 ≈ 40px 的纯空白，「换一换」按钮孤零零悬在中间，很抢视线。
*
* ---- 现在 ----
* 「换一换」按钮已经在 index_hom_type.html 里关掉了（$my_refresh_btn = 0），
* 剩下的两层收到 14 + 8 ≈ 22px。
*
* ---- 想自己微调 ----
* 只改 :root 里的数字，别动下面的规则。
* --sec-gap 板块之间的间距（上个板块最后一排影片 ↕ 下个板块标题）
* --sec-head-h 板块标题那一行的最小高度（标题文字约 24px，
* 这个值必须 ≥ 30px，否则右边「更多」按钮会贴边）
*
* ---- 如果哪天把「换一换」开回来 ----
* 第三条规则会接管按钮的上下留白，同样跟着上面两个变量走，不用另外调。
*
* ---- 只动手机，没动 PC ----
* 下面整块包在 max-width:820px 里。PC 端保持官方原样。
* ──────────────────────────────────────────────────────────────── */
:root{
--sec-gap: 14px;
--sec-head-h: 40px;
}
@media screen and (max-width: 820px){
/* 板块之间的间距（官方 10px，但它上面还压着按钮的 17px） */
.home-unified .latest-tab-box{
margin-bottom: var(--sec-gap, 14px) !important;
}
/* 板块标题行：官方 50px 太高，标题文字只有 24px */
.home-unified .hu-section-head{
min-height: var(--sec-head-h, 40px) !important;
}
/* 「换一换」开回来时才有这个元素。下边留白交给上面的 margin，这里只留上边 */
.home-unified .home-refresh-wrap{
padding: var(--sec-gap, 14px) 0 0 !important;
}
}