/* ==========================================================================
   parts-rococo.css —— 款3「幻镜梦行 · 洛可可宫廷」装饰积木
   --------------------------------------------------------------------------
   【为什么单独成文件】
     令牌（parts-tokens.css）只解决「颜色」，解决不了「形状与装饰」。
     洛可可的识别符号是三样东西：复古金框、卷草纹角饰、皇冠徽章 ——
     这三样在现有部件库里**一个都没有**，属于"缺失的部件样式覆盖"，
     所以按项目惯例建成新积木进库（登记在 inc/parts-loader.php），
     而不是塞进 parts-ui.css 里跟通用样式混在一起。

   【依据】.workbuddy/game_ui_design_text_description.md 作品三（幻镜梦行）
     宫廷紫 #7c6f91 / 珍珠白 #faf8ff / 洛可可金 #c9a96e / 玫瑰粉 #d4a5a5

   【花纹分寸】用户拍板「关键位置用足，不铺满」：
     做：卡片金框、页头卷草纹角饰 + 衬线标题、VIP 徽章皇冠、金色细分隔线
     不做：满屏蕾丝纹理、星光粒子动画、大面积花纹背景

   【铁律】颜色只准引用 parts-tokens.css 的 --part-* 令牌，禁止字面量。
   【造型】只用几何与 SVG 曲线（卷草纹是 SVG path），不许手绘卡通、不用 emoji。
   ========================================================================== */

/* ==========================================================================
   1. 复古金框（双线：外金边 + 内嵌细线）—— 洛可可最核心的识别符号
   ========================================================================== */
.roc-frame {
  position: relative;
  border: 1px solid var(--part-gold-line);
  border-radius: var(--part-r-lg);
}
.roc-frame::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in srgb, var(--part-gold) 35%, transparent);
  border-radius: calc(var(--part-r-lg) - 4px);
  pointer-events: none;
}

/* ==========================================================================
   2. 卷草纹角饰（SVG 曲线，左上 / 右下对称）
      曲线取自洛可可卷草（rocaille）的简化形态：一段外扩的 C 曲线 + 一个卷心圆点
   ========================================================================== */
.roc-ornament { position: relative; }
.roc-ornament::before,
.roc-ornament::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: .85;
}
.roc-ornament::before {
  top: -1px;
  left: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M2 2 C 21 2, 31 11, 27 26 C 25 15, 17 9, 2 11' fill='none' stroke='%23c9a96e' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='4.5' cy='4.5' r='2' fill='%23c9a96e'/%3E%3C/svg%3E");
}
.roc-ornament::after {
  right: -1px;
  bottom: -1px;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M2 2 C 21 2, 31 11, 27 26 C 25 15, 17 9, 2 11' fill='none' stroke='%23c9a96e' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='4.5' cy='4.5' r='2' fill='%23c9a96e'/%3E%3C/svg%3E");
}
body.night .roc-ornament::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M2 2 C 21 2, 31 11, 27 26 C 25 15, 17 9, 2 11' fill='none' stroke='%23d4b87c' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='4.5' cy='4.5' r='2' fill='%23d4b87c'/%3E%3C/svg%3E");
}
body.night .roc-ornament::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M2 2 C 21 2, 31 11, 27 26 C 25 15, 17 9, 2 11' fill='none' stroke='%23d4b87c' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='4.5' cy='4.5' r='2' fill='%23d4b87c'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. 皇冠徽章（用主题 iconfont 的 crown 字形，不引入任何新图标资源）
      icon-crown = \e8b4（static/css/iconfont.css）
   ========================================================================== */
.roc-crown { position: relative; }
.roc-crown::before {
  content: "\e8b4";
  font-family: "iconfont-modown" !important;
  font-size: 1.05em;
  line-height: 1;
  margin-right: .35em;
  vertical-align: -.05em;
}

/* ==========================================================================
   4. 金色细分隔线（中段一颗小菱形，宫廷纹样的收口手法）
   ========================================================================== */
.roc-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 1px;
  min-width: 24px;
  flex: 1 1 40px;
}
.roc-rule::before,
.roc-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--part-gold-line));
}
.roc-rule::after { background: linear-gradient(90deg, var(--part-gold-line), transparent); }
.roc-rule > i,
.roc-rule::marker { }
.roc-rule .gem {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--part-gold);
  transform: rotate(45deg);
}

/* ==========================================================================
   5. 衬线标题 + 金色下划线（洛可可标题不做满，只在下方压一道渐隐金线）
   ========================================================================== */
.roc-title {
  font-family: var(--part-font-serif);
  font-weight: 700;
  letter-spacing: .06em;
  position: relative;
  padding-bottom: .4em;
}
.roc-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--part-gold), transparent);
}

/* ==========================================================================
   6. 复古相框头像（双层边 + 小圆角，宫廷肖像画框的简化）
   ========================================================================== */
.roc-portrait {
  position: relative;
  border-radius: var(--part-r-sm);
  overflow: visible;
}
.roc-portrait img {
  border-radius: var(--part-r-sm);
  border: 1px solid var(--part-gold-line);
}
.roc-portrait::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid color-mix(in srgb, var(--part-gold) 30%, transparent);
  border-radius: calc(var(--part-r-sm) + 3px);
  pointer-events: none;
}

/* ==========================================================================
   7. 落到现有部件 —— 补齐「部件库里没有的洛可可覆盖」
      只加装饰与描边，不动布局尺寸（避免把现有部件排版搞乱）
   ========================================================================== */

/* 7.1 图集卡片：复古金框 + hover 金光 */
.gcard {
  border-radius: var(--part-r-md);
  transition: box-shadow .28s, border-color .28s, transform .28s;
}
.gcard:hover {
  box-shadow: 0 0 0 1px var(--part-gold-line), var(--part-sh-hov);
}
/* 卡片图：相框式内描边 */
.gcard-img {
  border-radius: var(--part-r-sm);
}
.gcard-img::after,
.gcard .gcard-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--part-gold) 28%, transparent);
  border-radius: var(--part-r-sm);
  pointer-events: none;
}

/* 7.2 页头：衬线标题 + 金色下划线；页头区加卷草纹角饰 */
.part-zone-head {
  position: relative;
}
.part-zone-head .roc-ornament::before,
.part-zone-head .roc-ornament::after { z-index: 2; }

/* 7.3 徽章：VIP 用洛可可金 + 皇冠；其余保留语义色但收敛圆角 */
.part-badge {
  border-radius: var(--part-r-sm);
  letter-spacing: .04em;
}
.part-badge--vip {
  background: linear-gradient(100deg, var(--part-vip-1), var(--part-vip-2));
  color: var(--part-vip-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--part-gold) 45%, transparent);
}
.part-badge--vip.roc-crown::before { color: var(--part-vip-ink); }
.part-badge--price {
  background: linear-gradient(100deg, var(--part-royal), var(--part-royal2));
  color: var(--part-on-accent);
}
.part-badge--tuan { background: linear-gradient(100deg, var(--part-rose), var(--part-rose2)); }
.part-badge--promo { background: var(--part-blue); color: var(--part-text); }

/* 7.4 购买条：金框面板（它是页面上最需要"贵重感"的一块） */
.part-buybar {
  border: 1px solid var(--part-gold-line);
  border-radius: var(--part-r-md);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--part-royal) 8%, var(--part-card)),
    color-mix(in srgb, var(--part-gold) 12%, var(--part-card)));
}
.part-price {
  font-family: var(--part-font-serif);
  color: var(--part-gold);
}
body.night .part-price { color: var(--part-gold2); }

/* 7.5 胶囊家族：排序 tab（.part-pill-tab）与工具 chip（.part-tool-chip）
   --------------------------------------------------------------------------
   【2026-10-07 第五批 · 用户拍板方案 A】
     两类控件**语义不同、不合并**，但要归为同一视觉家族，且两种选中态一眼可辨：
       · .part-pill-tab      「我在看哪一批」互斥单选 → 选中 = 深色实心
       · .part-tool-chip     「额外条件」可叠加    → 生效 = 洛可可金渐变

   【统一了哪几项】全部走令牌，不写死字面量：
       圆角   两边都用 --part-r-pill（本节原先 pill 用 -4px、chip 用整值）
       边框   两边都用 --part-gold-line（本节原先 pill 用 gold 40%、chip 用 gold-line）
       高度/字重/字号/行高/过渡  在 parts-ui.css 已对齐（30px / 700 / 13px / 1 / .2s）

   【两种选中态为什么这样分】—— 深色 vs 金色，是全站最强的两组对比：
       深色实心 = 「常态选择」（用户天天看到，最常见，用最沉的色压住）
       金渐变   = 「例外状态」（正在筛、值得点一下，用宫廷金这一记高光）
     若两者都用金，同一行里会出现两个亮胶囊，用户分不清哪个是"当前在看什么"、
     哪个是"正在筛选"—— 这正是本页历史样机 p-list.html 区分两者的初衷。

   【为什么不拿 --part-royal 做 pill 选中态】实测对比度：
       --part-text（白天 #5a5266 / 夜 #ece7f3）→ 白底 7.4:1、夜底 12:1，均达标
       --part-royal（白天 #7c6f91）           → 白底仅 4.1:1，13px 粗体不达标
     故 pill 选中态沿用 --part-text（夜间自动翻成近白配深字，仍是高对比）。

   【关于 .on / .active 两个类名】
     历史遗留：部件实际输出的是 .is-active（见 parts/page-head.php:114），
     .on / .active 在页面上**不出现**（已核实）。按「不擅自删类名」的约定保留它们，
     但把它们的取值与 .is-active **对齐成深色实心** —— 免得将来有人手写 .active
     时突然冒出一个金胶囊，与 chip 的金撞车。 */
.part-pill-tab {
  border-radius: var(--part-r-pill);
  border: 1px solid var(--part-gold-line);
}
/* pill 的三种历史选中类名统一为「深色实心」（含页面实际输出的 .is-active）
   【为什么带 .part-scope 前缀】与本文件其它段（§7.2/§9.7）同口径，
   且能稳压 parts-ui.css:143 的同优先级定义（本文件在它之后加载）。 */
.part-scope .part-pill-tab.is-active,
.part-scope .part-pill-tab.on,
.part-scope .part-pill-tab.active {
  background: var(--part-text);
  border-color: var(--part-text);
  color: var(--part-card);
}
/* 悬停：pill 走金边（与 chip 的 hover 同一手势语言） */
.part-scope .part-pill-tab:hover {
  border-color: var(--part-gold);
  color: var(--part-accent-text);
}

/* chip 的生效态：洛可可金渐变（宫廷里最贵重的一格）
   【为什么要在这里覆盖 parts-ui.css 的 --part-accent 紫】
     parts-ui.css 是皮肤无关的部件库，那里的 .is-accent 用 --part-accent（跟随主题色，
     当前是紫）。紫 solid 与 pill 选中的深色 solid 在同一行里区分度太弱（实测色相差
     仅 #7c6f91 vs #5a5266），不满足「一眼可辨」。故在装饰层换成金渐变。
   【选择器必须 (0,5,0)】本文件 §10 有一条
     `.part-scope .part-head-tools .part-tool-chip`（0,4,0）设了金色描边，
     若这里只写两级会被它压住 —— 金渐变控件外面套一圈金边，等于白描边。 */
.part-scope .part-head-tools .part-tool-chip.is-accent {
  background: linear-gradient(100deg, var(--part-gold), var(--part-gold2));
  border-color: transparent;
  color: var(--part-gold-ink);
  font-weight: 800;
}
/* 金底上的 hover 要提亮，不能沿用 parts-ui.css 的 brightness(.94)（会让金发灰） */
.part-scope .part-head-tools .part-tool-chip.is-accent:hover {
  filter: brightness(1.04);
  color: var(--part-gold-ink);
}

/* 7.6 分隔线：换成金线 + 菱形宝石 */
.part-rule {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 1px;
  background: transparent;
}
.part-rule::before,
.part-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--part-gold-line));
}
.part-rule::after { background: linear-gradient(90deg, var(--part-gold-line), transparent); }

/* 7.7 空状态 / 提示条：金框弱化版 */
.part-note {
  border-radius: var(--part-r-sm);
}
.content-none {
  border: 1px dashed var(--part-gold-line);
  border-radius: var(--part-r-lg);
}

/* 7.8 主按钮：金色渐变 + 金光（"开始游戏"按钮的宫廷版本） */
.btn.roc-primary,
.part-buybar .btn {
  background: linear-gradient(100deg, var(--part-gold), var(--part-gold2));
  color: var(--part-gold-ink);
  border: 1px solid color-mix(in srgb, var(--part-gold) 60%, transparent);
  border-radius: var(--part-r-sm);
  font-weight: 700;
  letter-spacing: .04em;
}
.btn.roc-primary:hover,
.part-buybar .btn:hover {
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--part-gold) 60%, transparent);
}

/* ==========================================================================
   8. 首页模板五的私有骨架（.mbt-h5-*）—— 补齐覆盖盲区
   --------------------------------------------------------------------------
   【为什么单独补这一段】
     模板五（template/homepage5.php）**是走部件库的**：它 mbt_part_mark 声明了
     card / gallery-card / grid / page-head / channel-bar / hero-row / home5，
     卡片与网格确实吃到了洛可可。但它另有一套**本页私有**的骨架类 .mbt-h5-*
     （数据看板 / 分类块 / VIP 引导条），定义在 parts-home.css 里，
     不属于通用部件（不在 parts-ui.css），所以 §7 那一串覆盖**碰不到它们** ——
     用户看到的就是"卡片变了、骨架没变"，观感上像没做适配。

   【为什么选择器要写成 `.mbt-h5 .mbt-h5-kpis` 这种两级】
     parts-home.css 是**按需入队**的（页面 mark 了 'home5' 才加载），
     它排在 parts-rococo.css **之后**。若这里也写 `.mbt-h5-kpis`（0,1,0），
     同优先级下后加载的 parts-home.css 会反压回来，补丁等于白写。
     写成两级（0,2,0）后，无论加载顺序如何都稳定胜出。
   ========================================================================== */

/* 8.1 区块标题：衬线 + 金色渐隐下划线 */
.mbt-h5 .mbt-h5-zone-hd h2 {
  font-family: var(--part-font-serif);
  font-weight: 700;
  letter-spacing: .04em;
  position: relative;
  padding-bottom: .35em;
}
.mbt-h5 .mbt-h5-zone-hd h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--part-gold), transparent);
}

/* 8.2 数据看板：做成"宫廷账本" —— 金框 + 内嵌第二道细线 + 四角卷草
       （它带 overflow-x:auto，用 inset 阴影画内线，不用伪元素定位） */
.mbt-h5 .mbt-h5-kpis {
  border: 1px solid var(--part-gold-line);
  border-radius: var(--part-r-lg);
  background: var(--part-panel);
  box-shadow:
    inset 0 0 0 1px var(--part-panel),
    inset 0 0 0 2px color-mix(in srgb, var(--part-gold) 30%, transparent);
}
/* 数字：衬线 + 洛可可金（账本里的数目字该是金色的手写感）
   【R66】亮底上原来用 --part-gold(#c9a96e) 只有 2.12:1（大字号门槛 3.0
   也不达）；数字是**信息**不是纯装饰，改用 AA 金 --part-gold-aa
   （亮底 5.35:1，仍是金色系、略深，账本感更足）。暗色沿用 gold2 已达标。 */
.mbt-h5 .mbt-h5-kpi .num {
  font-family: var(--part-font-serif);
  color: var(--part-gold-aa);
  letter-spacing: .02em;
}
body.night .mbt-h5 .mbt-h5-kpi .num { color: var(--part-gold2); }

/* 8.3 分类块：金细边 + hover 泛金光 */
.mbt-h5 .mbt-h5-cat {
  border: 1px solid var(--part-gold-line);
  border-radius: var(--part-r-md);
  background: var(--part-card);
}
.mbt-h5 .mbt-h5-cat:hover,
.mbt-h5 .mbt-h5-cat:focus-visible {
  border-color: var(--part-gold);
  box-shadow: 0 0 0 1px var(--part-gold-line), var(--part-sh-hov);
}

/* 8.4 VIP 引导条：洛可可金渐变 + 金框（"开通会员"是页面最该贵重的一块） */
.mbt-h5 .mbt-h5-vipbar {
  border: 1px solid var(--part-gold-line);
  border-radius: var(--part-r-lg);
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--part-gold) 16%, var(--part-card)),
    var(--part-card));
}
/* 图标块：金色方印（原本是圆角方块，这里收成宫廷小圆角 + 金描边） */
.mbt-h5 .mbt-h5-vipbar-ic {
  border-radius: var(--part-r-sm);
  background: linear-gradient(135deg, var(--part-gold), var(--part-gold2));
  color: var(--part-gold-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--part-gold) 45%, transparent);
}
/* 按钮：金底深紫字（宫廷的"开通"该是鎏金牌子，不是黑底） */
.mbt-h5 .mbt-h5-vipbar-btn {
  border-radius: var(--part-r-pill);
  background: linear-gradient(100deg, var(--part-gold), var(--part-gold2));
  color: var(--part-gold-ink);
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--part-gold) 70%, transparent);
}
.mbt-h5 .mbt-h5-vipbar-btn:hover {
  filter: none;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--part-gold) 80%, transparent);
}

/* ==========================================================================
   9. 图集详情页私有骨架（.art-single__* / .art-blk / .art-data / .art-react）
      —— 补齐覆盖盲区
   --------------------------------------------------------------------------
   【为什么单独补这一段】
     详情页（single-artstation.php）骨架样式全在 parts-detail.css，
     属于按需入队的版式层（页面 mark 了 'detail' 才加载），**不在**
     parts-ui.css / parts-card.css 这些通用部件库里 —— 所以 §7 那一串覆盖
     （.gcard / .part-badge / .part-buybar / .part-pill-tab）碰不到它们。
     用户看到的就是"左右栏还是朴素玻璃态，没有金框面板/衬线数字"，
     观感上像没做适配。

   【为什么选择器写成两级 `.part-artstation--single .xxx`】
     parts-detail.css 是**按需入队**的（排在 parts-rococo.css 之后，
     顺序固定 parts-tokens → parts-ui → parts-rococo → parts-detail）。
     若这里写单级 `.art-single__rail`（0,1,0），同优先级下后加载的
     parts-detail.css 会把皮肤反压回去，补丁等于白写。
     写成两级（0,2,0）后，无论加载顺序如何都稳定胜出。

   【铁律】颜色只准引用 parts-tokens.css 的 --part-* 令牌（亮/暗自动切换），
           禁止字面量；只加装饰与描边，**不动任何布局尺寸**
           （rail 392px 宽度、整页锁定链 flex/min-height 一律不碰）。
   ========================================================================== */

/* 9.1 右栏信息面板 → "宫廷金框面板"
       金细边 + 淡紫底（照 §7 的 .part-buybar 手法），内嵌第二道细线；
       右侧分割线换成金线，与左舞台分隔开。 */
.part-artstation--single .art-single__rail{
  border-left:1px solid var(--part-gold-line);
  background:linear-gradient(115deg,
    color-mix(in srgb, var(--part-royal) 7%, var(--part-panel)),
    var(--part-panel));
}

/* 9.2 左舞台 → "宫廷展示柜"：淡紫底 + 极淡金内描边（不遮图、不破坏锁定）
       只用 background / border，不加伪元素，避免盖住查看器图片。 */
.part-artstation--single .art-single__stage{
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--part-royal) 6%, var(--part-page-bg)),
    var(--part-page-bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--part-gold) 22%, transparent);
}

/* 9.3 右栏分块：微金边 + 弱淡紫底（只收敛外观，不动 20px 节奏）
       【为什么加 .art-single 一层】parts-detail.css 里同样有
       `.part-artstation--single .art-blk`（0,2,0），且它后加载 ——
       单写两级会被它反压，必须把特异性顶到 (0,3,0)。 */
.part-artstation--single .art-single .art-blk{
  border:1px solid color-mix(in srgb, var(--part-gold) 30%, var(--part-line));
  border-radius:var(--part-r-md);
  padding:12px 14px;
  background:color-mix(in srgb, var(--part-royal) 4%, var(--part-card));
}
/* 收尾块的分隔线 → 金线 */
.part-artstation--single .art-single .art-blk--ruled{
  border-top-color:var(--part-gold-line);
}

/* 9.4 数据行（已删除，2026-10-07）
       独立的三格「数据」区已按用户「极限压缩」要求并入互动行
       （.art-stat），.art-data 的「宫廷账本」皮肤随之成为死代码。
       不要恢复 —— 除非 info-panel.php 里那块三格结构也回来了。 */

/* 9.5 统计条（2026-10-07：卡片已改成"图标+数字+竖线"的一条）
       皮肤只管颜色：悬停偏金、已赞/已收藏用金 —— 不再有边框与底色，
       所以圆角 / 描边 / 投影这些卡片时代的规则一并删除。
       parts-detail.css 是 `.part-artstation--single .art-react ...`（0,3,0）
       且后加载，这里再加 .art-single 一层顶到 (0,4,0)。 */
/* 【2026-10-07 第二次】统计条搬进 .part-author__stats，皮肤跟着一起搬。 */
.part-artstation--single .art-single .art-react a:hover,
.part-artstation--single .art-single .art-react a:hover .icon,
.part-artstation--single .art-single .part-author__stats a:hover,
.part-artstation--single .art-single .part-author__stats a:hover .icon{
  color:color-mix(in srgb, var(--part-gold) 78%, var(--part-text));
}
/* 已赞 / 已收藏 → 金色（原金渐变底色随卡片一起取消） */
.part-artstation--single .art-single .art-react .article-zan.active,
.part-artstation--single .art-single .art-react .article-collect.active,
.part-artstation--single .art-single .art-react .article-zan.active .icon,
.part-artstation--single .art-single .art-react .article-collect.active .icon,
.part-artstation--single .art-single .part-author__stats .article-zan.active,
.part-artstation--single .art-single .part-author__stats .article-collect.active,
.part-artstation--single .art-single .part-author__stats .article-zan.active .icon,
.part-artstation--single .art-single .part-author__stats .article-collect.active .icon{
  color:var(--part-gold);
}

/* 9.6 快捷键提示：弱金提示语
       parts-detail.css 的 `.part-artstation--single .art-keys` 同 (0,2,0)
       后加载，需 .art-single 一层升到 (0,3,0)。
       2026-10-08 键帽化：说明文字与分隔点走弱金；键帽本体保持面板浅底
       （洛可可下 --part-card 已是珍珠白），只让文字微染金。 */
.part-artstation--single .art-single .art-keys{
  color:color-mix(in srgb, var(--part-gold) 60%, var(--part-text3));
}

/* D-2/Q-10：原 60% 金混合实测亮色 2.89 FAIL；15% 版实测 4.48 仍差 0.02，
   再降到 10% 微染金（保留设计意图）+ --part-text2 达标档。
   parts-detail.css 基础版为纯 --part-text3 */
.part-artstation--single .art-single .part-keys-desc{
  color:color-mix(in srgb, var(--part-gold) 10%, var(--part-text2));
}

.part-artstation--single .art-single .part-keycap{
  color:color-mix(in srgb, var(--part-gold) 70%, var(--part-text2));
  border-color:color-mix(in srgb, var(--part-gold) 45%, var(--part-line2));
  background:color-mix(in srgb, var(--part-card) 88%, var(--part-gold2) 12%);
}

/* 9.7 右栏眉标（.part-eyebrow 骨架在 parts-ui.css，本文件后加载，
       单级即可胜出；这里仍保持两级，防 parts-viewer.css 的 .part-info__* 波及） */
.part-artstation--single .part-eyebrow{
  color:color-mix(in srgb, var(--part-gold) 65%, var(--part-text2));
}

/* ==========================================================================
   9. 页头部件（.part-head-row / .part-head-tools）
   --------------------------------------------------------------------------
   【背景】页头部件（parts/page-head.php）的类名原是 `.art-head-row` / `.art-head-tools`，
     带 `art-` 前缀看起来像"图集专用"，实际上它定义在**通用库** parts-ui.css:299
     （用 .part-scope 作用域限定），首页模板五、图集列表页、频道页都在用。
     2026-10-07 已统一改名为 .part-head-*，避免以后误判成页面私有类。

   【为什么要给它补皮肤】它的规则虽然在库里，但一直是普通黑体标题 + 无装饰，
     而同页的卡片/购买条都已经洛可可化了 —— 于是页头成了整套皮肤里唯一
     "没参与"的那一块，用户看到的"筛选条不像统一库做的"就是它。
   ========================================================================== */
.part-scope .part-head-row h2,
.part-scope .part-head-row h3 {
  font-family: var(--part-font-serif);
  font-weight: 700;
  letter-spacing: .04em;
  position: relative;
  padding-bottom: .32em;
}
/* 标题下的金线：与 §8.1（模板五区块标题）同一手法，两处保持一致 */
.part-scope .part-head-row h2::after,
.part-scope .part-head-row h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--part-gold), transparent);
}
/* 标题下面那行小字（英文/副标题）：字距放宽，弱化成金调 */
.part-scope .part-head-row small {
  letter-spacing: 2.6px;
  color: var(--part-text3);
}
/* 右侧工具区：胶囊金细边，与站内其它胶囊（§7.5）同一套 */
.part-scope .part-head-tools .part-tool-chip {
  border: 1px solid var(--part-gold-line);
  border-radius: var(--part-r-pill);
}
.part-scope .part-head-tools .part-tool-chip:hover {
  border-color: var(--part-gold);
  color: var(--part-accent-text);
}