/* ---------- 1. 通用卡片 ---------- */
/* 2026-09-20 重建：基础 .rb-card 规则在死代码清理时被误删（登录卡因 style.css
   的 .user-panel 副本幸免，其余卡片全部丢底色）。以存活副本为准还原。 */
.rb-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}

.rb-card-title{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-title);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0;
}

.rb-card-body{
    padding: 14px 16px;
}

/* ---------- 2. 用户面板（登录/游客） ---------- */
.user-panel {
    padding: 18px;
    /* inherit card background from .rb-card */
}
.user-panel-inner {
    display: flex;
    flex-direction: row;      /* 头像在左、信息块在右（头像位于「个人中心」按钮上方偏左） */
    align-items: center;      /* 头像相对信息块垂直居中 */
    justify-content: flex-start; /* 头像左边缘与下方「个人中心」按钮左边缘对齐 */
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 4px 0 4px 20px;  /* 左内边距 20px：头像比「个人中心」按钮左边缘再右移 20px */
    text-align: left;
}
/* 2026-10-07：与个人中心身份卡头像（member.css 的 .mc-idcard-avatar）大小、样式完全一致。
   两处外观本应由同一份配方维护，但 member.css 只在会员页加载、right.css 只在右栏页面加载，
   互不重叠 → 这里按同一配方复刻，任一处调整需同步另一处。 */
.user-avatar {
    width: 72px; height: 72px;
    border-radius: var(--mc-radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 500; line-height: 1; flex: 0 0 auto;
    overflow: hidden;   /* 上传头像按圆形裁切 */
    position: relative;
    user-select: none;
}
.user-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.user-info { min-width: 0; flex: 0 1 auto; }
/* 2026-10-07：头像在左、信息块在右并从左侧起排（用户名 / 徽章 / 数据行左靠齐）。
   徽章另起一行放在用户名下方，用户名过长时换行完整显示（不截断）。 */
.user-name {
    font-size: 15px; font-weight: 500;
    color: var(--color-text-title);
    display: flex;
    flex-direction: column;      /* 徽章在用户名下方另起一行 */
    align-items: flex-start;     /* 左靠齐 */
    gap: 4px;
}
.user-name-text {
    max-width: 100%;
    overflow-wrap: anywhere;     /* 超长用户名整词换行，保证完整可读 */
}
.user-meta {
    display: flex; align-items: center; justify-content: flex-start; gap: 6px;
    flex-wrap: wrap;
    font-size: 12px; color: var(--color-text-secondary);
    margin-top: 2px;
}
.user-meta-item { white-space: nowrap; }
.user-meta-divider { color: var(--color-text-dim); }
.user-panel-actions { display: flex; gap: 8px; margin-top: 14px; }
.user-action-btn {
    flex: 1; text-align: center; padding: 8px 12px;
    border-radius: 10px; font-size: 13px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    background: var(--color-bg-page-soft);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    transition: all .2s ease;
}
.user-action-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.checkin-btn.checkin-done,
.checkin-btn:disabled {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: transparent;
    cursor: default;
}
.user-panel-guest { text-align: center; }
.guest-title {
    font-size: 15px; font-weight: 500;
    color: var(--color-text-title); margin-bottom: 14px;
}
.guest-btns { display: flex; gap: 8px; }
.guest-btns .app-btn { flex: 1; }

/* ---------- 3. 热门标签（分「游戏 / 影视」两组） ---------- */
/* 2026-09-30：热门标签拆两组，每组一个 .rb-tag-group（含小标题），
   胶囊容器统一 .rb-tags；内外边距由分组容器负责，.rb-tags 自身无 padding。 */
.rb-tag-group{
    padding: 12px 16px 14px;
}
.rb-tag-group + .rb-tag-group{
    border-top: 1px solid var(--color-border);
}
.rb-tag-group-title{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-secondary);
}
.rb-tag-group-title::before{
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--color-accent);
}
.rb-tags{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.rb-tag,
.doc-tag{
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 999px;
    background: var(--color-bg-tag);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    font-size: 12px; font-weight: 500;
    text-decoration: none; transition: all .2s;
}
.rb-tag:hover,
.doc-tag:hover{
    background: var(--color-accent-soft);
    color: var(--color-accent-dark);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ---------- 4. 热门排行 / 类似游戏 ----------
   ⚠️ .rank-card / .rank-no-hot 的形态唯一定义处在 home.css（2026-10-03 合并）。
      本节只写右栏场景的上下文调整，不重复声明形态。 */
.rank-tabs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
    margin-bottom: 12px; font-size: 12px;
}
/* 时间维度切换：默认即带底色的胶囊（不再是裸文字 + 「/」分隔），与 .rb-tag 同套变量。
   选中态走实心强调、hover 走淡强调底 + 强调字，三态一眼可辨。
   ⚠️ 两处文字色都不能沿用 --color-accent-ink（实测本站主色偏暗，深字压强调底只有 2.1~2.8，
      低于本站 ≥3 的可读门槛）：
      - hover 用 --color-accent（浅色 3.83 / 深色 5.56）
      - 选中态浅色主题用白字（4.43），深色主题主色转亮，再覆盖回深字（6.02）
        —— 与 home.css 里 .rank-no-hot 的 `[data-theme="dark"]` 覆盖同款写法。 */
.rank-tab {
    color: var(--color-text-secondary); cursor: pointer;
    padding: 4px 10px; border-radius: 999px;
    background: var(--color-bg-tag);
    border: 1px solid var(--color-border);
    transition: all .2s;
}
.rank-tab:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent);
}
.rank-tab.active {
    background: var(--color-accent-gradient);
    color: var(--color-text-invert);
    border-color: transparent;
    font-weight: 500;
}
[data-theme="dark"] .rank-tab.active {
    color: var(--color-accent-ink);
}
.rank-panel { display: none; }
.rank-panel.active { display: block; }
.rank-empty {
    padding: 16px 0; text-align: center;
    color: var(--color-text-dim); font-size: 13px;
}
.rank-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-areas: "no name" "no detail";
    column-gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--color-border);
    text-decoration: none; color: var(--color-text-primary);
    font-size: 13px; transition: color .15s;
}
.rank-item:last-child { border-bottom: none; }
.rank-item:hover { color: var(--color-accent); }
.rank-no {
    grid-area: no;
    width: 22px; height: 22px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    background: var(--color-bg-page-soft);
    color: var(--color-text-dim);
}
.rank-no-hot { background: var(--color-accent); color: var(--color-accent-ink); }
.rank-name {
    grid-area: name;
    min-width: 0;
    max-width: 100%;
    display: flex; flex-direction: column; gap: 2px;
}
.rank-name-cn {
    display: block;
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-name-en {
    display: block;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rank-detail {
    grid-area: detail;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .25s ease, opacity .25s ease, transform .25s ease;
}
.rank-item:hover .rank-detail {
    max-height: 56px;
    opacity: 1;
    transform: translateY(0);
}
.rank-meta {
    display: flex; flex-wrap: wrap; gap: 3px;
    min-width: 0;
}
.rank-meta-chip {
    display: inline-block;
    font-size: 10px; font-weight: 500; line-height: 1;
    padding: 2px 6px; border-radius: 4px;
    white-space: nowrap;
    background: var(--color-bg-page-soft);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
.rank-meta-chip.cat { background: var(--color-accent-soft); color: var(--color-accent-dark); border-color: transparent; }
.rank-meta-chip.ver { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border-color: transparent; }
.rank-detail-sub {
    font-size: 11px; line-height: 1.5; color: var(--color-text-secondary);
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 5. 打赏支持 ---------- */
.rb-reward-text{
    font-size: 13px; color: var(--color-text-secondary);
    line-height: 1.7; margin-bottom: 12px;
}
.rb-reward-btn{
    display: block; text-align: center;
    padding: 10px; border-radius: 10px;
    background: var(--color-accent-gradient);
    color: var(--color-text-title);
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 30%, transparent);
    transition: transform .2s;
}
.rb-reward-btn:hover{
    transform: translateY(-1px);
}

/* ---------- 1.5. 顶置推荐卡片（登录卡下方，跳转顶置推荐页） ---------- */
/* 顶置推荐卡片 —— DOM 用 .rb-card 公共外观打底，仅保留内容区专属布局。
   计数与「查看」同栏两端对齐：计数+文案在左、查看靠右；内边距复用公共 .rb-card-body。
   内容行整体为链接（整栏可点跳转顶置推荐页），标题行不可点（2026-10-12 用户要求）。 */
.recommend-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}
.recommend-card-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.recommend-card-count {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text-title);
    font-variant-numeric: tabular-nums;
}
.recommend-card-tip {
    font-size: 12px;
    color: var(--color-text-secondary);
}
.recommend-card-go {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
}
.recommend-card-body:hover .recommend-card-go { text-decoration: underline; }

.disk-row{
    display: flex; align-items: center; gap: 12px;
    padding: 10px; border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-page-soft);
}
[data-theme="dark"] .rank-no-hot{
    color: var(--color-accent-ink);
}
.disk-btn{
    flex-shrink: 0; padding: 7px 16px;
    border: none; border-radius: 8px;
    background: var(--color-accent-gradient);
    color: var(--color-text-title);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: filter .2s;
}
.disk-btn:hover{ filter: brightness(1.05); }
.disk-btn:disabled{ opacity: .6; cursor: default; }

/* ---------- 7. 文档详情专属侧栏容器 ---------- */
/* ⚠️ .doc-layout 已无任何 CSS 规则：它曾是详情页两栏网格，但右栏早已改由外层
   .app-main-inner.has-right 承担（见本文件第 12 节），模板里只剩 .doc-main
   一个子元素 → 三套 grid 定义（此处 280/320/clamp、responsive.css 的 1fr、
   body.doc-detail-page 的 1fr）全部空转。**别再往这里加 grid**，
   详情页两栏请改 .app-main-inner.has-right。 */
/* 文章列本体（标题 / 正文 / 截图 / FAQ / 下载面板的容器）——详情页独有。
   ⚠️ 不留左右内边距（2026-09-28 用户裁定）：留白交给外层，文章列自身贴齐。
      历史原因：曾在此写 padding-left/right 20px（断点值在 responsive.css 覆盖），
      与上层 .doc-container 的居中留白叠加成双重左右间距 → 已全部移除。
   ⚠️ 不要改用上层的 .doc-container / .app-main-inner：前者带 max-width:1400 居中、
      后者是「文章列 + 右栏 .app-right」的共同父容器，都会夹带额外副作用。 */
.doc-main {
    min-width: 0;
}

/* ---------- 8. 快速滚动悬浮按钮 ----------
   已提为全局统一组件：样式在 scroll-fab.css、HTML 在 layout/base.html、
   交互在 right.js（回顶部 + 去底部双按钮），全站页面统一使用，故此处不再定义。 */

/* ---------- 9. 图片灯箱 ---------- */
.rb-lightbox{
    position: fixed; inset: 0; z-index: 4000;
    display: none; align-items: center; justify-content: center;
    background: rgba(0,0,0,.85);
}
.rb-lightbox.open{ display: flex; }
.rb-lightbox img{
    max-width: 90%; max-height: 85%; border-radius: 10px;
}
.rb-lightbox-close{
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px; border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
     font-size: 26px; line-height: 1;
    cursor: pointer;
}
.rb-lightbox-nav{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; pointer-events: none;
}
.rb-lightbox-prev,
.rb-lightbox-next{
    pointer-events: auto;
    width: 52px; height: 52px; border: none; border-radius: 50%;
    background: rgba(255,255,255,.15);  font-size: 28px;
    cursor: pointer;
}
.rb-lightbox-count{
    position: absolute; bottom: 24px; left: 50%;
    transform: translateX(-50%);
     font-size: 14px;
    background: rgba(0,0,0,.4);
    padding: 4px 12px; border-radius: 999px;
}
/* 大图（Steam 1920 原图近 1MB，慢的时候要拉十几秒）加载期间的文字提示：
   只在灯箱里「还没有任何一帧」时出现（换图时旧帧会保留，那时叠文字反而难看）。 */
.rb-lightbox.loading::before{
    content: '图片加载中…';
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    color: rgba(255,255,255,.7); font-size: 14px; letter-spacing: .5px;
    pointer-events: none;
}

/* ---------- 右侧栏容器 ---------- */
.rb-container {
    display: flex;
    flex-direction: column;
    gap: var(--gap-block);
}
.rb-container .rb-card { margin-bottom: 0; }
.rb-sticky {
    position: sticky;
}

/* ---------- 文章页：meta 下方当前文章标签 ---------- */
.doc-meta-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
}

/* ---------- 资源下载面板（「资源下载」独立卡片：截图区块下方）----------
   服务端直接渲染于详情页 #doc-download-below 落点（doc-screenshots 之后），
   不再移入 Markdown 正文，作为独立卡片随主栏滚动。 */
.doc-download-below .dl-panel { margin-bottom: var(--gap-block); }

/* ---------- 详情页关联帮助中心 FAQ 卡片（下载面板上方） ---------- */
.doc-faq-card {
    margin: var(--gap-block) 0;
    padding: 18px 34px;
    background: var(--color-bg-card);
    border: var(--color-border-width) dashed var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}
.doc-faq-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700;
    color: var(--color-text-title);
    margin-bottom: 10px;
}
.doc-faq-more {
    margin-left: auto;
    font-size: 13px; font-weight: 500;
    color: var(--color-accent);
    text-decoration: none;
}
.doc-faq-more:hover { text-decoration: underline; }
.doc-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    margin: 0 0 10px;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    color: var(--color-text-title);
    line-height: 1.5;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s;
}
.doc-faq-q:hover { color: var(--color-accent); }
.doc-faq-q-text { min-width: 0; }
.doc-faq-arrow {
    flex-shrink: 0;
    color: var(--color-text-dim);
    transition: transform .25s ease;
}
.doc-faq-card.open .doc-faq-arrow { transform: rotate(180deg); }
/* 答案正文与帮助中心 FAQ 答案同规格（两处必须一致，显示的是同一份内容） */
.doc-faq-a {
    display: none;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-secondary);
}
.doc-faq-card.open .doc-faq-a { display: block; }
.doc-faq-a p { margin: 0 0 10px; }
.doc-faq-a ul, .doc-faq-a ol { margin: 0 0 10px; padding-left: 1.4em; }
.doc-faq-a li + li { margin-top: 4px; }
.doc-faq-a > :last-child { margin-bottom: 0; }
.doc-faq-a strong { color: var(--color-text-title); }
/* md 标题降级：全局 .md-rendered 的 h1 24 / h2 20 在这张卡片里过大、与 16px 正文层级失衡 */
.doc-faq-a.md-rendered h1 { font-size: 20px; }
.doc-faq-a.md-rendered h2 { font-size: 18px; }
.doc-faq-a.md-rendered h3 { font-size: 17px; }
.doc-faq-a.md-rendered h1,
.doc-faq-a.md-rendered h2,
.doc-faq-a.md-rendered h3 { margin: 1.1em 0 .5em; }

.dl-panel {
    background: var(--color-bg-card);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    padding: var(--gap-block);
    /* 上边距必须有：上方 .doc-screenshots 只有 margin-top、没有 margin-bottom，
       不加上边距时本卡片会紧贴截图卡片 */
    margin: var(--gap-block) 0;
}

/* ---------- 正文「配置要求」小节：更紧凑展示（仅作用于该小节） ---------- */
.compact-config {
    font-size: 13px;
    line-height: 1.5;
    margin: 8px 0;
}
.compact-config h1,
.compact-config h2,
.compact-config h3,
.compact-config h4 {
    font-size: 14px;
    margin: 8px 0 4px;
}
.compact-config p { margin: 4px 0; }
.compact-config ul,
.compact-config ol {
    margin: 4px 0;
    padding-left: 1.4em;
}
.compact-config li { margin: 2px 0; }

/* ---------- 正文「文件树」折叠区块：默认收起，点标题栏展开（结构见 detail.html 的 wrapFileTree） ---------- */
.doc-filetree { margin: 1.2em 0; }
.doc-filetree-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    cursor: pointer;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-title);
    background: var(--color-bg-page-soft);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color .15s, background .15s;
}
.doc-filetree-toggle:hover { border-color: var(--color-accent); }
.doc-filetree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--color-accent);
    border-radius: 5px;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.doc-filetree-body { display: none; }
.doc-filetree.open .doc-filetree-toggle { border-radius: 8px 8px 0 0; }
.doc-filetree.open .doc-filetree-body { display: block; }
.doc-filetree-body > pre {
    margin: 0;
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
}
/* 头部：标题左对齐，胶囊绝对定位靠右（窄屏回落换行） */
.dl-head {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 28px;
    margin-bottom: 16px;
}
.dl-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-title);
}
.dl-title-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-accent-gradient);
    color: var(--color-accent-ink);
    flex-shrink: 0;
}
.dl-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
}
.dl-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-invert);
    white-space: nowrap;
    transition: filter .2s, transform .2s;
}
.dl-chip:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--color-text-invert); }
.dl-chip--help { background: var(--color-warning); }   /* 游戏帮助：黄（走主题变量，深浅色自动跟随） */
.dl-chip--msg  { background: var(--color-success); }   /* 留言催更报错：绿 */

/* 主体左右分栏：左=用户须知 / 右=下载按钮 */
.dl-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
/* 左侧用户须知 */
.dl-notes {
    padding: 14px 16px;
    background: var(--color-bg-page-soft);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: 10px;
}
.dl-notes-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-title);
    margin-bottom: 10px;
}
.dl-notes-title svg { color: var(--color-accent); }
.dl-notes-list {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--color-text-secondary);
}
.dl-notes-list li { margin-bottom: 2px; }
/* 用户须知：marked 渲染内容容器（替代原写死的 <ol>，复用 .dl-notes-list 列表样式） */
.dl-notes-box { color: var(--color-text-secondary); font-size: 13px; line-height: 1.7; }
.dl-notes-box p { margin: 0 0 6px; }
.dl-notes-box a { color: var(--color-accent); }
/* 右侧下载按钮 */
.dl-downloads {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* 网盘卡片：单列一行一个（整卡可点，.disk-btn 交互由 right.js 绑定） */
.dl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}
.dl-item {
    display: flex;
    align-items: center;
    gap: 14px;   /* 图标与标题间距加大 */
    min-width: 0;
    padding: 12px 32px;   /* 左右内边距加大：按钮内左右留白更宽 */
    background: var(--color-bg-page-soft);   /* 浅灰底：与卡片白色背景区分 */
    border: var(--color-border-width) dashed var(--color-border);
    border-radius: 10px;
    font: inherit;
    color: var(--color-text-primary);
    text-align: left;
    cursor: default;   /* 卡片本体不可点击，仅「下载」按钮可跳转 */
    transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.dl-item:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.dl-item:disabled { opacity: .6; cursor: default; transform: none; }
.dl-item-ic {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    object-fit: contain;
    flex-shrink: 0;
    /* 统一投影：必须用 drop-shadow（跟随图形轮廓）而非 box-shadow ——
       这些 PNG 是「圆形图案 + 透明四角」，box-shadow 按元素盒投影会在圆角外露出方形阴影框。 */
    filter: drop-shadow(var(--icon-shadow));
}
.dl-item-letter {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;                /* 字色（网盘名首字母）压在 var(--disk-bg) 实心块上恒为白，不跟主题 */
    background: var(--disk-bg, #eef2ff); /* 背景色来自数据库（--disk-bg 内联变量） */
    flex-shrink: 0;
    filter: drop-shadow(var(--icon-shadow));   /* 与 .dl-item-ic 同款投影（实心圆角块 → 圆角方阴影） */
}
.dl-item-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dl-item-rec {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-accent-ink);
    background: var(--color-accent);
    padding: 1px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}
[data-theme="dark"] .dl-item-rec { color: var(--color-accent-ink); }
.dl-item-code {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-dim);
    flex-shrink: 0;
    white-space: nowrap;             /* 提取码完整显示，不省略 */
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px dashed var(--color-border);
    background: var(--color-bg-card);
    transition: border-color .2s, color .2s;
}
.dl-item-code:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.dl-item-code.dl-code-copied {
    border-color: var(--green, #1aa179);
    color: var(--green, #1aa179);
}
/* ---------- 付费墙锁定态（.dl-item--locked，2026-10-02）----------
   非公开资源（发电特权）：网盘链接与提取码已被服务端置空，页面只展示盘种图标 + 名称 + 锁定标。
   视觉诉求：**一眼看出「这里有资源但要权限」**，而不是像「该资源没配网盘」的空态。
   ⇒ 用主色虚线边框 + 主色「解锁」按钮，与普通卡的灰色虚线区分；图标降透明度做「未激活」暗示。
   ⚠️ 全部走变量（--color-*），禁硬编码色值（深浅主题自动跟随）。 */
.dl-item--locked { border-style: dashed; border-color: var(--color-accent); }
.dl-item--locked .dl-item-ic,
.dl-item--locked .dl-item-letter { opacity: .55; }
.dl-item-lock {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-accent-ink);
    background: var(--color-accent);
    padding: 2px 8px;
    border-radius: 5px;
    flex-shrink: 0;
    white-space: nowrap;
}
[data-theme="dark"] .dl-item-lock { color: var(--color-accent-ink); }
/* 右侧「下载」按钮：推到最右，带底色 + SVG 下载图标（图标上下弹） */
.dl-item-dl {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 72px;            /* 加宽：至少 72px，文字居中更大气 */
    text-align: center;
    padding: 9px 18px;           /* 加高加宽：上下 9 / 左右 18（右侧图标自带视觉留白） */
    border-radius: 10px;         /* 与 .app-btn(form.css) 同值：都是主操作按钮，不另立孤值 */
    font-size: 15px;             /* 字号加大 */
    font-weight: 700;
    cursor: pointer;
    color: var(--color-accent-ink);
    background: var(--color-accent);
    transition: filter .2s;
}
.dl-item:hover .dl-item-dl { filter: brightness(1.08); }
[data-theme="dark"] .dl-item-dl { color: var(--color-accent-ink); }
/* 图标：上下弹（仅 transform，开销极低；系统「减少动态效果」时自动停） */
.dl-item-dl-ic {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    animation: dl-ic-bounce 1.5s ease-in-out infinite;
}
@keyframes dl-ic-bounce {
    0%, 100% { transform: translateY(-1.5px); }
    50%      { transform: translateY(2.5px); }
}
@media (prefers-reduced-motion: reduce) {
    .dl-item-dl-ic { animation: none; }
}
/* 锁定态按钮：实心（本就无链接可扫，跳过加载动效避免误以为在准备下载） */
.dl-item--locked .dl-item-dl-ic { animation: none; }

/* ---------- Steam 卡：始终排最后一张 ----------
   参考设计：Steam 标志 + 灰色说明 + 主色行动文案 + 最右 ↗ 箭头。
   ⚠️ **底色 / 边框 / 字色与网盘卡完全统一**（2026-09-30 用户要求「底色使用统一的底色」）：
      不再走 --steam-* 品牌深色令牌（已从 variables.css 删除），直接继承 .dl-item 的
      background（--color-bg-page-soft）/ dashed border / color，hover 也走 .dl-item:hover。
   ⚠️ **尺寸一律不覆盖**（2026-09-30 用户要求「图标统一大小」）：图标尺寸 / padding / gap 全部继承
      .dl-item —— 图标 50×50、padding 12px 32px、条高 76px，与网盘卡完全一致。
      （演变史：曾按要求压到条高 58px + 图标 42px，随后「高度也恢复到统一」「图标统一大小」→ 全部回归继承。
       别再写死数值；尤其别再用 padding 去「凑」高度，图标一改就会错位。） */
/* hover 无专属配色：整体走 .dl-item:hover（边框转主色 + 上浮 + 阴影），与网盘卡一致 */
.dl-steam-hint {
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-dim);   /* 与网盘卡的「提取码」同色（辅助说明） */
    min-width: 0;      /* 必须：允许被压到内容宽以下（窄屏时说明文字自动省略） */
}
/* 行动区占满剩余整行：文案贴左（紧跟说明），箭头贴最右（与参考图一致） */
/* ⚠️ 选择器必须带 .dl-item--steam 前缀提高优先级：既有规则
   `[data-theme="dark"] .dl-item-dl { color: var(--color-accent-ink) }` 是 0-2-0，
   单类 0-1-0 压不过它 → 深色主题下文案会变成「强调底文字色」，在浅底上不合调。
   这里要的是**透明底上的主色文字**，故用 0-3-0 前缀 + --color-accent。 */
.dl-item.dl-item--steam .dl-item-dl--steam {
    /* ⚠️ flex-shrink 必须为 0：行动文案 + 箭头是 nowrap 的 CTA，一旦被压缩到
       内容宽以下就会「画」出条外（父条无 overflow:hidden）→ 窄屏横向溢出。
       收缩全部交给可省略的 .dl-steam-hint（它带 overflow:hidden + ellipsis）。 */
    flex: 1 0 auto;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    background: transparent;
    color: var(--color-accent);
    white-space: nowrap;
}
.dl-item:hover .dl-item-dl--steam { filter: none; }
/* ⚠️ Steam 条的 ↗ 箭头**不做弹动画**（只有网盘行的「下载」箭头弹）；颜色跟随 currentColor */
.dl-item.dl-item--steam .dl-item-dl-ic {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    animation: none;
}
.dl-empty {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--color-text-dim);
    text-align: center;
    padding: 12px 0;
}
/* 窄屏（≤767px）下载面板回落单列：已迁至 responsive.css「下载面板」块（断点统一规范） */

/* ---------- 网盘下载弹窗（点击网盘卡的「下载」后居中弹出，扫码保存） ----------
   结构：标题（网盘名去「网盘」+ 下载）→ 打赏支持 → 版本/扩展/语言/容量 → 二维码 → 使用说明。
   交互在 download_panel.html 内联脚本（window.dlModalOpen / 遮罩 / × / Esc / 滚动锁）。
   ⚠️ 二维码底色**固定纯白、模块固定深色**（不走主题变量）：QR 必须「深模块 + 浅底」才扫得出来，
      若跟随深色卡片底色会直接变废码。这是全站唯一允许硬编码颜色的地方，别改。
   ⚠️ 二维码实际输出的是 <img>（qrcodejs 生成 dataURL 后隐藏 canvas 改显 img）——
      选择器必须 canvas 与 img 同时命中，只写 canvas 会得到一个 512px 的巨图。 */
/* 2026-10-08：dlmodal 通用骨架（遮罩/居中/卡片/关闭）已迁移至 modal.css 通用 .ui-modal 体系。
   此处仅保留下载弹窗专属层级。 */
.dlmodal { z-index: var(--z-modal-top); }
.dlmodal-card {
    --dlmodal-qr-size: 180px;   /* 二维码边长（正方形） */
    --dlmodal-qr-pad: 20px;     /* ⚠️ 这就是二维码的**静区**：qrcodejs 生成的码自身没有留白，
                                   扫描识别要求四周至少 4 个模块宽 → 约 180/29×4 ≈ 25px，
                                   取 20px（≈3.4 模块）在「不显笨重」与「好扫」之间折中；别再往下压。 */
    --dlmodal-load-ms: 900ms;   /* 打开弹窗时「0% → 100%」进度的时长（JS 读取，唯一来源，别在 JS 里写死） */
    /* 以下几何/底色/圆角/阴影/入场动画由 modal.css 通用 .ui-modal-card 提供（2026-10-08 统一）。
       下载弹窗专属：更宽、内容不滚（滚动交 .dlmodal-scroll）、同色圆片盖 ×、无焦点圈。 */
    max-width: 520px;           /* 桌面端卡片宽（2026-09-30 两次加宽 360 → 440 → 520）；
                                   ⚠️ 靠 width:100% + max-width 自适应，窄屏自然缩到「视口 - .dlmodal 的 padding」，不要另设固定宽 */
    overflow: hidden;
    padding: 0;                 /* padding 移交 .dlmodal-scroll（× 是 absolute 定位，位置不受影响） */
    text-align: center;
    outline: none;              /* 卡片带 tabindex=-1 只为承接焦点，不要焦点圈 */
}
/* 卡片内容滚动层（唯一滚动容器）：min-height:0 是必须的 —— flex 子项默认 min-height:auto
   会拒绝收缩到内容高度以下，缺了它滚动条永远不出现。 */
.dlmodal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 22px 22px 18px;
}
/* dlmodal-pop 已并入 modal.css 通用 uiModalPop（2026-10-08 统一入场动画） */
@media (prefers-reduced-motion: reduce) {
    .dlmodal-card { animation: none; }
    /* ⚠️ 必须写**内层**宿主：canvas/img 现在挂在 .dlmodal-qr-inner 下（`.dlmodal-qr > canvas` 已匹配不到，
       漏改会让「减弱动态效果」下二维码仍淡入）。 */
    .dlmodal-qr-inner > canvas,
    .dlmodal-qr-inner > img,
    .dlmodal-qr-logo { animation: none; }
}
.dlmodal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;                 /* 压在滚动层之上：内容滚到顶部时也不会盖住 × */
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* 圆片与卡片同底色 → 肉眼无变化，但内容滚到 × 位置时会从它下面"穿过"，
       同色圆片把穿过的那一小块盖住，避免文字和 × 叠在一起看不清。 */
    background: var(--color-bg-card);
    font-size: 20px;
    line-height: 1;
    color: var(--color-text-dim);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.dlmodal-close:hover { background: var(--color-bg-page-soft); color: var(--color-text-primary); }

/* 标题行：网盘图标（克隆行内图标，缩到 32px）+ 「夸克下载」——**左对齐**（图标与文字一起贴左） */
.dlmodal-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 30px 0 0;        /* 右侧留出 × 按钮的位置（× 左缘距卡片右 38px），左缘靠卡片 padding 对齐 */
    margin-bottom: 14px;
}
.dlmodal-ic { display: inline-flex; flex-shrink: 0; }
/* ⚠️ 克隆的是与列表卡同一个节点（类名一模一样），基类 .dl-item-ic/.dl-item-letter 是 50×50；
   必须带 .dlmodal-head 前缀（0-2-0）才压得过基类（0-1-0）缩到 32px。 */
.dlmodal-head .dl-item-ic,
.dlmodal-head .dl-item-letter {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 15px;
}
.dlmodal-title {
    flex: 1;                    /* 占满剩余宽度；min-width:0 让长标题能省略而不是撑破卡片 */
    min-width: 0;
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text-title);
    text-align: left;           /* 卡片整体 text-align:center，标题要显式靠左 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 下载弹窗：赞助永续者引导块（非终身会员显示，引导去赞助解锁「下载无需扫码」桌面直链；
   终身会员 LIFETIME_DIRECT 由 JS 隐藏）。与打赏条同层、走强调色，深浅色自动跟随。 */
.dlmodal-sponsor {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border: var(--color-border-width) solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    text-align: left;
}
.dlmodal-sponsor-ic { flex-shrink: 0; display: inline-flex; color: var(--color-accent); }
.dlmodal-sponsor-body { flex: 1; min-width: 0; }
.dlmodal-sponsor-tit {
    margin: 0 0 2px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-text-title);
}
.dlmodal-sponsor-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-secondary);
}
/* CTA 按钮：复用与「电力充沛 / 永续者·典藏」同款的强调渐变，视觉统一 */
.dlmodal-sponsor-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 7px 12px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent-gradient);
    color: var(--color-text-title);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s;
}
.dlmodal-sponsor-btn:hover { filter: brightness(1.06); }

/* 信息行：**只放值**（版本 / 扩展 / 语言 / 容量），不显示「版本号 / 扩展 / 语言 / 容量」标签名
   ——2026-09-30 用户要求。空值在模板层就不渲染，这里不管空态。 */
.dlmodal-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
}
.dlmodal-tag {
    display: inline-block;      /* ⚠️ 单值节点用 inline-block：inline 元素上 text-overflow 不生效 */
    max-width: 100%;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-title);
    background: var(--color-bg-page-soft);
    border: var(--color-border-width) solid var(--color-border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 二维码区（固定白底，见上方注释）——尺寸只由 --dlmodal-qr-size / --dlmodal-qr-pad 驱动，
   窄屏在 responsive.css 覆盖这两个值即可。
   ⚠️ position:relative 是**中心图标**的定位基准（.dlmodal-qr-logo 绝对居中于码心）。 */
.dlmodal-qr {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--dlmodal-qr-pad);
    margin-bottom: 12px;
    background: var(--color-onwhite-bg);
    border: var(--color-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
}
/* 二维码 / 进度占位的宿主机（内层）：JS 的 innerHTML='' 只清它，中心图标放外层不被误删 */
.dlmodal-qr-inner { display: block; }
.dlmodal-qr-inner > canvas,
.dlmodal-qr-inner > img {
    display: block;
    width: var(--dlmodal-qr-size);
    height: var(--dlmodal-qr-size);
}
/* 出码淡入：进度条跑满后二维码「长出来」而不是硬切（时长比 app 的 .3s 稍短，衔接更利落） */
.dlmodal-qr-inner > canvas,
.dlmodal-qr-inner > img { animation: dlmodal-qr-in .28s ease-out; }
@keyframes dlmodal-qr-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* ---------- 二维码中心小图标（游戏 icon / 影视 portrait，2026-09-30） ----------
   绝对居中在码心，白环 + 圆角（白环即码内静区，缺了它中心会糊成一片、相机难识别）。
   尺寸全部按 --dlmodal-qr-size 的比例算 → 窄屏（responsive.css 缩了 qr-size）自动跟着缩，不用另写断点。
   ⚠️ 32×32 的游戏图标显示 36px 已是 1.125 倍放大，别再往大调，否则糊。
   ⚠️ 白环 0.03（180px 时 ≈5.4px）是下限：覆盖面积 = 高 20% + 白环 → 约 7% 的码面，
      配合 JS 把容错等级提到 H(30%) 已很稳；再放大就得重新评估识别率。 */
.dlmodal-qr-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: content-box;                 /* 明确：白环 padding 加在 20% 高度之外 */
    height: calc(var(--dlmodal-qr-size) * 0.2);
    width: auto;                             /* 方形 icon 出正方形、竖版 portrait 出窄长条，各自保持原比例 */
    max-width: calc(var(--dlmodal-qr-size) * 0.26);
    padding: calc(var(--dlmodal-qr-size) * 0.03);
    background: var(--color-onwhite-bg);
    border-radius: calc(var(--dlmodal-qr-size) * 0.045);
    object-fit: contain;
    pointer-events: none;                    /* 纯装饰，别抢二维码的鼠标事件 */
    animation: dlmodal-logo-in .28s ease-out;
}
/* 本规则没有声明 display，[hidden] 的 UA `display:none` 仍生效；这条只是防止将来有人给图标补 display 后
   hidden 失效（与 .dlmodal-qr[hidden] 同一坑）。 */
.dlmodal-qr-logo[hidden] { display: none; }
/* ⚠️ 动画关键帧里必须**带上 translate(-50%,-50%)**，否则 scale 会把居中位移覆盖掉、图标跳到右下角 */
@keyframes dlmodal-logo-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 打开弹窗时的「0% → 100%」进度占位（跑满后才换成二维码，见 download_panel.html::startProgress）
   ⚠️ 尺寸必须与二维码**完全一致**（都读 --dlmodal-qr-size）→ 白框大小恒定，出码瞬间零跳动。
   ⚠️ 这里是白底区：进度动画统一走**绿色** `--color-success`（浅/深主题同值 #22c55e，
      白底上恒亮），其余文字仍用固定深色 #0b0f14，不跟主题变量。 */
.dlmodal-load {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: var(--dlmodal-qr-size);
    height: var(--dlmodal-qr-size);
}
.dlmodal-load-pct {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    /* ⚠️ 白色底上用纯 --color-success(#22c55e) 对比度只有 2.3:1，偏虚；
       往固定深墨 #0b0f14 混 18% 压深 → 约 3.2:1，大号粗体达标，且仍是绿色。 */
    color: color-mix(in srgb, var(--color-success) 82%, var(--color-onwhite-text));
    font-variant-numeric: tabular-nums;   /* 等宽数字：百分比跳动时宽度不抖 */
}
.dlmodal-load-bar {
    display: block;
    width: 68%;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success) 18%, transparent);  /* 浅绿轨道（白底上=淡绿） */
    overflow: hidden;
}
.dlmodal-load-bar > i {
    display: block;
    width: 0;                             /* JS 逐帧写入百分比宽度 */
    height: 100%;
    border-radius: inherit;
    background: var(--color-success);     /* 绿色的「0%→100%」动画本体 */
}
.dlmodal-load-tip { font-size: 11.5px; color: var(--color-onwhite-dim); }
/* 二维码组件缺失时的兜底提示：**必须自带尺寸**（与进度占位同一尺寸）
   —— 否则白框只剩 padding 撑出来的小方块，弹窗整体会跳一下。 */
.dlmodal-qr-fail {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--dlmodal-qr-size);
    height: var(--dlmodal-qr-size);
    font-size: 12px;
    color: var(--color-onwhite-danger);
}

/* ---------- 手机端形态：不显示二维码，直接给可点的网盘链接 ----------
   手机上「扫码」没有意义（用同一台手机扫自己屏幕），故由 JS 判定移动端后
   用本区块替换二维码区（两者互斥，见 download_panel.html 的 applyLayout）。
   链接文本必须允许任意位置折行（网盘链接长且无空格）。 */
/* ⚠️ 必须显式声明：.dlmodal-qr / .dlmodal-url 都写了 display（inline-flex / flex），
   作者样式会压过 [hidden] 自带的 display:none，不加这条 JS 的 hidden 切换会完全失效。 */
.dlmodal-qr[hidden],
.dlmodal-url[hidden] { display: none; }
.dlmodal-url {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
}
.dlmodal-url-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    border: var(--color-border-width) solid color-mix(in srgb, var(--color-accent) 34%, transparent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-accent);
    text-decoration: none;
    word-break: break-all;
    transition: background .2s;
}
.dlmodal-url-link:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.dlmodal-url-copy {
    flex-shrink: 0;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: var(--color-border-width) solid var(--color-border);
    background: var(--color-bg-page-soft);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.dlmodal-url-copy:hover { color: var(--color-text-title); background: var(--color-bg-card); }
.dlmodal-url-copy.is-done { color: var(--color-success, var(--color-accent)); }
/* 「打开」按钮（直链形态主操作，永久会员桌面端显示）：强调色描边 + 浅强调底色，
   与「复制」中性按钮区分主次；全走主题变量，跟随浅/深/自动主题。 */
.dlmodal-url-open {
    flex-shrink: 0;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: var(--color-border-width) solid color-mix(in srgb, var(--color-accent) 34%, transparent);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.dlmodal-url-open:hover { background: color-mix(in srgb, var(--color-accent) 24%, transparent); }

/* 使用说明 */
.dlmodal-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    font-size: 12.5px;
    color: var(--color-text-secondary);
}
.dlmodal-hint svg { flex-shrink: 0; color: var(--color-accent); }

/* ---------- 右栏显隐（单一真相）----------
   仅当页面注入 rightbar 内容时，.app-right 才作为 .app-main-inner 的网格列显示；
   无右栏页面（登录 / 会员中心 / 文档列表等）由基础单列兜底，不出现空轨道。
   ⚠️ 用 .has-right（服务端输出在 .app-main-inner 的 class 上）而**不是** :has(.app-right)：
      :has() 必须等右栏 <aside> 解析完才成立，浏览器流式解析时先画出单列、
      再切双列 → 主区宽度 1185→813 突变（用户可见的「先变宽再收窄」）。 */
.app-main-inner.has-right {
    /* 右栏 ≥1200px 显示（<1200px 由 responsive.css ⑮ 段隐藏并改单列）：
       右栏 280–300px，内宽 248px → 热门标签可排 2–3 个、下载行/排行不再被挤破。
       ⚠️ 内容列必须写 minmax(0, 1fr) 而**不能**用 min(100%, 150px) 当地板：
          百分比在 grid 轨道里解析基准不确定，min() 取到的是内容的 min-content，
          正文里的 <pre>/长合集名会直接把轨道撑到 700+px → 窄屏整页横向滚动
          （2026-10-03 实测 500px 视口被撑到 707px，改回 minmax(0,1fr) 即恢复）。
          想要「内容列不低于 150px」应写成 minmax(150px, 1fr) 并配 overflow 兜底，
          但那样窄屏仍会溢出，故此处一律 min(0, 1fr)。 */
    grid-template-columns: minmax(0, 1fr) clamp(280px, 22%, 300px);
    gap: 28px;
}
/* 右栏让位等断点规则已收敛至 responsive.css（① 全局布局断点） */

.rb-card-body--tight { padding-top: 4px; }


/* ============================================================
 * 从 style.css 迁移的右侧边栏容器样式
 * ============================================================ */

.app-right {
    min-width: 0;
    overflow-x: hidden;
}
.app-right:empty { display: none; }