/* ════════════════════════════════════════════════════════════════════════
   bz3.css — 收尾修正（2026-11-05）

   截图实测到的两个问题：

   ① 药丸按钮文字重叠
      根因：白栈的模式按钮文字是「服装出图 / 白底图 10币 / 排版 13币」这种
            两段式长文案（约 20 字），而 Lovart 的药丸是「营销素材」4 字。
            强行做成 h32 单行药丸 → 文字被压扁重叠。
      修法：**不能照抄 h32**。改成「高度自适应 + 允许两行 + 内边距合理」，
            保持药丸外形（全圆角）但高度弹性。这是必须偏离 Lovart 的地方 ——
            因为我们的信息量是它的 5 倍。

   ② 皮肤调试浮层（#uiSkinSwitch）又在左下角压内容
      根因：cst-mobile.css 被我清理掉了，里面隐藏它的规则也一起没了。
      修法：在 bz3 里恢复「手机上隐藏 + 桌面右下角」。

   ③ 统计条里的数字和标签还是挤在一行
      （截图里「12 注册用户 310 近3天任务」是横向排列）
      根因：它是 inline-flex + baseline，Lovart 的做法要改成两行。
      修法：改成 flex-direction: column + 单元格内边距。
   ════════════════════════════════════════════════════════════════════════ */

/* ── ① 模式按钮：药丸外形 + 高度自适应（不照抄 h32） ───────────────────── */
html[data-ui="crisp"] #view-work #genModeSeg,
html[data-ui="crisp"] #genModeSeg {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: stretch !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

html[data-ui="crisp"] #view-work #genModeSeg button:not(.active),
html[data-ui="crisp"] #genModeSeg button:not(.active) {
  height: auto !important;
  min-height: 32px !important;
  padding: 6px 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: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: none !important;
  letter-spacing: -.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html[data-ui="crisp"] #view-work #genModeSeg button.active,
html[data-ui="crisp"] #genModeSeg button.active {
  height: auto !important;
  min-height: 32px !important;
  padding: 6px 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: 14px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  text-align: center !important;
  box-shadow: none !important;
  letter-spacing: -.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
}

/* 让长文案能自然地折成两行，而不是被压扁 */
html[data-ui="crisp"] #genModeSeg button {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ── ② 统计条：标签在上、数字在下 ──────────────────────────────────────── */
html[data-ui="crisp"] #view-work #adminStrip .as-item {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: var(--bz-bg-canvas, #f5f5f5) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}
html[data-ui="crisp"] #view-work #adminStrip .as-item b {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--bz-t1, #000000e6) !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
}
html[data-ui="crisp"] #view-work #adminStrip .as-item span,
html[data-ui="crisp"] #view-work #adminStrip .as-item {
  color: var(--bz-t3, #0000004d) !important;
}
/* 取消旧的固定高度，让它自适应 */
html[data-ui="crisp"] #view-work #adminStrip {
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}

/* ── ③ 皮肤调试浮层：手机隐藏、桌面挪到右下 ────────────────────────────── */
@media (max-width: 860px) {
  #uiSkinSwitch,
  html[data-ui="crisp"] #uiSkinSwitch,
  html[data-ui="none"] #uiSkinSwitch {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}
@media (min-width: 861px) {
  html[data-ui="crisp"] #uiSkinSwitch,
  html[data-ui="none"] #uiSkinSwitch {
    position: fixed !important;
    left: auto !important;
    right: 14px !important;
    bottom: 14px !important;
    top: auto !important;
    height: 26px !important;
    max-height: 26px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 2px 6px !important;
    border-radius: 9999px !important;
    opacity: .55 !important;
    z-index: 50 !important;
  }
  html[data-ui="crisp"] #uiSkinSwitch > * {
    height: 20px !important; line-height: 20px !important;
    font-size: 11px !important; padding: 0 5px !important;
  }
}

/* ── ④ 生成码头：圆角浮动感 ────────────────────────────────────────────── */
html[data-ui="crisp"] #genDock {
  background: var(--bz-bg, #fff) !important;
  border-top: 1px solid var(--bz-l1, #00000012) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,.05) !important;
}
html[data-ui="crisp"] #genDock .btn,
html[data-ui="crisp"] #genDock button {
  border-radius: 12px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

/* ── ⑤ 底部导航条 ──────────────────────────────────────────────────────── */
html[data-ui="crisp"] #bnBar {
  background: var(--bz-bg, #fff) !important;
  border-top: 1px solid var(--bz-l1, #00000012) !important;
}
html[data-ui="crisp"] #bnBar > *,
html[data-ui="crisp"] #bnBar a,
html[data-ui="crisp"] #bnBar button {
  font-size: 11px !important;
  color: var(--bz-t3, #0000004d) !important;
}
html[data-ui="crisp"] #bnBar .on,
html[data-ui="crisp"] #bnBar [aria-current] {
  color: var(--bz-t1, #000000e6) !important;
  font-weight: 500 !important;
}

/* ── ⑥ 深色模式补齐 ────────────────────────────────────────────────────── */
html[data-ui="crisp"][data-theme="dark"] #view-work #genModeSeg button:not(.active) {
  background: #1a1a1a !important;
  border-color: #ffffff1a !important;
  color: #f2f2f2e6 !important;
}
html[data-ui="crisp"][data-theme="dark"] #view-work #genModeSeg button.active {
  background: #ffffff14 !important;
  border-color: #ffffff26 !important;
  color: #f2f2f2e6 !important;
}
html[data-ui="crisp"][data-theme="dark"] #view-work #adminStrip .as-item {
  background: #101010 !important;
}