/* 生产版（由本地 demo 版构建，已去掉 ?look 开关）—— 构建于 2026-10-06 */
/* ============================================================================
 * 步骤 1 · 首屏观感（**只在本机预览目录，未上线**）
 *   开关：左下角胶囊「原版 / 新版」，或地址栏 ?look=0|1
 *
 * 已定稿（2026-10-06 用户确认）：
 *   ✓ hero：220→272px、圆角 16→20、4 条模板渐变 → 站点同色系三段渐变 + 光斑 + 顶部高光
 *   ✓ 主标 32→42px，标题改用自托管 思源黑体 900
 *   ✓ 卡片：圆角 12→14、双层阴影 + 内高光、hover 品牌色描边 + 上浮 3px、标题 15px
 *   ✗ 站酷庆科黄油体：已否决，字体文件与样式都已删除
 *
 * 上线时：把下面选择器里的 `:root ` 前缀去掉，作为一个正式覆盖层即可。
 * ========================================================================== */

@font-face {
  font-family: "QDM Sans SC 900";
  /* 子集化后的思源黑体 900：1097KB → 230.7KB（覆盖站上全部文字，原字体能渲染的字一个没少）。
     ⚠️ /assets/ 是 Cache-Control: immutable，换字体文件必须改这里的 ?v=，
     否则老访客浏览器里还是旧的那 1MB 文件。 */
  src: url("/assets/fonts/noto-sans-sc-900.woff2?v=2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

/* ---------- ① hero ---------- */
:root .hero {
  height: 272px;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, .10);
  overflow: hidden;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  background:
    radial-gradient(120% 150% at 10% 0%, rgba(99, 102, 241, .55), transparent 58%),
    radial-gradient(90% 130% at 92% 100%, rgba(233, 52, 142, .40), transparent 62%),
    linear-gradient(116deg, #141733 0%, #262a5f 46%, #4a2a63 100%);
}
:root .hero-2 {
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(139, 92, 246, .52), transparent 58%),
    radial-gradient(90% 130% at 90% 100%, rgba(233, 52, 142, .45), transparent 62%),
    linear-gradient(116deg, #1a1533 0%, #3a2358 46%, #6b2a5f 100%);
}
:root .hero-3 {
  background:
    radial-gradient(120% 150% at 10% 0%, rgba(56, 189, 248, .38), transparent 58%),
    radial-gradient(90% 130% at 92% 100%, rgba(99, 102, 241, .45), transparent 62%),
    linear-gradient(116deg, #0f1730 0%, #22305f 46%, #33356e 100%);
}
:root .hero-4 {
  background:
    radial-gradient(120% 150% at 12% 0%, rgba(99, 102, 241, .58), transparent 58%),
    radial-gradient(90% 130% at 90% 100%, rgba(56, 189, 248, .34), transparent 62%),
    linear-gradient(116deg, #12163a 0%, #2b3480 48%, #56509f 100%);
}
:root .hero-grid { opacity: .55; }
:root .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(80% 120% at 18% 6%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(180deg, transparent 46%, rgba(0, 0, 0, .34) 100%);
}
:root .hero-copy { padding-left: 34px; }
:root .hero-copy > span {
  position: relative;
  padding-left: 14px;
  color: #c7d2fe;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .30em;
}
:root .hero-copy > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 14px;
  margin-top: -7px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #e9348e);
}
:root .hero-copy strong {
  display: block;
  margin-top: 12px;
  font-size: 42px;
  line-height: 1.16;
  letter-spacing: .01em;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .40);
}
:root .hero-copy p {
  margin-top: 12px;
  color: rgba(233, 236, 245, .74);
  font-size: 16px;
}

/* ---------- ② 卡片质感 ---------- */
:root .article-card {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, .095);
  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 .article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, .50);
  background-color: #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 .article-card h3 {
  font-size: 15px;
  line-height: 1.35;
}

/* ---------- ③ 标题字体（思源黑体 900，自托管） ---------- */
:root .hero-copy strong,
:root .brand-name strong,
:root .article-card h3,
:root .qdm-topic-card strong,
:root .section-heading strong {
  font-family: "QDM Sans SC 900", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 900;
}

/* ============================================================================
 * 步骤 2 · 详情页（同一个开关下）
 *   实测问题：圆角 13/12/10 混用；评价块与 FAQ 完全没有样式（960×121 裸的）；
 *             详情标题是衬线体 Noto Serif SC（和首屏定的思源黑体 900 不是一路）；
 *             标签 gap 7px、正文 13.5px 偏小。
 *   统一规则：大区块圆角 14px / 控件 10px / 标签 pill；区块标题统一"品牌色竖条 + 15px"
 * ========================================================================== */

/* ① 圆角统一到大区块 14px */
:root .qdm-game-video,
:root .qdm-game-intro,
:root .qdm-game-download-panel,
:root .qdm-game-related-card,
:root .qdm-game-poster,
:root .qdm-game-faq,
:root .qdm-game-review {
  border-radius: 14px;
}
:root .qdm-game-gallery-thumbs img,
:root .qdm-game-media img {
  border-radius: 10px;
}
:root .qdm-game-share { border-radius: 10px; }

/* ② 评价块：从"裸的"变成卡片 */
:root .qdm-game-review {
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .008));
}

/* ③ FAQ / 章节容器：卡片化 + 行分隔 */
:root .qdm-game-faq {
  padding: 6px 20px 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, .008));
}
:root .qdm-game-faq-list > * + * {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-top: 14px;
  margin-top: 14px;
}

/* ④ 区块标题：品牌色竖条 + 统一字号 */
:root .qdm-game-section-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #eef0f6;
}
:root .qdm-game-section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #e9348e);
}

/* ⑤ 详情页标题：与首屏统一为思源黑体 900 */
:root .qdm-game-hero h1,
:root .qdm-library-detail > .article-main-column h1,
:root .qdm-game-hero-copy strong {
  font-family: "QDM Sans SC 900", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: .005em;
}

/* ⑥ meta 行（容量/日期/下载/浏览）：从裸文字改成小胶囊 */
:root .qdm-game-meta-line { gap: 8px; }
:root .qdm-game-meta-item {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 999px;
  background: rgba(255, 255, 255, .035);
  font-size: 12.5px;
}

/* ⑦ 标签：间距统一 8px、底色/描边更柔和 */
:root .qdm-game-hero-tags { gap: 8px; }
:root .qdm-game-hero-tags span {
  padding: 5px 12px;
  font-size: 11.5px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .06);
  color: #dfe2ea;
}
:root .qdm-game-hero-tags span:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .14);
}

/* ⑧ 正文与英文名：可读性 + 层级 */
:root .qdm-game-intro p {
  font-size: 14px;
  line-height: 1.82;
  color: var(--qdm-body, #c3c7d1);
}
:root .qdm-game-title-en {
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--qdm-muted, #9aa1b1);
}

/* ============================================================================
 * 步骤 3 · 详情页收尾（**只细化外观，不动任何结构 / 不删任何块**）
 *   实测现状（2026-10-06）：
 *     · 三种深色混用：简介卡 & 相关推荐卡 #1f222a、下载面板 #141519、卡片规格 #181a20
 *     · 缩略图按钮圆角 8px（规格是控件 10px）
 *     · 下载面板两个瓦片间距只有 4px
 *     · 返回条是两个裸链接（12px、无底无边）
 *   这里全部按"同一套规格"收口：大块 14px / 控件 10px / 底色 #181a20 / 面板略深一档。
 * ========================================================================== */

/* ① 三种深色 → 两种（卡片 #181a20，面板 #15171d 略深一档）；颜色全部随主题走 */
:root .qdm-game-intro,
:root .qdm-game-related-card {
  background: var(--qdm-card, #181a20);
}
:root .qdm-game-download-panel {
  background: var(--qdm-panel, #15171d);
}

/* ② 缩略图按钮：圆角统一 10px + hover/选中态 */
:root .qdm-game-gallery-thumbs button {
  border-radius: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, outline-color .18s ease;
  outline: 1px solid transparent;
  outline-offset: 1px;
}
:root .qdm-game-gallery-thumbs button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45);
}
:root .qdm-game-gallery-thumbs button.is-active,
:root .qdm-game-gallery-thumbs button[aria-current="true"] {
  outline-color: rgba(99, 102, 241, .75);
}

/* ③ 下载面板：瓦片间距 4→8px，瓦片本身加 hover（点击后弹网盘扫码窗） */
:root .qdm-game-download-panel { gap: 8px; padding: 12px; }
:root .qdm-game-download-tile {
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
  border-radius: 10px;
  background: var(--qdm-card, #181a20);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
:root .qdm-game-download-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, .55);
  background: var(--qdm-card-hover, #1b1e28);
}
/* 未解锁时是灰的，别让 hover 误导 */
:root .qdm-game-download-tile:disabled,
:root .qdm-game-download-tile[aria-disabled="true"] {
  opacity: .75;
}
:root .qdm-game-download-tile:disabled:hover,
:root .qdm-game-download-tile[aria-disabled="true"]:hover {
  transform: none;
  border-color: var(--qdm-line, rgba(255, 255, 255, .07));
  background: var(--qdm-card, #181a20);
}

/* ④ 返回条：两个裸链接 → 小胶囊（结构与文字都不动，只加外形） */
:root .qdm-game-returnbar a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .10));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .04));
  color: var(--qdm-body, #c7cbd6);
  font-size: 12px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
:root .qdm-game-returnbar a:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .16);
  color: #fff;
}
:root .qdm-game-returnbar { gap: 10px; }

/* ⑤ 相关推荐横排：卡片底色统一后补上"和别处一致"的 hover 上浮 */
:root .qdm-game-related-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
:root .qdm-game-related-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, .50);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .48);
}

/* ============================================================================
 * 步骤 3 · 亮色模式修复（2026-10-06）
 *   实测问题：点右上角「亮」之后站点只换了文字变量（--text 变深），
 *   而卡片底色是 qdm-desktop-refresh-20260927.css 里**写死的 #181a20** →
 *   深字压深底，实测标题对比度只有 1.22:1（基本看不见）。
 *   做法：本层统一用一套"随主题走"的变量 --qdm-*，深色/亮色各自取值；
 *         再把老层里写死的几个表面（卡片、专题卡、封面占位）在亮色下覆盖掉。
 * ========================================================================== */

/* 深色（默认）取值：和现在线上看到的一致 */
:root {
  --qdm-card: #181a20;
  --qdm-card-hover: #1b1e28;
  --qdm-panel: #15171d;
  --qdm-line: rgba(255, 255, 255, .07);
  --qdm-line-strong: rgba(255, 255, 255, .095);
  --qdm-strong: #f3f4f6;
  --qdm-body: #c3c7d1;
  --qdm-muted: #9ca3af;
  --qdm-faint: #7b8291;
  --qdm-tag-bg: rgba(99, 102, 241, .15);
  --qdm-tag-line: rgba(99, 102, 241, .30);
  --qdm-tag-fg: #818cf8;
  --qdm-chip-bg: rgba(255, 255, 255, .04);
  --qdm-chip-line: rgba(255, 255, 255, .10);
}
/* 亮色取值：站点自己的 --panel/--text/--line 就是这套，这里对齐过去 */
:root .site.light {
  --qdm-card: var(--panel);
  --qdm-card-hover: var(--panel-2);
  --qdm-panel: var(--panel-2);
  --qdm-line: var(--line);
  --qdm-line-strong: rgba(30, 32, 42, .14);
  --qdm-strong: var(--text);
  --qdm-body: #4a4f5c;
  --qdm-muted: var(--muted);
  --qdm-faint: #8a8f9c;
  --qdm-tag-bg: rgba(99, 102, 241, .12);
  --qdm-tag-line: rgba(99, 102, 241, .35);
  --qdm-tag-fg: #4f46e5;
  --qdm-chip-bg: rgba(30, 32, 42, .05);
  --qdm-chip-line: rgba(30, 32, 42, .12);
}

/* 老层写死的表面 → 亮色下覆盖成主题色（深色不动，保持现状） */
/* 实测：qdm-desktop-refresh-20260927.css 里有 29 处写死颜色，而且页面底色 / 页头 / 页脚
   用的是**字面量**（不是变量），所以 .site.light 的变量根本压不动 → 亮色下整页还是黑的。 */
:root .site.light {
  background:
    radial-gradient(circle at 7% 36%, rgba(79, 70, 229, .07), transparent 27%),
    radial-gradient(circle at 88% 16%, rgba(56, 189, 248, .07), transparent 23%),
    #eef0f4;
}
:root .site.light .site-header {
  background: rgba(255, 255, 255, .88);
  border-bottom-color: rgba(30, 32, 42, .08);
}
:root .site.light .nav-button { color: var(--muted); }
:root .site.light .nav-entry:hover .nav-button,
:root .site.light .nav-button:focus-visible { color: var(--text); }
:root .site.light .site-footer {
  background: rgba(255, 255, 255, .92);
  border-top-color: rgba(30, 32, 42, .08);
}
:root .site.light .site-footer a { color: var(--muted); }
:root .site.light .site-footer a:hover { color: var(--text); }
:root .site.light .ranking,
:root .site.light .resource-card,
:root .site.light .comments,
:root .site.light .side-card,
:root .site.light .article-body:not(.qdm-library-detail),
:root .site.light .related-section,
:root .site.light .download-box-free,
:root .site.light .qdm-search-dialog { background: var(--panel); }
:root .site.light .ranking h3,
:root .site.light .qdm-utility-copy strong { color: var(--text); }
:root .site.light .qdm-search-modal { background: rgba(22, 26, 36, .45); }
:root .site.light .qdm-search-form input {
  background: var(--panel-2);
  color: var(--text);
  border-color: rgba(30, 32, 42, .12);
}
:root .site.light .qdm-search-close,
:root .site.light .qdm-search-message { color: var(--muted); }
:root .site.light .qdm-empty-lines i { background: rgba(30, 32, 42, .10); }

:root .site.light .article-card,
:root .site.light .qdm-library-card,
:root .site.light .qdm-topic-card,
:root .site.light .qdm-lib-skeleton-card {
  background: var(--panel);
  border-color: var(--line);
}
:root .site.light .article-card:hover,
:root .site.light .qdm-topic-card:hover {
  background: var(--panel-2);
}
:root .site.light .media-placeholder {
  background: linear-gradient(135deg, #e7eaf1, #f4f6fa);
  border-color: rgba(30, 32, 42, .08);
}
:root .site.light .media-placeholder.has-image { background: #eef0f4; }
:root .site.light .qdm-lib-skeleton-cover,
:root .site.light .qdm-lib-skeleton-line,
:root .site.light .qdm-lib-skeleton-head i,
:root .site.light .qdm-lib-skeleton-head b {
  background: rgba(30, 32, 42, .08);
}
:root .site.light .qdm-lib-skeleton-head em { background: rgba(30, 32, 42, .05); }
:root .site.light .qdm-game-poster,
:root .site.light .qdm-game-video,
:root .site.light .qdm-game-download-panel { background: var(--panel-2); }

/* ============================================================================
 * 步骤 4 · 文章页 /article/<id>（**只加外观，不动结构、不删块**）
 *   实测现状（2026-10-06，/article/251）：
 *     · 正文卡 .article-body 圆角 12px（规格 14px）、段落行高 normal（没调过）、段落色 #9ca3af 偏暗
 *     · 横幅里「资源」「分享」两个方块（48×31，圆角 0）
 *     · 「关注」按钮方形；「登录后解锁」按钮圆角 19px —— 两个按钮不是一套
 *     · .freshness-notice 圆角 7px；里面 time 是橙色胶囊、留言是默认下划线链接（和全站链接风格不统一）
 *     · .copyright-box 无圆角无边距层次
 *   文章页用的是独立的布局（.article-hero / .article-layout / .article-body / .article-sidebar），
 *   和详情页不是同一套类名，所以这里单独收口，同样按"大块 14px / 控件 10px / 胶囊 999px"的规格。
 * ========================================================================== */

/* ① 正文卡：圆角对齐规格 + 底色随主题 */
/* ⚠️ 必须排除详情页！游戏库详情页的主列也是 `<article class="article-body qdm-library-detail">`，
   两边**共用 .article-body 这个类名**，而详情页那一列 padding 是 0 ——
   直接写 .article-body 会给详情页套上圆角+底色+1px 边框，内容全贴着边框
   （2026-10-06 上线后用户反馈"全部卡边边"，就是这么来的）。 */
:root .article-body:not(.qdm-library-detail) {
  border-radius: 14px;
  background: var(--qdm-card, #181a20);
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
}
/* 正文可读性：行高 1.8、颜色提亮一档（原来 #9ca3af / normal）——同样排除详情页 */
:root .article-body:not(.qdm-library-detail) p {
  line-height: 1.8;
  color: var(--qdm-body, #c3c7d1);
}
:root .article-body:not(.qdm-library-detail) p + p { margin-top: 14px; }

/* ② 横幅：两个方块 → 小胶囊；标题用站点统一的 900 字重字体 */
:root .article-hero-copy > div > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .05));
  color: var(--qdm-body, #c3c7d1);
  font-size: 13px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
:root .article-hero-copy > div > span:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .16);
  color: #fff;
}
:root .article-hero-copy h1 {
  font-family: "QDM Sans SC 900", Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 900;
  letter-spacing: .01em;
}
:root .article-hero-copy p { color: var(--qdm-muted, #9ca3af); }

/* ③ 作者行：关注按钮与全站控件同规格（原来是个粉底方块） */
:root .author-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  height: 34px;
  border: 1px solid rgba(233, 52, 142, .45);
  border-radius: 999px;
  background: rgba(233, 52, 142, .10);
  color: #ffd9ec;
  font-size: 13px;
  font-weight: 700;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
:root .author-bar button:hover {
  border-color: transparent;
  background: linear-gradient(135deg, #e9348e, #6366f1);
  color: #fff;
  transform: translateY(-1px);
}
:root .author-bar .author-avatar {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, .35), 0 6px 16px rgba(0, 0, 0, .35);
}
:root .author-bar small { color: var(--qdm-muted, #9ca3af); }

/* ④ 资源解锁卡：圆角对齐 + 标签/按钮/说明统一 */
:root .resource-card {
  border-radius: 14px;
  background: var(--qdm-card, #181a20);
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
}
:root .resource-card > span:first-child,
:root .resource-card .real-resource-tag {
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 700;
}
:root .resource-card strong { color: var(--qdm-strong, #f3f4f6); }
:root .resource-card small { color: var(--qdm-muted, #9ca3af); }
:root .resource-card button {
  border-radius: 999px;
  padding: 0 18px;
  height: 38px;
  font-size: 13.5px;
  font-weight: 700;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
:root .resource-card button:not(:disabled):hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(99, 102, 241, .38);
}

/* ⑤ 分享说明块：给一点层次（原来是一块没有边距感的文字） */
:root .copyright-box {
  padding: 16px 18px;
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .06));
  border-radius: 14px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .025));
}
:root .copyright-box strong { color: var(--qdm-strong, #f3f4f6); font-size: 14px; }
:root .copyright-box p { color: var(--qdm-muted, #9ca3af); line-height: 1.7; }

/* ⑥ 时效提示条：圆角 7→10px，加左侧琥珀色标识；时间做胶囊、留言按全站链接风格 */
:root .freshness-notice {
  border-radius: 10px;
  border-left: 3px solid rgba(245, 158, 11, .65);
  background: var(--qdm-panel, rgba(18, 20, 26, .78));
}
:root .freshness-notice p { color: var(--qdm-body, #c3c7d1); line-height: 1.65; }
:root .freshness-notice time {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
:root .freshness-notice a {
  color: var(--qdm-tag-fg, #818cf8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .16s ease, color .16s ease;
}
:root .freshness-notice a:hover {
  color: var(--qdm-strong, #fff);
  border-bottom-color: currentColor;
}

/* ⑦ 侧栏目录：目录项加 hover（原来纯文字没反馈） */
:root .side-card.toc a {
  display: flex;
  align-items: center;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--qdm-muted, #9ca3af);
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}
:root .side-card.toc a:hover {
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .05));
  color: var(--qdm-strong, #fff);
  padding-left: 14px;
}

/* ============================================================================
 * 步骤 5 · 登录 / 注册页 /login /register（**只加外观，不动结构**）
 *   实测现状：页面本身有设计（.login-card 1080×610 圆角 20 + 底色 + 阴影，
 *   左侧 .login-visual 欢迎区 + 右侧 .login-form-wrap 表单），
 *   只是控件规格和全站不统一：输入框圆角 8px / 字号 13px（规格是 10px / 14px）、
 *   复选框圆角 0、验证码「换一张」是个 0 圆角裸按钮、底部协议小字只有 11px。
 * ========================================================================== */

/* ① 表单控件：圆角 8→10px、字号 13→14px、聚焦用品牌色描边 */
/* ⚠️ 输入框很多**没有 type 属性**（默认就是 text），所以 [type=text] 匹配不到 →
   必须同时选 :not([type])，否则样式和亮色覆盖都会漏（2026-10-06 踩过）。 */
:root .account-form input:not([type]),
:root .account-form input[type="text"],
:root .account-form input[type="email"],
:root .account-form input[type="password"],
:root .qdm-captcha input {
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
  background: var(--qdm-chip-bg, rgba(0, 0, 0, .1));
  color: var(--qdm-strong, #f3f4f6);
  font-size: 14px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
:root .account-form input::placeholder { color: var(--qdm-faint, #7b8291); }
:root .account-form input:focus {
  border-color: rgba(99, 102, 241, .65);
  background: var(--qdm-card, rgba(0, 0, 0, .18));
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
  outline: none;
}
:root .account-form label { font-size: 13.5px; color: var(--qdm-muted, #9ca3af); }

/* ② 复选框：原生控件不吃 border-radius（要圆角得 appearance:none，会把勾选样式也改掉，
   风险大于收益）→ 只调尺寸 + 品牌色勾选 */
:root .account-form input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  cursor: pointer;
}

/* ③ 主按钮：已经是胶囊渐变，这里只统一高度与 hover */
:root .account-form button.primary {
  height: 46px;
  font-size: 15px;
  letter-spacing: .02em;
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
:root .account-form button.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(99, 102, 241, .40);
}

/* ④ 验证码那行：「换一张」从裸按钮变胶囊，和输入框对齐 */
:root .qdm-captcha button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .04));
  color: var(--qdm-body, #c3c7d1);
  font-size: 12.5px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
:root .qdm-captcha button:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .16);
  color: #fff;
}
:root .qdm-captcha input { height: 46px; border-radius: 10px; font-size: 14px; }
:root .qdm-captcha small { color: var(--qdm-faint, #7b8291); line-height: 1.6; }

/* ⑤ 文案与链接：底部协议小字 11→12px；链接统一品牌色 + hover 下划线 */
:root .login-policy { font-size: 12px; color: var(--qdm-faint, #7b8291); line-height: 1.6; }
:root .login-register { font-size: 13.5px; color: var(--qdm-muted, #9ca3af); }
:root .login-register a,
:root .form-options a,
:root .back-home {
  color: var(--qdm-tag-fg, #818cf8);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
:root .login-register a:hover,
:root .form-options a:hover,
:root .back-home:hover {
  color: var(--qdm-strong, #fff);
  border-bottom-color: currentColor;
}

/* ⑥ 标签页：点按区域大一点 + hover 反馈（激活下划线保持原样） */
:root .login-tabs button {
  transition: color .16s ease, border-color .16s ease;
}
:root .login-tabs button:not(.active):hover { color: var(--qdm-strong, #fff); }

/* ⑦ 亮色模式：登录卡与输入框跟着主题走 */
:root .site.light .login-card {
  background: var(--panel);
  border-color: var(--line);
}
:root .site.light .account-form input:not([type]),
:root .site.light .account-form input[type="text"],
:root .site.light .account-form input[type="email"],
:root .site.light .account-form input[type="password"],
:root .site.light .qdm-captcha input {
  background: rgba(30, 32, 42, .04);
  border-color: rgba(30, 32, 42, .12);
  color: var(--text);
}
:root .site.light .account-form input:focus { background: #fff; }

/* ============================================================================
 * 步骤 6 · 顶部导航条（**只加外观，不动结构**）
 *   实测现状：
 *     · .brand-name small 只有 7px（小到看不清）
 *     · .header-search 圆角只有 4px，是个灰底小方块，里面「搜索」是个 11px 的裸文字
 *     · .login-link 16px 方角无底、.register-link 是**透明**胶囊（没有主色）
 *     · .round-action（亮）34×34 圆形 ✓ 保持
 * ========================================================================== */

/* ① 品牌区：副标题 7px → 9px（加字距），分隔线收短一点 */
:root .brand-name small {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--qdm-muted, #9ca3af);
}
:root .brand-divider { height: 24px; background: var(--qdm-line, rgba(255, 255, 255, .12)); }
:root .brand-story { color: var(--qdm-muted, #9ca3af); font-size: 12.5px; line-height: 1.5; }
:root .brand-logo { box-shadow: 0 0 0 1px rgba(99, 102, 241, .35), 0 6px 16px rgba(0, 0, 0, .35); }

/* ② 搜索入口：4px 小方块 → 胶囊；「搜索」做成小标签；hover 变紫 */
:root .header-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .10));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .04));
  color: var(--qdm-muted, #9ca3af);
  font-size: 13.5px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
:root .header-search:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .14);
  color: #fff;
}
:root .header-search > span { font-size: 13.5px; }
:root .header-search > b {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #e9348e);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
:root .header-search .qdm-icon { width: 15px; height: 15px; opacity: .85; }

/* ③ 头部按钮：「登录」描边胶囊、「注册」主色胶囊、「亮」保持圆形但加 hover */
:root .header-actions { gap: 10px; }
:root .login-link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .04));
  color: var(--qdm-strong, #f3f4f6);
  font-size: 13.5px;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease;
}
:root .login-link:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .16);
}
:root .register-link {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #e9348e);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(99, 102, 241, .35);
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
:root .register-link:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(99, 102, 241, .45);
}
:root .round-action {
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
:root .round-action:hover {
  background: rgba(99, 102, 241, .22);
  color: #fff;
  transform: translateY(-1px);
}

/* ④ 搜索弹窗：圆角/输入框/按钮统一（老层里这几处也是写死深色） */
:root .qdm-search-dialog {
  border-radius: 16px;
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .08));
}
:root .qdm-search-form input {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .10));
  font-size: 14px;
}
:root .qdm-search-form button {
  height: 44px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

/* ⑤ 亮色模式：页头与头部控件跟着主题走 */
:root .site.light .login-link { color: var(--text); }
:root .site.light .header-search:hover { color: var(--text); }
:root .site.light .brand-divider { background: rgba(30, 32, 42, .14); }

/* ============================================================================
 * 步骤 7 · 页脚 + 空状态 + 浮动按钮（**只加外观，不动结构**）
 *   实测问题：
 *     · 页脚 4 个链接（站点统计/隐私协议/站点地图/友情链接）是**灰字(#6b7280)压在亮彩底**
 *       （青 rgb(54,199,193) / 紫 rgb(153,114,223) / 红 rgb(255,107,120)）→ 既花又看不清（约 3:1）
 *     · 页脚两个二维码是**纯白 78×78 方块**，压在深色页脚上很跳、也没圆角
 *     · 空状态（「分类还没有内容」）两个按钮是**透明底**
 *     · 浮动按钮（消息/顶部）46×34 圆角 8px、无描边
 * ========================================================================== */

/* ① 页脚：底色随主题；链接从"彩底灰字"改成中性胶囊；二维码加圆角与描边 */
:root .site-footer {
  background: var(--qdm-panel, #15171d);
  border-top: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
}
:root .site-footer .footer-brand p,
:root .site-footer p { color: var(--qdm-muted, #9ca3af); }

/* ⚠️ 那一层给每个链接单独配了亮色底（很可能用了 a:nth-child 之类），所以这里用
   .site-footer .footer-links a 提高权重，并且用 !important 压住它的配色。 */
:root .site-footer .footer-links a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .10));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .04)) !important;
  color: var(--qdm-body, #c3c7d1) !important;
  font-size: 12px;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
:root .site-footer .footer-links a:hover {
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .16) !important;
  color: #fff !important;
}
:root .site-footer .qr span {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .10);
}

/* ② 空状态：两个按钮从"透明底"变成主次分明（主按钮品牌渐变 / 次按钮描边） */
:root .qdm-category-empty {
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
  background: var(--qdm-card, #181a20);
}
:root .qdm-category-empty strong { font-size: 17px; color: var(--qdm-strong, #f3f4f6); }
:root .qdm-category-empty p { font-size: 13.5px; color: var(--qdm-muted, #9ca3af); }
:root .qdm-category-empty-actions { gap: 10px; margin-top: 6px; }
:root .qdm-category-empty-actions a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .12));
  border-radius: 999px;
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .04));
  color: var(--qdm-strong, #f3f4f6);
  font-size: 13px;
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
:root .qdm-category-empty-actions a:first-child {
  border-color: transparent;
  background: linear-gradient(135deg, #6366f1, #e9348e);
  color: #fff;
  box-shadow: 0 10px 24px rgba(99, 102, 241, .35);
}
:root .qdm-category-empty-actions a:hover {
  transform: translateY(-1px);
  border-color: rgba(99, 102, 241, .55);
  background: rgba(99, 102, 241, .18);
  color: #fff;
}
:root .qdm-category-empty-actions a:first-child:hover {
  filter: brightness(1.06);
  background: linear-gradient(135deg, #6366f1, #e9348e);
}

/* ③ 浮动按钮：圆角统一 12px + 描边 + hover（原来 8px、无描边） */
:root .floating-right button,
:root .floating-left {
  border: 1px solid var(--qdm-chip-line, rgba(255, 255, 255, .12));
  border-radius: 12px;
  background: var(--qdm-card, rgba(56, 58, 66, .78));
  color: var(--qdm-body, #fff);
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
:root .floating-left { border-radius: 0 12px 12px 0; }
:root .floating-right button:hover,
:root .floating-left:hover {
  border-color: rgba(99, 102, 241, .60);
  background: rgba(99, 102, 241, .22);
  color: #fff;
  transform: translateY(-1px);
}

/* ============================================================================
 * 步骤 8 · 侧栏三张卡（猜你喜欢 / 每日签到 / 后续会员权益）（**只加外观，不动结构**）
 *   实测现状：
 *     · .side-title strong「猜你喜欢」是 20px 紫色 —— 和其它区块标题（15~17px 白字）不是一套
 *     · .guess-row 里小封面圆角只有 7px、标题 12px、下面「查看资源 ›」只有 10px（偏小）
 *     · .side-card.guesses 的行没有任何 hover 反馈
 *     · 每日签到卡：说明文字 16px（偏大）、「每日签到」标签 11px
 *     · 后续会员权益占位卡：标签 16px、骨架线颜色偏亮
 * ========================================================================== */

/* ① 侧栏卡片：底色随主题；标题统一成"品牌色竖条 + 15px 白字"（和详情页区块标题一套） */
:root .side-card {
  background: var(--qdm-card, #181a20);
  border-color: var(--qdm-line, rgba(255, 255, 255, .07));
}
:root .side-title { display: flex; align-items: center; gap: 10px; }
:root .side-title strong {
  position: relative;
  padding-left: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--qdm-strong, #f3f4f6);
  letter-spacing: .01em;
}
:root .side-title strong::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 15px;
  margin-top: -7.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #e9348e);
}
:root .side-title button { margin-left: auto; font-size: 12.5px; }

/* ② 猜你喜欢：行加 hover、封面圆角 7→10px、标题 12→13px、副文案 10→11.5px */
:root .guess-row {
  border-radius: 10px;
  padding: 6px 8px;
  transition: background .16s ease, transform .16s ease;
}
:root .guess-row:hover {
  background: var(--qdm-chip-bg, rgba(255, 255, 255, .05));
  transform: translateX(2px);
}
:root .guess-row img {
  border-radius: 10px;
  border: 1px solid var(--qdm-line, rgba(255, 255, 255, .07));
  transition: filter .16s ease;
}
:root .guess-row:hover img { filter: brightness(1.08); }
:root .guess-copy strong { font-size: 13px; color: var(--qdm-strong, #f3f4f6); }
:root .guess-copy small { font-size: 11.5px; color: var(--qdm-muted, #9ca3af); }
:root .guess-row:hover .guess-copy small { color: var(--qdm-tag-fg, #818cf8); }

/* ③ 每日签到：标签 11→12px（加字距），说明 16→13.5px，整体加一层极淡的暖色点缀 */
:root .benefit-card { position: relative; overflow: hidden; }
:root .benefit-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, .16), transparent 70%);
  pointer-events: none;
}
:root .benefit-card > span {
  font-size: 12px;
  letter-spacing: .08em;
}
:root .benefit-card > strong { font-size: 20px; color: var(--qdm-strong, #f3f4f6); }
:root .benefit-card > p { font-size: 13.5px; line-height: 1.65; color: var(--qdm-muted, #9ca3af); }

/* ④ 后续会员权益占位卡：做成"虚线占位"而不是实心卡，标签 16→13px */
:root .side-placeholder {
  border: 1px dashed var(--qdm-line-strong, rgba(255, 255, 255, .14));
  background: transparent;
}
:root .side-placeholder > span { font-size: 13px; color: var(--qdm-muted, #9ca3af); }
:root .side-placeholder .lines i,
:root .qdm-empty-lines i {
  background: var(--qdm-line-strong, rgba(255, 255, 255, .14));
}
:root .site.light .side-placeholder .lines i,
:root .site.light .qdm-empty-lines i { background: rgba(30, 32, 42, .10); }
/* 亮色下占位卡也要保持"透明+虚线"（不加这条会被 .site.light .side-card 的白底盖掉） */
:root .site.light .side-card.side-placeholder { background: transparent; }

/* ---------- 开关（仅 demo） ---------- */