/* 生产版（由本地 demo 版构建，已去掉 ?look 开关）—— 构建于 2026-10-06 */
/* ============================================================================
 * 步骤 3 · 卡片几何统一 + 线性图标（**本机预览，未上线**）
 *   开关：跟步骤 1/2 同一个「原版 / 新版」（左下角胶囊 或 ?look=0|1）
 *
 * 实测到的三处不一致（都不是审美问题，是数字对不上）：
 *   ① 封面框比例：分类页卡片 246×138 = 16:9，游戏库卡片 246×115 = 2.139 —— 而封面素材
 *      本来就是 Steam 官方横版 460×215（2.139）。16:9 那个框会把封面左右各裁掉约 17%。
 *   ② 卡片高度：分类页卡片被 `qdm-desktop-refresh` 的 min-height:268px 撑着，
 *      内容只有 ~237px → 「查看文章」下面白留 31px 死空白。
 *   ③ 专题总览卡（游戏库首页那 6 张）：圆角 11px / 底色 #1f222a / 无阴影，和其它卡片
 *      （14px / #181a20 / 双层阴影）不是一套；页脚那行字号只有 10px，太小。
 *
 * 图标：站上排序栏、「换一批」、卡片按钮都只有文字（有的用「→」字符顶上），
 *       这里换成内联 SVG 线性图标（Tabler 风格，stroke=currentColor，跟着字号/颜色走）。
 * ========================================================================== */

/* ---------- ① 封面框统一到 460×215 ---------- */
:root .article-card .media-placeholder,
:root .qdm-topic-card-media {
  aspect-ratio: 460 / 215;
  height: auto;
}
:root .article-card .media-placeholder img,
:root .qdm-topic-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 顶角圆角跟卡片对齐（原来 11px vs 卡片 14px，中间会露出一道） */
:root .article-card .media-placeholder,
:root .article-card .qdm-card-media-link,
:root .qdm-topic-card-media {
  border-radius: 13px 13px 0 0;
}

/* ---------- ② 卡片竖向节奏（三类卡片各按自己的按钮定位方式来） ----------
   主包 CSS：.article-card>.article-link { position:absolute; left/right:10px; bottom:10px; height:30px }
   —— 列表页（分类页/首页）那张卡的按钮是**绝对定位**钉在卡片底部的；
   而游戏库卡片（.qdm-library-card）的按钮是**正常流**里的（framework-fix 那层改成 margin-top:auto）。
   两者必须分开给下内边距，否则要么标签压按钮，要么按钮下面白留一大截。

   规格（2026-10-06 定）：
     列表卡：封面115 · 12 · 标题20 · 6 · 摘要35 · 14 · 标签22 · 14 · 按钮30 · 11 → 卡片 ~279
     游戏库卡：封面115 · 12 · 标题20 · 10 · 标签22 · 12 · 按钮30 · 15 → 卡片 ~236（与原版一致） */
:root .content-column .article-card:not(.qdm-library-card) {
  min-height: 0;
  padding-bottom: 54px;          /* 给绝对定位按钮留出 10(bottom) + 30(高) + 14(间距) */
}
:root .content-column .qdm-library-card {
  min-height: 0;
  padding-bottom: 14px;          /* 按钮在正常流里，下内边距回到原来的 14px */
}

/* 卡片里那排标签：胶囊收窄一点（原来 12px 字号 + 8px 内边距显得肥） */
:root .article-card .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}
:root .article-card .tag-row > span {
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 18px;
  /* 颜色随主题走（亮色模式下老层的 #818cf8 压在浅底上会发飘） */
  color: var(--qdm-tag-fg, #818cf8);
  border: 1px solid var(--qdm-tag-line, rgba(99, 102, 241, .30));
  background: var(--qdm-tag-bg, rgba(99, 102, 241, .15));
}
/* ⚠️ 这条必须写在上面那条**之后**：两条同为 (0,3,0)，靠源码顺序定胜负
   （2026-10-06 踩过：写在前面被 margin-bottom:0 盖掉，游戏库卡的标签紧贴按钮） */
:root .qdm-library-card .tag-row { margin-bottom: 12px; }

/* ---------- ②b 工具栏和资源卡片之间留出间距 ---------- */
/* 原来两者间距是 0（工具栏底 = 卡片区顶），排序按钮变成胶囊后紧贴在一起很难看 */
:root .content-column .toolbar { margin-bottom: 18px; }
:root .content-column .toolbar .sort { margin-top: 10px; }

/* 卡片按钮：统一成"描边胶囊 → hover 变品牌渐变 + 箭头前移" */
:root .article-card .article-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .14));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .05));
  color: var(--qdm-strong, #e5e7eb);
  font-size: 13px;
  font-weight: 700;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
:root .article-card .article-link:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #6366f1, #e9348e);
  color: #fff;
  box-shadow: 0 10px 24px rgba(99, 102, 241, .38);
}
/* 卡片按钮里**不再放箭头图标**（用户 2026-10-06 明确不要），这里不再有 .qdm-icon 规则 */

/* ---------- ③ 专题总览卡：跟其它卡片同一套质感 ---------- */
:root .qdm-topic-card {
  border-radius: 14px;
  border-color: var(--qdm-line-strong, rgba(255, 255, 255, .095));
  background: var(--qdm-card, #181a20);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
:root .qdm-topic-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, .50);
  background: var(--qdm-card-hover, #1b1e28);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .50),
    0 0 0 1px rgba(99, 102, 241, .22) inset,
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
:root .qdm-topic-card-copy small { font-size: 12px; line-height: 1.45; }
:root .qdm-topic-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}
:root .qdm-topic-card-footer em { font-style: normal; font-size: 12px; color: var(--qdm-muted, #9ca3af); }
:root .qdm-topic-card-footer b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--qdm-tag-fg, #c7d2fe);
  font-size: 12px;
  font-weight: 700;
}
:root .qdm-topic-card:hover .qdm-topic-card-footer b { color: #fff; }

/* ---------- ④ 排序栏：文字 → 图标 + 胶囊 ---------- */
:root .sort > button,
:root .toolbar .sort button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--qdm-muted, #9ca3af);
  font-size: 13px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
:root .sort > button:hover {
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .06));
  color: var(--qdm-strong, #e5e7eb);
}
:root .sort > button.is-active,
:root .sort > button[aria-pressed="true"],
:root .sort > button.active {
  border-color: rgba(99, 102, 241, .45);
  background: rgba(99, 102, 241, .16);
  color: #fff;
  font-weight: 700;
}
:root .qdm-icon {
  /* ⚠️ 兜底尺寸：SVG 没写 width/height 时，浏览器按替换元素默认尺寸（300×150）渲染 →
     卡片按钮上那个"白色巨型箭头"就是这么来的（2026-10-06）。默认按 1em 走，具体位置再覆盖。 */
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.125em;
}
:root .sort .qdm-icon { width: 14px; height: 14px; }

/* ---------- ⑤ 侧栏「换一批」 ---------- */
:root .side-title button,
:root .side-card .side-title button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  color: var(--qdm-tag-fg, #c7d2fe);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
:root .side-title button:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .16);
  color: #fff;
}
:root .side-title button .qdm-icon { width: 13px; height: 13px; }
:root .side-title button:hover .qdm-icon { transform: rotate(-40deg); }
:root .side-title button .qdm-icon { transition: transform .2s ease; }