/*!
* 首页专属样式补丁 —— 只放 app.home.js 渲染出的、模板 style.css 里没有的组件。
* 模板已有的（下拉 module-tab-drop、卡片 module-item、分区布局 module-wrapper）一律不重复定义。
* 注意：需要在 index.html 里加 ，且放在
* style.css 之后，本文件的规则才盖得住主题默认值。
*/
/* ---------------- 加载 / 错误态 ----------------
* 加载态与空态沿用 app.css 的 .mx-loading / .mx-empty；这里补一个错误态，
* 用主题主色红标出来，和「暂无内容」区分开。 */
.mx-error {
padding: 60px 0;
text-align: center;
opacity: .7;
color: #ff2a14;
/* 与 .mx-loading / .mx-empty 同理：落在 .module-list（font-size:0）里会被继承成 0，
报错文案一个字看不见。显式补回字号。 */
font-size: 14px;
line-height: 1.7;
}
/* ---------------- 大类分区：地区切换条 ----------------
* 一个大类（如「电视」）下含多个地区库（韩国 / 华语 / …）。切换条横排地区，
* 点击只换下方卡片容器，不重新请求。 */
.mx-group-regions {
font-size: 0;
margin: -4px 0 12px;
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mx-group-regions::-webkit-scrollbar { display: none; }
.mx-region-item {
display: inline-block;
padding: 0 14px;
line-height: 30px;
font-size: 13px;
border-radius: 16px;
margin: 0 8px 8px 0;
background: #f3f5f7;
color: rgba(0, 0, 0, .68);
cursor: pointer;
transition: background-color .2s, color .2s;
}
.mx-region-item:hover { background: #eaedf1; }
/* 选中态用主题红（style.css 里 tab 选中态同色 #ff2a14），和顶部 tab 一致 */
.mx-region-item.selected {
background: #ff2a14;
color: #fff;
font-weight: 700;
}
/* ---------------- 最新影片：横向列表行 ----------------
* 「最新影片」tab 里每部片是一条横版列表行（缩略图 + 标题/副标题/年份），
* 不再用 16:9 的缩小版海报卡 —— 那样会和其它分区的 5:7 竖版海报混成两种比例。 */
.mx-newlist {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 20px;
padding: 0 0 10px;
font-size: 14px;
}
@media (max-width: 899px) {
.mx-newlist { grid-template-columns: 1fr; }
/* 地区胶囊：30px 高，手指按不准。抬到 36px（与主题 .btn-base / .library-item 同档）。
规则必须放在本文件 —— app.header.css 的同名规则会被这里后加载的 30px 盖掉。 */
.mx-region-item { line-height: 36px; }
}
.mx-newrow {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px;
border-radius: 8px;
background: #f7f8f9;
color: inherit;
transition: background-color .2s;
}
.mx-newrow:hover { background: #eaedf1; }
.mx-newrow-pic {
position: relative;
flex: 0 0 130px;
width: 130px;
aspect-ratio: 16 / 9; /* 列表行统一用横图比例，和分区海报墙的竖版区分开 */
border-radius: 6px;
overflow: hidden;
background: #e5e7eb;
}
.mx-newrow-pic img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mx-newrow-rt {
position: absolute;
right: 0;
bottom: 0;
padding: 0 6px;
font-size: 12px;
line-height: 18px;
color: #fff;
background: rgba(0, 0, 0, .6);
border-radius: 6px 0 0 0;
}
.mx-newrow-info {
min-width: 0; /* 让子元素的省略号生效，而不是把行撑破 */
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 4px;
}
.mx-newrow-title {
font-size: 15px;
font-weight: 600;
color: rgba(7, 7, 10, .92);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx-newrow-sub {
margin-top: 4px;
font-size: 13px;
/* 副标题与元信息原来写的是 rgba(0,0,0,.51) / rgba(0,0,0,.4)，
压在行底 #f7f8f9 上实测对比度只有 4.07 / 2.83 —— 12px 的正文级文字，
两个都没到 4.5。抬到 .62 / .55（实测 5.89 / 4.54），仍保持「标题 > 副标题 > 元信息」
的层次。 */
color: rgba(0, 0, 0, .62);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx-newrow-meta {
margin-top: 4px;
font-size: 12px;
color: rgba(0, 0, 0, .55);
}
/* ---------------- 分区海报墙：列数取 12 的约数，最后一排永远是满的 ----------------
* 主题给 .module-item 的宽度是按断点写死的像素（200 / 190 / 175 / …），每行能摆几张
* 完全由容器宽度决定，实测为：
* ≤559 → 3 列 560–899 → 5 列 900–1239 → 4 列
* 1240–1549 → 5 列 1550–1789 → 6 列 ≥1790 → 7 列
* 而分区固定渲染 12 张卡（app.home.js）。12 能被 3 / 4 / 6 整除，不能被 5 / 7 整除，
* 于是 560–899 与 1240–1549 排成「5,5,2」、≥1790 排成「7,5」—— 四个分区右下角
* 各缺一块，四个角一起缺。
*
* 改用 CSS Grid：列数由这里自己定，取 12 的约数 3 / 4 / 6，任何宽度下最后一排都是满的。
* 也**不隐藏任何一张卡**（主题原本那串 nth-child 是「摆不下就藏」，首页作为预览区
* 尚可，但既然排得下就没必要藏）。列数随宽度单调递增，只在容器宽度跳变处切换：
* ≤559 3 列 —— 与改动前逐像素一致（390 下 113px、559 下 170px）
* 560–1549 4 列 —— 900–1239 原本就是 4 列，只有 560–899 与 1240–1549 变
* ≥1550 6 列 —— 与改动前逐像素一致（1550 下 200px）
* 相邻档的卡片尺寸是连续过渡的（1239 的 224px → 1240 的 224px、1789 的 200px →
* 1790 的 236px），没有「跨一个像素卡片突变三成」的台阶。
*
* .module-items 自带 margin-right:-20px（配合卡片的 margin-right 做整行贴边），
* 在 grid 里会撑出 20px 横向溢出，连同卡片自身的 margin 一起归零，间距交给 gap。
*/
#lib-sections .mx-group-items {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-right: 0;
}
#lib-sections .mx-group-items > .module-item {
width: auto;
margin: 0;
}
@media (max-width: 559px) {
#lib-sections .mx-group-items {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px; /* 与主题 ≤559 的卡片间距一致 */
}
}
@media (min-width: 1550px) {
#lib-sections .mx-group-items {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
/* ---------------- 模块标题行：「最新热播」右侧的构成统计 ----------------
* 模板 .module-heading 带 font-size:0（style.css:2225-2231），用来消掉 flex 子项之间的空白，
* 子元素各自带字号（.module-title 26px）。而 .module-sub-title 自己没写 font-size ——
* 模板原本往里塞的是 .module-link-wrap 里的 （style.css:2264 给了 14px），所以归零没事。
* 本站往里写的是纯文本（app.home.js 的 hotSubtitle()），会直接继承 0 ——
* 实测「剧集 12」一个字都看不见，只在标题右侧留下一块 15×40 的空位。
* 这里给纯文本形态补回字号；行高取与 height 相同的 40px，让它在 flex 里与标题同轴对齐
* （模板的 line-height:50px 是配 14px 链接写的，用在 13px 上会整体下沉）。
* 颜色不写死：用 opacity 淡化，黑/白两套皮肤都跟得上（写死深色在深色皮肤下会看不见）。 */
#hot-subtitle {
font-size: 13px;
line-height: 40px;
opacity: .55;
}
/* ---------------- 深色皮肤下的底色（P1） ----------------
* 本文件里的组件（地区切换胶囊 .mx-region-item、最新影片列表行 .mx-newrow）是本站新增的，
* 模板没有对应件，配色就照浅色皮肤写成了「浅底深字」。深色皮肤下（ 上不带
* .theme-white）于是成了一整块近白卡片压在 #16161a 页面上 —— 实测 .mx-newrow 背景
* rgb(247,248,249)，与主题自己的卡片底色（--mx-surface #25252b）差着一整个明度层次，
* 一屏里两种「卡片」打架。这里按主题的深色层次给一套等价配色，底色直接复用
* app.css 里的 --mx-surface / --mx-surface-2，文字翻成浅色。
* 选中态 .mx-region-item.selected 用 :not() 排除，仍走主色红。 */
html:not(.theme-white) .mx-region-item:not(.selected) {
background: var(--mx-surface);
color: rgba(255, 255, 255, .72);
}
html:not(.theme-white) .mx-region-item:not(.selected):hover { background: var(--mx-surface-2); }
html:not(.theme-white) .mx-newrow { background: var(--mx-surface); }
html:not(.theme-white) .mx-newrow:hover { background: var(--mx-surface-2); }
html:not(.theme-white) .mx-newrow-pic { background: var(--mx-surface-2); }
html:not(.theme-white) .mx-newrow-title { color: rgba(255, 255, 255, .92); }
html:not(.theme-white) .mx-newrow-sub { color: rgba(255, 255, 255, .62); }
html:not(.theme-white) .mx-newrow-meta { color: rgba(255, 255, 255, .55); }