/* 后台有自定义样式颜色值等的修改，每个变量已经规定，否则不能再后台修改、只定义一次，无重复。此注释永久保留。 */

/* ============================================================
 * 列表模式样式（从 style.css 迁移）
 * ============================================================ */

.resource-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 20px;
}
.resource-list.tag-single { grid-template-columns: minmax(0, 1fr); }
.resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: all .15s;
    position: relative;
    /* 长标题撑爆行宽的兜底。2026-10-03 由 home.css 的「移动端巡检修复」段归并到基类 ——
       min-width:0 对所有视口都该成立，不是只在移动端才需要。 */
    min-width: 0;
}
.resource-item:hover { background: var(--color-accent-soft); }
.resource-item .idx {
    width: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-dim);
    flex-shrink: 0;
}
.resource-item .title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* flex 子项默认 min-width:auto，长标题会顶破行宽（2026-10-03 由 home.css 归并至此） */
    min-width: 0;
}
.resource-item:hover .title { color: var(--color-accent); }
/* 列表标题两段（中文名正常 / 英文名小一号 + 次级灰）：首页 .resource-item 与
   分类页 .res-list-title-text **两处共用同一套观感**，各自只定基准字号（首页 14/12、分类页 15/13）。
   ⚠️ 用主题变量而非硬编码灰，跟随浅/深色切换；hover 时随父级一起变强调色，
   故英文名在 hover 态用半透明压暗（不用固定灰，避免深色下 hover 反色发白）。
   两段同处一行，父级 nowrap + ellipsis，超长整体截断。 */
.resource-item .title-en,
.res-list-title-text .title-en { color: var(--color-text-secondary); }
.resource-item:hover .title-en { color: var(--color-accent); opacity: .75; }
.resource-item .title-cn { font-size: 14px; }
.resource-item .title-en { font-size: 12px; }
/* flex-shrink:0 保住箭头不被标题挤压（2026-10-03 由 home.css 归并至此） */
.resource-item .list-arrow { color: var(--color-text-dim); font-size: 16px; flex-shrink: 0; }
/* 列表项版本号：方案1 行内徽章（hover 在标题旁立即浮现，无延迟无淡入，2026-10-03）。
   复用 .ver-badge 金色语义（版本=金，与网格卡 .grid-card-ver / 详情页 .doc-info-tag.tag-version 一致），
   置于「新增/更新」徽章之前（正常流，非绝对定位，避免与常驻徽章重叠）。 */
.resource-item .list-ver {
    display: none;
    margin-left: 2px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    flex-shrink: 0;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resource-item:hover .list-ver { display: inline-flex; }
.res-list { display:none; flex-direction:column; gap:10px; }
/* 网格卡 .res-card 与列表卡 .res-list-item 的**共用外观**（2026-10-08 从两条各自的定义里抽出）。
   两者原本各写一遍 border / 圆角 / 背景 / 链接重置 / transition，改卡片外观要改两处、极易漏改一边
   （两种视图看起来就不一致了）。
   ⚠️ 以后改卡片外观**只改这一条**，列表与网格两种视图同时生效；
      本文件内不存在其它单类 `.res-card{...}` / `.res-list-item{...}` 定义（其余都是
      `.res-card.is-media-item …` 这类 0,2,0+ 的变体），故共用规则不会被意外覆盖。
   各自独有的属性仍留在原类里：网格=overflow+纵向 flex；列表=gap/padding/min-width。 */
.res-card, .res-list-item {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-card);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
/* 悬停：高亮边框两视图一致；位移与投影有意不同（网格卡整块抬起 2px、列表条 1px），保留各自值 */
.res-card:hover, .res-list-item:hover { border-color: var(--color-accent); }
.res-list-item { display:flex; gap:16px; padding:12px; min-width:0; }
.res-list-item:hover { box-shadow:0 4px 14px rgba(0,0,0,.05); transform:translateY(-1px); }
.res-list-thumb { flex-shrink:0; width:184px; aspect-ratio:460 / 215; border-radius:8px; overflow:hidden; background:var(--color-bg-sidebar-2); align-self:flex-start; }
.res-list-thumb img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* 竖版封面：桌面端默认隐藏（列表用横图），影视条目由下方 .is-media-item 规则切换显示竖图。
   游戏条目（.is-game-item）显式保持隐藏、强制横版。 */
   ⚠️ 必须写成 `.res-list-thumb .res-list-thumb-portrait`（0,2,0），**不能**只写类名（0,1,0）——
   上面 `.res-list-thumb img { display:block }` 是 0,1,1，特异性更高，只写类名会被它反压回去
   → 会同时显示横图+竖图（竖图叠在上面），2026-09-26 实测踩坑。 */
.res-list-thumb .res-list-thumb-portrait { display: none; }
.res-list-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--color-text-dim); font-size:11px; }

/* 影视条目（电影/电视剧/动漫，.is-media-item —— 逐条按各自 category_id 判定）列表模式：
   改用小竖版封面，与移动端同一套「有竖版才换、没有就回退横版」逻辑 —— 老文章没有 portrait 时不留空白。
   宽度用移动端同款 84px / 2:3。
   ⚠️ 只有影视走竖版。游戏（.is-game-item）用下方规则**强制横版**，
      其余分类没有这两个类名、走上面的桌面端默认（也是横版）。
   ⚠️ 用逐条类名而非整页 body 类名：搜索结果是混合分类，body 类名表达不了（2026-09-30）。
   ⚠️ 2026-10-01 曾两度试行「往横版尺寸靠」（①184px 宽 + 高度自适应 ②184×86 同框 contain），
      用户看完都不满意，**已回滚到本方案（84px / 2:3）**。别再往「统一成横版尺寸」的方向改。 */
.res-list-item.is-media-item .res-list-thumb { width:84px; aspect-ratio:2 / 3; }
.res-list-item.is-media-item .res-list-thumb:has(.res-list-thumb-portrait) .res-list-thumb-cover { display:none; }
.res-list-item.is-media-item .res-list-thumb:has(.res-list-thumb-portrait) .res-list-thumb-portrait { display:block; }
.res-list-item.is-media-item .res-list-thumb:not(:has(.res-list-thumb-portrait)) { width:120px; aspect-ratio:460 / 215; }
.res-list-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.res-list-title { font-size:15px; font-weight: 500; line-height:1.4; color:var(--color-text-title); display:flex; align-items:center; gap:8px; min-width:0; }
/* min-width:0 是让超长标题能收缩出省略号的前提（flex 子项默认 min-width:auto 会撑破）。
   ⚠️ 刻意**不加 flex-grow**：标题按内容宽度，紧跟其后的 .res-list-new 徽章保持贴标题；
   分类标签靠自身 margin-left:auto 推到最右（auto margin 吸收剩余空间，无需 title 撑满）。 */
.res-list-title-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 分类页列表标题：英文名小一号 + 次级灰（与首页列表同款观感）。
   颜色由上方共用规则（.resource-item .title-en, .res-list-title-text .title-en）统一给出，
   这里只补分类页的基准字号差：正文 15px → 英文 13px。 */
.res-list-title-text .title-cn { font-size: 15px; }
.res-list-title-text .title-en { font-size: 13px; font-weight: 500; }
/* 分类页列表徽章（新增/更新）：定位与尺寸在这里，配色/动效见 tags.css（按 .tag-new / .tag-update 区分）。
   ⚠️ 原来的渐变底/动效已上移到 tags.css —— 首页与标签页的 .list-badge 与这里共用同一套配方，
      少一处硬编码；这里只留「不吃掉标题省略号」的弹性布局约束。 */
.res-list-new { flex-shrink:0; display:inline-flex; align-items:center; line-height:1.3; }
/* 摘要：在 flex 列卡片里用上下 margin:auto 把它推到「标题（顶）与信息行（底）」之间的剩余空间**垂直居中**；
   信息行仍靠自身的 margin-top:auto 沉底（不动）。右侧保留 32px 缩进与 meta 行同宽、不阶梯；左对齐不变；
   两行省略（-webkit-line-clamp）保留。 */
.res-list-summary { font-size:13px; color:var(--color-text-secondary); line-height:1.55; margin:auto 68px auto 0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* 信息行：保持原行为——margin-top:auto 把日期/版本推到卡片**最底部**（body 随缩略图高度拉伸），
   影视/游戏不同高度卡片的日期都齐底，符合用户「meta 显示在底部」的要求。无上 padding（用户要求删上间距）。 */
.res-list-meta { margin-top:auto; font-size:12px; color:var(--color-text-dim); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
/* 分类标签：与网格 .res-card-cat、详情页 .doc-info-tag.tag-cat **同源**
   （2026-10-03 三处彻底统一）。颜色全部来自 variables.css 的 --color-cat-*
   （浅色、深色两套，由主题强调色派生）；淡强调底 + 强调字 + 1px 细边 +
   静态微光（var(--color-cat-glow)），跟随主题。
   ⚠️ 刻意不带循环动效：一页 12 条，重复动画会拖慢滚动。 */
.res-list-cat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--color-cat-fg);
    background: var(--color-cat-bg);
    border: 1px solid var(--color-cat-border);
    box-shadow: var(--color-cat-glow);
}
/* 标签页行（.resource-item）内的分类标签：照搬 documents 列表模式 `.res-list-cat` 同款样式，
   靠 margin-left:auto 推到右侧（标题 .title 占 flex:1，cat 紧随徽章后居右），与列表模式右对齐一致。 */
.resource-item .res-list-cat { margin-left:auto; flex-shrink:0; }
/* ⚠️ 2026-10-01 改：分类标签从底部 meta 行移入标题栏，并向右对齐（用户要求）。
   标题文字 .res-list-title-text 不 grow（.res-list-new 徽章因此仍紧贴标题），
   cat 靠自身 margin-left:auto 吸收剩余空间推到最右；超长标题由 title 的省略号兜底，cat 位置不变。
   ⚠️ 限定 .res-list-title 作用域：member/favorites.html 复用同结构（cat 也在标题栏内）
      → 收藏页同步右对齐，两处观感一致。 */
.res-list-title .res-list-cat { margin-left:auto; flex-shrink:0; }
.res-list-date { color:var(--color-text-dim); display:inline-flex; align-items:center; gap:4px; min-width:0; }
.res-list-date svg { flex-shrink:0; }
/* 时间：单行不换行，超出容器用 … 截断（2026-10-06 用户要求「手机端时间不换行、超出的…显示」）。
   .dt-text 单独椭圆，保证前面的时钟图标不被裁掉。 */
.res-list-date .dt-text { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 版本号 / 扩展内容 / 语言 / 容量大小（列表行内）：**与详情页统一**
   （2026-10-01 用户「documents 页调用详细页中的 版本/扩展内容/语言/容量大小，统一」）。
   底色与字色改由 tags.css 的语义色类提供 —— .tag-version(+.ver-badge)、.tag-edition、
   .tag-lang、.tag-size，与详情页 .doc-info-tag.tag-* 同一套配方；本组只保留列表上下文的尺寸。
   ⚠️ 2026-10-01 用户曾要求「统一」成彩色底、并废弃灰底；**现（2026-10-01）又要求分类页恢复成
      中性灰底 + 次级字色** —— 见下方 `.documents-page ... .tag-*` 作用域覆盖（只改分类页，不动详情页）。
   ⚠️ 本组是共享类，member/favorites.html 复用 → 其模板已同步补上语义色类。
   ⚠️ 不加光晕/动效：与详情页一致仍为「文字模式」，且一页 12 条不宜重复动画（同 .res-list-cat）。 */
.res-list-lang,
.res-list-ver,
.res-list-ed,
.res-list-size {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
/* 分类页（documents-page）：版本/扩展内容/语言/容量大小 **恢复成「之前的」中性灰底 + 次级字色**
   （2026-10-01 曾按用户「统一」要求改成彩色底，现应要求去掉彩色填充，回到 2026-10-01 前的观感）。
   ⚠️ 仅作用于 .documents-page（分类/列表页的列表视图与网格视图）；详情页 .doc-detail-page 的
      .doc-info-tag.tag-* 彩色底 + 微光保持不动（用户未要求改详情页）。
   ⚠️ 列表视图标签带 .res-list-* 尺寸类、网格视图标签在 .res-card-meta 内只带语义类，两处都要覆盖；
      选择器特异性 (0,3,0) 高于 tags.css 的语义类 (0,1,0)，可正确压回彩色底。 */
.documents-page .res-list-meta .tag-version,
.documents-page .res-list-meta .tag-edition,
.documents-page .res-list-meta .tag-lang,
.documents-page .res-list-meta .tag-size,
.documents-page .res-card-meta .tag-version,
.documents-page .res-card-meta .tag-edition,
.documents-page .res-card-meta .tag-lang,
.documents-page .res-card-meta .tag-size {
    background: var(--color-bg-tag);
    color: var(--color-text-secondary);
    box-shadow: none;
}
.res-item-icon { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* 首页列表模式（影视 section）：小竖版封面。与 .res-item-icon 同尺寸量级，
   但用 2:3 竖版比例、圆角矩形（不是圆），一眼能认出是海报而不是图标。 */
.res-item-portrait { width: 28px; height: 42px; border-radius: 4px; object-fit: cover; object-position: center; flex-shrink: 0; background: var(--color-bg-sidebar-2); }
.res-card-date {
    font-size: 12px; color: var(--color-text-dim);
    display: inline-flex; align-items: center; gap: 4px;
    min-width: 0; max-width: 100%; overflow: hidden;
}
.res-card-date svg { flex-shrink: 0; }
/* 时间：单行不换行，超出卡片用 … 截断（2026-10-06 用户要求）。.dt-text 单独椭圆，图标不被裁。 */
.res-card-date .dt-text { display:block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 网格卡独有：封面要裁进圆角内 + 内容纵向排布（共用外观见上方 .res-card, .res-list-item） */
.res-card { overflow:hidden; display:flex; flex-direction:column; }
.res-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.res-card-cover { position:relative; aspect-ratio:460 / 215; background:var(--color-bg-sidebar-2); overflow:hidden; }
.res-card-cover img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* 影视条目（.is-media-item）网格模式：封面换成竖版 2:3。
   模板只在有 portrait 时才输出 .res-card-cover-portrait，所以用 :has() 判断：
   有竖版 → 封面区改 2:3 且只显示竖版（隐藏横版图，避免两张叠在一起）；
   没有竖版 → 保持原横版 460/215，老文章不受影响（不留空白、不变形）。
   ⚠️ 与列表模式那段是同一套约定，改一处要同步看另一处。 */
.res-card.is-media-item .res-card-cover:has(.res-card-cover-portrait) { aspect-ratio:2 / 3; }
.res-card.is-media-item .res-card-cover:has(.res-card-cover-portrait) .res-card-cover-portrait { display:block; }
.res-card.is-media-item .res-card-cover:has(.res-card-cover-portrait) .res-card-cover-land { display:none; }
/* 竖版封面：默认隐藏（网格非影视分类用横图）。模板只要有 portrait 就会输出这张 img，
   若不隐藏，它会盖在横版图上（两张同尺寸叠一起）→ 会显示成竖版，与预期相反。
   ⚠️ 必须写成 `.res-card-cover .res-card-cover-portrait`（0,2,0）而**不能**只写类名（0,1,0）——
   上面 `.res-card-cover img { display:block }` 是 0,1,1，特异性更高，只写类名会被它反压回去（2026-09-26 实测踩坑）。
   ⚠️ 与 .res-list-thumb-portrait 是同一套约定，改一处要同步看另一处。 */
.res-card-cover .res-card-cover-portrait { display: none; }
.res-card-cover-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--color-text-dim); font-size:12px; }

/* 游戏条目（.is-game-item，顶级 13 + 全部子分类）：强制横版 cover，即使文章有 portrait
   也不用竖版（2026-09-28 用户裁定）。配合 responsive.css 的「网格一行 4 个」硬规则。
   - 列表模式：缩略图恢复横版 460/215，并显式隐藏竖图
   - 网格模式：封面区恢复横版，并显式隐藏竖图
   ⚠️ 手机端（≤991px）的竖版规则在 responsive.css 里是**不分分类**的，
      已在那边补了 .is-game-item 覆盖，小屏同样横版。 */
.res-list-item.is-game-item .res-list-thumb { width:184px; aspect-ratio:460 / 215; }
.res-list-item.is-game-item .res-list-thumb .res-list-thumb-portrait { display:none; }
.res-card.is-game-item .res-card-cover { aspect-ratio:460 / 215; }
.res-card.is-game-item .res-card-cover .res-card-cover-portrait { display:none; }

/* 搜索结果页（body.is-search-mixed，即 /documents?kw=）**网格统一竖版**（2026-10-01 用户裁定）：
   结果页同时含游戏（.is-game-item 横版 460:215）与影视（.is-media-item 竖版 2:3），
   两种比例混在一行会被最高的竖版卡拉高整行，横版游戏卡只能靠 align-items:start 避免被拉伸。
   这里把**所有**卡的封面区统一成 2:3（Steam 竖版海报本身就是 2:3，见 uploads/steam/portrait/），
   整行高度自然一致；没有 portrait 的少量条目（约 2%）保持横版 460:215 不裁切，只影响那一张卡。
   注：仅网格卡（.res-card）；列表视图（.res-list-item）不在此列，仍按各自分类用横/竖版。
   特异性必须压过上面 .is-game-item（0,3,0）与 .is-media-item（0,4,0）的分组规则，
   故带 body 类前缀写成 0,4,1 / 0,5,1。⚠️ 与响应式断点无冲突（responsive.css 未改封面比例）。 */
body.is-search-mixed .res-card .res-card-cover:has(.res-card-cover-portrait) { aspect-ratio:2 / 3; }
body.is-search-mixed .res-card .res-card-cover:has(.res-card-cover-portrait) .res-card-cover-portrait { display:block; }
body.is-search-mixed .res-card .res-card-cover:has(.res-card-cover-portrait) .res-card-cover-land { display:none; }
/* 搜索结果页 列表模式 也统一竖版 portrait（2026-10-01 用户裁定，与网格同口径）：
   结果页游戏/影视混排，所有行缩略图统一成 84px / 2:3 竖版框，
   有 portrait 用竖图、无 portrait（多为游戏）回退 cover 并约束进同一竖版框（object-fit:cover 裁切），
   这样游戏和影视在列表模式也显示同一套窄竖版缩略图样式。
   特异性 0,4,0 压过上方 .is-media-item/.is-game-item 的 0,3,0 分组规则；须置于其后以覆盖 .is-media-item 的 :not(:has) 回退（同样 0,4,0）。 */
body.is-search-mixed .res-list-item .res-list-thumb { width:84px; aspect-ratio:2 / 3; }
body.is-search-mixed .res-list-item .res-list-thumb .res-list-thumb-cover { display:block; }
body.is-search-mixed .res-list-item .res-list-thumb .res-list-thumb-portrait { display:block; }
body.is-search-mixed .res-list-item .res-list-thumb:has(.res-list-thumb-portrait) .res-list-thumb-cover { display:none; }
/* 网格模式分类标签：叠在封面左上角。默认隐藏，鼠标悬停卡片（或键盘聚焦）才浮现 ——
   与版本信息（.res-card-meta）、首页卡片遮罩行为一致，避免封面被常驻标签压住。
   ⚠️ 2026-10-07：配色改为「浅色文字 + 深色压暗底」，与首页网格卡 .grid-card-cat 同一观感。
      原因：本标签直接压在**封面图**上，封面明暗完全不可控；此前沿用的淡强调底
      （--color-cat-bg 是 accent 12% 透明）遇到亮封面就与图糊在一起，用户反馈
      「鼠标移上去后分类标签看不清」。深底 + 白字对任何封面都能保证对比度。
      列表模式 .res-list-cat / 详情页 .doc-info-tag.tag-cat 压在**纯色卡片底**上，不受影响，
      故此处有意与它们分叉，不要为了「三处同源」把这里改回透明底。
   hover 只做显隐，不再改底色/描边/亮度。 */
.res-card-cat {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    /* --color-text-invert 在浅/深两套主题下都是 #FFFFFF，正好当「深底白字」的字色 */
    color: var(--color-text-invert);
    background: rgba(0, 0, 0, .68);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease;
}
/* hover / 聚焦：仅浮现标签（卡片本体的位移由 .res-card:hover 负责） */
.res-card:hover .res-card-cat,
.res-card:focus-within .res-card-cat {
    opacity: 1;
    visibility: visible;
}
.res-card-body { padding:12px 14px 10px; flex:1; display:flex; flex-direction:column; }
/* 网格卡标题：**中文名一行、英文名一行**（用户 2026-10-01，网格模式已隐藏简介，改为两行标题）。
   英文小一号 + 次级色，各自单行省略。子选择器作用域限定在 .res-card-title 内，
   不污染列表行内联用的全局 .title-cn/.title-en（那套是行内 inline 排版，见 .resource-item）。 */
.res-card-title { font-size:14px; font-weight: 500; line-height:1.45; margin:0 0 6px; color:var(--color-text-title); }
.res-card-title .title-cn { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res-card-title .title-en { display:block; margin-top:2px; font-size:12px; font-weight:500; color:var(--color-text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 底栏：只剩日期（2026-10-01 已移除右侧「查看 ›」、并删简介）。
   **去掉原 min-height:38px** —— 那是为「日期在窄卡折两行」预留的 2 行高度，
   删简介后它会在**英文名与日期之间**撑出一段空白（用户截图指出的间距问题）。
   现日期紧跟标题、卡底不再有额外留白，整体更紧凑。 */
.res-card-foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:11px; color:var(--color-text-dim); }
.res-card-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;                          /* 标签间距 4px，更紧凑 */
    align-items: center;
    padding: 6px 4px;                 /* 左右内边距 4px，更紧凑 */
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;                       /* 默认隐藏，鼠标移上去显示 */
    transition: opacity .18s ease;
}
.res-card:hover .res-card-meta,
.res-card:focus-within .res-card-meta {
    opacity: 1;
}
/* 网格遮罩标签：与列表模式、详情页统一（2026-10-01 用户「统一」）——
   底色与字色来自 tags.css 的语义色类（.tag-version+.ver-badge / .tag-edition /
   .tag-lang / .tag-size），本选择器只保留尺寸。
   ⚠️ 原先的灰蓝底 --color-bg-card-2 + 主题色字（--color-accent）已废弃，不要再写回。 */
.res-card-meta > span {
    display: inline-block;
    border-radius: 6px;
    padding: 2px 9px;
    font-weight: 700;
}
/* 年份（影视分类）：**不参与本次统一**，沿用「灰蓝底 + 次级字色」的弱化观感，
   避免与版本号/扩展内容等语义色块抢眼（2026-09-26 定的调子，保持不动）。 */
.res-card-meta > span.res-card-year {
    background: var(--color-bg-card-2);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-base);
}