/* ════════════════════════════════════════════════════════════════════════
   bz2.css — 特异性命中层（2026-11-05）
   依据错误日志 E-39 的教训：改样式前先枚举「命中目标元素的所有规则 + 特异性」。

   实测结果（页面内 dump，30 条规则命中模式按钮、17 条命中卡片）：

   ① 模式按钮最高特异性来自 v10.css：
        html[data-ui="crisp"] #view-work #genModeSeg button.active  → 2 个 ID + 2 class + !important
        html[data-ui="crisp"] #view-work #genModeSeg button          → 2 个 ID + 1 class + !important
      bz.css 的 `html[data-ui="crisp"] .segmented > button` 是 0 ID + 2 class → 输。

   ② 卡片最高特异性来自 v10.css：
        html[data-ui="crisp"] .work-grid > .card, .work-grid > .col-... （一条规则里 11 个选择器并列）
      bz.css 的 `html[data-ui="crisp"] .card` 是 0 ID + 2 class → 输。

   本层做法：**用完全相同的选择器** + `!important`，靠「同特异性 + 后加载」赢。
   不写更变态的选择器（避免以后越来越难覆盖）。

   只动视觉：颜色/字号/圆角/边框/高度/内边距/阴影。
   不动：display / position / grid / flex / DOM。
   ════════════════════════════════════════════════════════════════════════ */

/* ── ① 模式按钮：药丸行（用 v10 同款双 ID 选择器） ─────────────────────── */
html[data-ui="crisp"] #view-work #genModeSeg button:not(.active),
html[data-ui="crisp"] #genModeSeg button:not(.active) {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  background: #fff !important;
  border: 1px solid var(--bz-l2, #0000001a) !important;
  color: var(--bz-t1, #000000e6) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  box-shadow: none !important;
  letter-spacing: -.01em !important;
}

html[data-ui="crisp"] #view-work #genModeSeg button.active,
html[data-ui="crisp"] #genModeSeg button.active {
  height: 32px !important;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  background: var(--bz-ov-a, #00000014) !important;
  border: 1px solid var(--bz-l3, #00000026) !important;
  color: var(--bz-t1, #000000e6) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  box-shadow: none !important;
  letter-spacing: -.01em !important;
}

/* ── ② 卡片：r12 + 7% 边，无阴影（用 v10 同款 .work-grid > .card） ──────── */
html[data-ui="crisp"] .work-grid > .card,
html[data-ui="crisp"] .work-grid > .card.col-upload,
html[data-ui="crisp"] .work-grid > .card.col-tpl,
html[data-ui="crisp"] .work-grid > .card.col-param,
html[data-ui="crisp"] .view .card {
  background: #fff !important;
  border: 1px solid var(--bz-l1, #00000012) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html[data-ui="crisp"] .work-grid > .card:hover,
html[data-ui="crisp"] .view .card:hover {
  border-color: var(--bz-l2, #0000001a) !important;
  box-shadow: none !important;
}

/* ── ③ 卡片标题 ────────────────────────────────────────────────────────── */
html[data-ui="crisp"] .work-grid > .card .card-title,
html[data-ui="crisp"] .view .card .card-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--bz-t1, #000000e6) !important;
  letter-spacing: -.012em !important;
  line-height: 22px !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
}

/* ── ④ 顶部统计条 ──────────────────────────────────────────────────────── */
html[data-ui="crisp"] #view-work #adminStrip {
  background: #fff !important;
  border: 1px solid var(--bz-l1, #00000012) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}
html[data-ui="crisp"] #view-work #adminStrip .as-item {
  background: var(--bz-bg-canvas, #f5f5f5) !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  font-size: 12px !important;
  color: var(--bz-t3, #0000004d) !important;
  font-weight: 400 !important;
}
html[data-ui="crisp"] #view-work #adminStrip .as-item b {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--bz-t1, #000000e6) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.02em !important;
}

/* ── ⑤ 主按钮 / 生成按钮 ──────────────────────────────────────────────── */
html[data-ui="crisp"] #view-work #genDock button,
html[data-ui="crisp"] #genDock .btn {
  height: 44px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
html[data-ui="crisp"] #genDock .btn.primary,
html[data-ui="crisp"] #view-work #genDock .btn.primary {
  background: var(--bz-inv, #2c2c2c) !important;
  border: 1px solid var(--bz-inv, #2c2c2c) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ── ⑥ 上传区 ──────────────────────────────────────────────────────────── */
html[data-ui="crisp"] #view-work #dropZone,
html[data-ui="crisp"] #dropZone {
  border: 1.5px dashed var(--bz-l2, #0000001a) !important;
  border-radius: 12px !important;
  background: var(--bz-bg-canvas, #f5f5f5) !important;
}
html[data-ui="crisp"] #view-work #dropZone:hover {
  border-color: var(--bz-l3, #00000026) !important;
  background: #fff !important;
}

/* ── ⑦ 深色模式 ────────────────────────────────────────────────────────── */
html[data-ui="crisp"][data-theme="dark"] #view-work #genModeSeg button:not(.active) {
  background: var(--bz-bg, #1a1a1a) !important;
  color: var(--bz-t1, #f2f2f2e6) !important;
  border-color: var(--bz-l2, #ffffff1a) !important;
}
html[data-ui="crisp"][data-theme="dark"] #view-work #genModeSeg button.active {
  background: var(--bz-ov-a, #ffffff14) !important;
  border-color: var(--bz-l3, #ffffff26) !important;
  color: var(--bz-t1, #f2f2f2e6) !important;
}
html[data-ui="crisp"][data-theme="dark"] .work-grid > .card {
  background: var(--bz-bg, #1a1a1a) !important;
  border-color: var(--bz-l1, #ffffff12) !important;
}
html[data-ui="crisp"][data-theme="dark"] #view-work #adminStrip { background: var(--bz-bg, #1a1a1a) !important; }
html[data-ui="crisp"][data-theme="dark"] #view-work #adminStrip .as-item { background: var(--bz-bg-canvas, #101010) !important; }

/* ── ⑧ 手机端：药丸缩小、卡片圆角收一档 ─────────────────────────────────── */
@media (max-width: 860px) {
  html[data-ui="crisp"] #view-work #genModeSeg button:not(.active),
  html[data-ui="crisp"] #view-work #genModeSeg button.active {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 28px !important;
  }
  html[data-ui="crisp"] .work-grid > .card { border-radius: 10px !important; }
}