/* ══════════════════════════════════════════════════════════════════════
   花字面板 · 底色与整体 UI 统一（纯 CSS 覆盖层）
   ══════════════════════════════════════════════════════════════════════

   【用户原话·第 1 轮】
     「还有那个花字，花字的底色是黑色，它和整个 UI 非常不搭。」
   【用户原话·第 2 轮（本轮，给的是截图）】
     「你看一下这两个画质的底色，黑色帮我给它修改一下，这个太难看了。」
     —— 指的是「标题」页和「音字」页那 12 款花字样张，两页都是黑的。

   【实测根因】（探针读 computed style，两页一致）
     花字卡片 <button>  bg = rgb(23, 38, 46)   ← 本就偏深（跟着深色 UI 令牌）
     样张 <i>           bg = rgb(27, 35, 43)   ← 【真凶】
     我的浅色预览纸 ::before bg = rgb(233,238,242) 铺了，但【被 <i> 自己那层
     background-color 盖住】—— background-clip:text 只剪 background-image，
     不剪 background-color，所以那层深色照常显示。

     权威规则在 dist/video-remix.css：
       .vr-huazi-card i { ... background: var(--surface3, #1b232b) }
       .vr-huazi-card i { background: var(--l-inset) }     ← ⚠️ --l-inset 在
         .vr-shell 作用域里【未定义】→ 回退成 #1b232b 深色 → 永远黑底。
     （浅色主题的 .vr-shell[data-theme="light"] 是另一套 data 属性，
       而日间模式实际走 html[data-vr-theme="light"]，两条对不上。）

   【做法】
     ① 把 <i> 的 background-color 清成 transparent（只清「色」，
        不动行内的 background-image 渐变 —— 花字本身的颜色/渐变效果必须保留）
     ② 仍用 ::before 铺【浅色预览纸】在下层（z-index:-1）
     ③ 卡片本体也统一到工作台 surface 令牌，日/夜各一套
   ⚠️ 项目硬性契约：每个深色底都要配一条浅色规则。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 卡片底色 ──
   ⚠️【实测·第 3 次报】用户原话：「把这个黑色给我改成浅色，和 UI 一样的浅色」
      日间模式实测：卡片 background = rgba(0,0,0,0) 透明 → 透出更深的底 → 看起来还是黑卡片。
      所以必须【显式】给日间模式一个浅色不透明底，不能靠透传。
   ⚠️ 第 1 条写「默认（夜间）」、后面写「日间」，两条都要给【不透明】的色值。 */
.vr-huazi-grid { gap: 7px; }
/* 夜间（默认） */
.vr-huazi-card {
  background: #1a2029;
  border-color: #2b3540;
  border-radius: 9px;
  /* 让伪元素能相对卡片定位 */
  position: relative;
  overflow: visible;
}
.vr-huazi-card:hover { background: #202832; border-color: #3d4a57; }
.vr-huazi-card.is-active { background: #17262e; border-color: #7adbe9; }
.vr-huazi-card:active { transform: none; }

/* 日间：卡片必须是【不透明的浅色】，和右侧面板同一个浅色体系
   ⚠️⚠️【第 3 次报的真凶 · 必看】
      theme-day-night.css（生成器产出）里有一条：
        html[data-vr-theme="light"] .vr-huazi-card { background: var(--surface2, #ffffff) }
      看着回退值是白的，但 `--surface2` 在 .vr-shell 里【是有定义的】——
      定义的是【深色】（--surface2:#161c22 系）→ 日间模式卡片拿到的是深色底！
      而且这条规则的特异性与我同级、又排在后面 → 我不加 !important 就被压住。
   所以这里【必须】用 !important，并且给不透明浅色值。 */
html[data-vr-theme="light"] .vr-huazi-card,
html[data-vr-theme="light"] .vr-shell .vr-huazi-card,
.vr-shell[data-theme="light"] .vr-huazi-card {
  background: #fdf6f7 !important;
  border-color: #f0dade !important;
}
html[data-vr-theme="light"] .vr-huazi-card:hover,
html[data-vr-theme="light"] .vr-shell .vr-huazi-card:hover,
.vr-shell[data-theme="light"] .vr-huazi-card:hover {
  background: #fbf0f1 !important;
  border-color: #e8ccd2 !important;
}
html[data-vr-theme="light"] .vr-huazi-card.is-active,
html[data-vr-theme="light"] .vr-shell .vr-huazi-card.is-active,
.vr-shell[data-theme="light"] .vr-huazi-card.is-active {
  background: rgba(232, 69, 47, .09) !important;
  border-color: #e8452f !important;
  box-shadow: 0 0 0 1px rgba(232, 69, 47, .35) !important;
}
/* 卡片下方的样式名：日间用中灰，别用浅灰（浅底上看不清） */
html[data-vr-theme="light"] .vr-huazi-card b,
.vr-shell[data-theme="light"] .vr-huazi-card b {
  color: #5d6167 !important;
}
html[data-vr-theme="light"] .vr-huazi-card.is-active b,
.vr-shell[data-theme="light"] .vr-huazi-card.is-active b {
  color: #c0392b !important;
}

/* ── ⚠️【第 4 个同类坑】整条「花字」链上的容器在日间必须是【不透明浅色】 ──
   实测：.vr-huazi-fold 用的是 `background: var(--l-panel)`，
        而 --l-panel 在 .vr-shell 作用域里【未定义】→ 回退 transparent
         → 透出面板底 → 里面的卡片跟着显深色。
   修法：日间模式把 折叠区 / 网格 全部钉成不透明浅色，不管变量有没有定义。 */
html[data-vr-theme="light"] .vr-huazi-fold,
html[data-vr-theme="light"] .vr-shell .vr-huazi-fold,
.vr-shell[data-theme="light"] .vr-huazi-fold {
  background: #ffffff !important;
  border-color: #f0dade !important;
}
html[data-vr-theme="light"] .vr-huazi-fold[open] > summary,
.vr-shell[data-theme="light"] .vr-huazi-fold[open] > summary {
  border-bottom-color: #f0dade !important;
}
html[data-vr-theme="light"] .vr-huazi-grid,
html[data-vr-theme="light"] .vr-shell .vr-huazi-grid,
.vr-shell[data-theme="light"] .vr-huazi-grid {
  background: transparent !important;
}
/* 外层小节（VR 检查器里的「字幕」区）日间也要浅底，否则卡片外圈还是深色 */
html[data-vr-theme="light"] .vr-subsection,
.vr-shell[data-theme="light"] .vr-subsection {
  background: transparent !important;
  border-top-color: #f2dade !important;
}
html[data-vr-theme="light"] .vr-inspector,
.vr-shell[data-theme="light"] .vr-inspector {
  background: #ffffff !important;
  color: #2a2c31 !important;
}
/* 标题页的标题设置区同理 */
html[data-vr-theme="light"] .vr-title-section,
.vr-shell[data-theme="light"] .vr-title-section {
  background: transparent !important;
  color: #2a2c31 !important;
}

/* ── 样张 <i>：清掉那层深色 background-color（真凶），保留行内渐变文字 ──
   🔧 核心修复说明：
     权威规则来自 video-remix.css / theme-day-night.css（生成器产出）：
       .vr-huazi-card i { background: var(--surface3, #1b232b) }
       html[data-vr-theme="light"] .vr-huazi-card i { background: var(--surface3, #fbf1f2) }
     两条看着回退值一深一浅，但 `--surface3` 在 .vr-shell 里【是有定义的】，
     定义的是【深色】→ 夜间和日间拿到的都是深色底。
     而 background-clip:text 只剪 background-image，【不剪 background-color】，
     所以那层深色照常显示，把我的浅色预览纸盖住了。
   修法：只清 background-color（色层），行内的 background-image（渐变）+
        background-clip:text 全部保留 → 花字自己的白字/描边/发光/渐变不受影响。
   ⚠️ 必须 !important：生成器那条规则特异性同级且排在后面。
   ⚠️ 深浅两条都要钉，否则切主题就露馅。 */
.vr-huazi-card i,
.vr-huazi-card > i,
html[data-vr-theme="light"] .vr-huazi-card i,
html[data-vr-theme="light"] .vr-huazi-card > i,
.vr-shell[data-theme="light"] .vr-huazi-card i,
.vr-shell[data-theme="light"] .vr-huazi-card > i {
  background-color: transparent !important;
}

/* ── 样张 <i> 的尺寸与层叠（与上面的色层分开写，避免结构混淆） ── */
.vr-huazi-card i,
.vr-huazi-card > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 56px;
  max-width: 100%;
  min-height: 30px;
  padding: 3px 10px;
  border-radius: 6px;
  position: relative;
  z-index: 1;
}

/* 浅色预览纸：压在花字下面，不影响上面的渐变文字 */
.vr-huazi-card i::before,
.vr-huazi-card > i::before {
  content: '';
  position: absolute;
  inset: 0;
  /* ⚠️ z-index:-1 在同一个层叠上下文里会被父级的背景盖住；
     父级 <i> 现在是 transparent 了，所以能正常透出来。 */
  z-index: -1;
  border-radius: 6px;
  background: #e9eef2;
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ── 日间主题：预览纸再亮一档 ──
   ⚠️ 日间模式的实际属性是 html[data-vr-theme="light"]（不是 .vr-shell[data-theme]），
      两条都写，谁生效用谁。 */
html[data-vr-theme="light"] .vr-huazi-card,
.vr-shell[data-theme="light"] .vr-huazi-card {
  background: #ffffff;
  border-color: #f0dade;
}
html[data-vr-theme="light"] .vr-huazi-card:hover,
.vr-shell[data-theme="light"] .vr-huazi-card:hover {
  background: #fdf6f6;
  border-color: #e0c8cd;
}
html[data-vr-theme="light"] .vr-huazi-card.is-active,
.vr-shell[data-theme="light"] .vr-huazi-card.is-active {
  background: rgba(232, 69, 47, .08);
  border-color: #e8452f;
}
html[data-vr-theme="light"] .vr-huazi-card i::before,
html[data-vr-theme="light"] .vr-huazi-card > i::before,
.vr-shell[data-theme="light"] .vr-huazi-card i::before,
.vr-shell[data-theme="light"] .vr-huazi-card > i::before {
  background: #f4f7f9;
  border-color: rgba(0, 0, 0, .06);
}
html[data-vr-theme="light"] .vr-huazi-card b,
.vr-shell[data-theme="light"] .vr-huazi-card b {
  color: #5d6167;
}

/* ── 卡片略高一点，样张与标签之间呼吸更足（原来标签贴着样张） ── */
.vr-huazi-card { padding: 8px 5px 7px; gap: 5px; }
.vr-huazi-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }