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

/* ============================================================
 * 标签/徽章样式（从 style.css 迁移）
 * ============================================================ */

.tag-pills-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    margin: 0 0 0 auto;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-accent-ink);   /* 金色/强调底文字色：默认深色黑字，后台可自定义 */
    background: var(--color-accent-gradient);        /* 金色渐变底 */
    border: 1px solid var(--color-accent);
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.tag-pills.collapsible .tag-pills-toggle { display: inline-flex; }
.tag-pills-toggle:hover { filter: brightness(1.05); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.tag-pills .tpt-caret { font-size: 11px; transition: transform .2s; }
.tag-pills.expanded .tpt-caret { transform: rotate(180deg); }
.tag-page .app-main-inner { padding-top: 16px; }
/* 徽章：新增 → 深红色；更新 → 保持金色（2026-10-08 用户裁定分开配色）。
   文案不再由 CSS 写死 —— 后端 doc_badge_text() 把「新增」/「更新」输出进 .list-badge /
   .res-list-new 元素，这里只负责外观。

   【更新徽章】（金色）：沿用原共用样式底色（--color-warning 琥珀金 + --color-badge-gold-deep 深金端点）。
   【新增徽章】（深红色）：底色用深血红渐变，端点 #7f1d1d / #b91c1c / #991b1b，
   与金色更新徽章形成语义区分（红=新上架，金=已更新）。
   动效共用：new-bolt-pulse（辉光呼吸）+ badge-sweep（扫光）。
   ⚠️ .tag-new / .tag-update 挂在条目根元素上，徽章本体是其后代 .res-list-new / .list-badge，
      故这里用后代选择器限定，避免影响条目内其它元素。 */

/* ---- 更新徽章（金色，保持原样）---- */
.tag-update .res-list-new,
.tag-update .list-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 2px;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--color-warning) 78%, var(--color-badge-gold-deep)) 0%,
        var(--color-warning) 30%,
        color-mix(in srgb, var(--color-warning) 62%, var(--color-badge-gold-deep)) 50%,
        var(--color-warning) 70%,
        color-mix(in srgb, var(--color-warning) 78%, var(--color-badge-gold-deep)) 100%);
    background-size: 250% 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    animation: new-bolt-pulse 3s ease-in-out infinite, badge-sweep 4s linear infinite;
}

/* ---- 新增徽章（深红色）---- */
.tag-new .res-list-new,
.tag-new .list-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 2px;
    flex-shrink: 0;
    color: #fff;
    /* 深红渐变：深血红端点，中调稍亮形成对比。
       用 color-mix 避免硬编码 → 主题变量联动。 */
    background: linear-gradient(100deg,
        #7f1d1d 0%,
        #b91c1c 30%,
        #991b1b 50%,
        #dc2626 70%,
        #7f1d1d 100%);
    background-size: 250% 100%;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
    animation: new-bolt-pulse 3s ease-in-out infinite, badge-sweep 4s linear infinite;
}
/* 扩展内容 / 语言 / 容量大小（列表标签用；详情页用 .doc-info-tag.tag-*）。
   形态统一为「文字模式 + 底色」：小圆角、无描边、无光晕、无动画（2026-10-01 用户裁定）。
   底色走 variables.css 的 --color-tag-*（2026-10-03 由字面量收进变量，单一事实源）。 */
.tag-edition { background: var(--color-tag-edition); color: var(--color-text-invert); border-radius: 6px; border: 0; box-shadow: none; }
.tag-lang { background: var(--color-success); color: var(--color-text-invert); border-radius: 6px; border: 0; box-shadow: none; }
.tag-size { background: var(--color-tag-size); color: var(--color-text-invert); border-radius: 6px; border: 0; box-shadow: none; }
.doc-info-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0; }
/* 详情页信息标签：整行统一「文字模式 + 底色」形态
   （小圆角、无描边、无动画）。各字段只声明底色、文字色与自身底色的静态微光，
   形态/内边距由基类统一 → 整行高度一致。版本号底色见下方「版本号唯一定义处」。
   微光（2026-10-01 用户裁定「添加微光」→ 选定「静态柔和外发光」）：
   一圈很淡的自色外发光，**不闪动、不动画**，仍不是徽章（无描边、无胶囊圆角）。 */
.doc-info-tag { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 1; border: 0; box-shadow: none; }
/* ⚠️ tag-size 的辉光曾用 #8a8f96 而底色是 #555555（复制粘贴残留，两色不匹配），
   2026-10-03 统一为 --color-tag-size-glow（与底色同色）。 */
.doc-info-tag.tag-edition { background: var(--color-tag-edition); color: var(--color-text-invert); box-shadow: var(--color-tag-edition-glow); }
.doc-info-tag.tag-lang { background: var(--color-success); color: var(--color-text-invert); box-shadow: 0 0 10px color-mix(in srgb, var(--color-success) 45%, transparent); }
.doc-info-tag.tag-size { background: var(--color-tag-size); color: var(--color-text-invert); box-shadow: var(--color-tag-size-glow); }
.doc-info-tag.tag-year { background: var(--color-info); color: var(--color-text-invert); box-shadow: 0 0 10px color-mix(in srgb, var(--color-info) 45%, transparent); }
/* 详情页分类标签（保留在 meta 行首位；因带分类图标，单独给 gap）。
   2026-10-03 配色改为与列表 .res-list-cat / 网格 .res-card-cat 同源（--color-cat-*）：
   淡强调底 + 强调字 + 1px 细边 + 10px/45% 微光，跟随主题。
   ⚠️ 此前这里是写死的 #4f46e5 实心 + 白字，与列表页那套不同源。
   ⚠️ 唯一与其它 .doc-info-tag 不同的是**字色**：其余（版本/扩展/语言/年份）是实底白字，
      分类是淡底故用 --color-cat-fg 深字，别照抄 --color-text-invert。
   ⚠️ 基类是 border:0（形态统一无描边），本项要 --color-cat-border 的 1px 细边 →
      多出的上下 2px 用负 margin 抵消，否则整行标签高度不齐、底部线不共线。 */
.doc-info-tag.tag-cat {
    gap: 5px;
    background: var(--color-cat-bg);
    color: var(--color-cat-fg);
    border: 1px solid var(--color-cat-border);
    box-shadow: var(--color-cat-glow);
    margin-top: -1px;
    margin-bottom: -1px;
}
.doc-info-tag.tag-cat .doc-meta-cat-ic { display: inline-flex; align-items: center; }

/* ============================================================
 * 版本号（金色）—— 唯一定义处，三处共用：
 *   1) 首页网格卡片遮罩  .grid-card-ver  （元素同时带 .ver-badge）
 *   2) 详情页信息行      .doc-info-tag.tag-version
 *   3) 列表标签          .tag-version
 * 形态 = **文字模式 + 橙色底色**（2026-10-01 用户裁定）：
 * 小圆角色块，无边框、无动画，**不是胶囊徽章**。
 * 金色固定取 --color-warning（主题琥珀金），刻意不用 --color-accent
 * （accent 是后台可改主色，会破坏「版本=金」的语义区分）。
 * ============================================================ */
.ver-badge,
.tag-version,
.doc-info-tag.tag-version {
    background: var(--color-warning);
    color: var(--color-accent-ink);
    border-radius: 6px;
    border: 0;
    box-shadow: none;
}
/* 详情页版本号的静态柔和外发光（2026-10-01 用户裁定「添加微光」）。
   仅限详情页上下文（首页网格 / 列表标签的版本号保持无光晕），
   同特异性但位置更靠后 → 覆盖上方的 box-shadow: none。无动画、不闪动。 */
.doc-info-tag.tag-version { box-shadow: 0 0 10px color-mix(in srgb, var(--color-warning) 45%, transparent); }

/* ============================================================
 * 新增/更新徽章的流光动画：**从左到右**（2026-09-28 用户裁定）
 *
 * background-position 的数值越小，背景图越往左偏 → 视觉上亮带越往右走。
 * 故「从左到右扫光」= position 由大到小：250% → -150%。
 *
 * 另注：徽章文字**有** text-shadow（见上方徽章规则），白字 + 深色投影。
 * ============================================================ */
@keyframes badge-sweep {
    0% {
        background-position: 250% 0;
    }
    100% {
        background-position: -150% 0;
    }
}