/* ════════════════════════════════════════════════════════════════════════
   bz8.css — 三件事收尾（2026-11-05）

   ① 药丸：撤掉「强制 50% 两列」，改成「自然宽度、装不下才换行」
      用户原话：「我让你把功能页做成一行，拉不完就变成两行，你又这样做，
                  谁会去拉到后面呢？」
      —— 他要的是：能一行装下就一行，装不下才折行。我上次强制 calc(50% - 4px)
         导致每行只有 2 个、共 4 行，太浪费纵向空间。
      修法：width: auto + flex-wrap: wrap（内容宽度自然排列）

   ② 模板库：横滑大图卡（照 Lovart 内容流）
      真实 DOM：renderTplBrowse() 生成 .tpl-cat（分类标题）+ .tpl-grid + .tpl-item
      修法：.tpl-grid 改成 auto-fill 网格，卡片给圆角/图比例/悬停

   ③ 生成记录：卡片流
      真实 DOM：.rec-grid + #recList
      修法：卡片化，图 + 信息分行
   ════════════════════════════════════════════════════════════════════════ */

/* ── ① 药丸：自然宽度，装不下才换行（桌面/手机通用）──────────────────── */
html[data-ui="crisp"] #view-work .gen-mode-bar,
html[data-ui="crisp"] .gen-mode-bar {
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}
html[data-ui="crisp"] #view-work #genModeSeg,
html[data-ui="crisp"] #genModeSeg {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* 关键：不再固定 50%，按内容宽度 */
html[data-ui="crisp"] #view-work #genModeSeg > button,
html[data-ui="crisp"] #genModeSeg > button,
html[data-ui="crisp"] #view-work #genModeSeg > button:not(.active),
html[data-ui="crisp"] #view-work #genModeSeg > button.active {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  line-height: 32px !important;
  border-radius: 9999px !important;
  white-space: nowrap !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 手机上：字号略降，仍按内容宽度自然换行 */
@media (max-width: 860px) {
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    line-height: 30px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 380px) {
  html[data-ui="crisp"] #view-work #genModeSeg > button,
  html[data-ui="crisp"] #genModeSeg > button {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

/* ── ② 模板库：横滑大图卡 ──────────────────────────────────────────────── */
html[data-ui="crisp"] #tplBrowse {
  display: block !important;
}
html[data-ui="crisp"] .tpl-cat {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0a0a0a !important;
  letter-spacing: -.015em !important;
  margin: 22px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
}
html[data-ui="crisp"] .tpl-cat:first-child { margin-top: 4px !important; }

html[data-ui="crisp"] .tpl-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
  gap: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
}
html[data-ui="crisp"] .tpl-item {
  border: 1px solid #0000000f !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: border-color .16s cubic-bezier(.4,0,.2,1),
              transform .16s cubic-bezier(.4,0,.2,1) !important;
  cursor: pointer !important;
}
html[data-ui="crisp"] .tpl-item:hover {
  border-color: #0000001a !important;
  transform: translateY(-2px) !important;
}
/* 模板缩略图：固定比例 3:4，图铺满 */
html[data-ui="crisp"] .tpl-item > img,
html[data-ui="crisp"] .tpl-item .tpl-thumb,
html[data-ui="crisp"] .tpl-item .detail-preview {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
  background: #f7f7f7 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
html[data-ui="crisp"] .tpl-item > .tlabel,
html[data-ui="crisp"] .tpl-item .tlabel {
  display: block !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #0a0a0a !important;
  line-height: 1.4 !important;
  border-top: 1px solid #0000000a !important;
  text-align: left !important;
}
html[data-ui="crisp"] .tpl-item .detail-preview b {
  display: block !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #0a0a0a !important;
}

/* ── ③ 生成记录：卡片流 ──────────────────────────────────────────────── */
html[data-ui="crisp"] .rec-grid,
html[data-ui="crisp"] #recList {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
  gap: 14px !important;
}
html[data-ui="crisp"] #recList > *,
html[data-ui="crisp"] .rec-item,
html[data-ui="crisp"] .rec-card {
  border: 1px solid #0000000f !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: border-color .16s cubic-bezier(.4,0,.2,1),
              transform .16s cubic-bezier(.4,0,.2,1) !important;
}
html[data-ui="crisp"] #recList > *:hover {
  border-color: #0000001a !important;
  transform: translateY(-2px) !important;
}
html[data-ui="crisp"] #recList img {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
  background: #f7f7f7 !important;
}
/* 记录卡片里的元信息行 */
html[data-ui="crisp"] #recList .rec-meta,
html[data-ui="crisp"] #recList .rec-info {
  padding: 8px 10px !important;
  font-size: 12px !important;
  color: #0000008c !important;
  line-height: 1.5 !important;
  border-top: 1px solid #0000000a !important;
}

/* ── ④ 深色模式补充 ──────────────────────────────────────────────────── */
html[data-ui="crisp"][data-theme="dark"] .tpl-item,
html[data-ui="crisp"][data-theme="dark"] #recList > * {
  background: #1c1c1e !important;
  border-color: #ffffff0f !important;
}
html[data-ui="crisp"][data-theme="dark"] .tpl-item > .tlabel,
html[data-ui="crisp"][data-theme="dark"] #recList .rec-meta {
  color: #ededed !important;
  border-top-color: #ffffff0a !important;
}