/*
 * workflow-gallery.css — K-WF-GALLERY · 灵感工作流画廊 + 代入 chip + 工具条 pill + 抽屉 A+C + toast
 * 视觉基准：tmp/design-preview-workflow-gallery.html / tmp/design-preview-chat-templates.html
 * 深色基调对齐 image-chat.html；仅用 wf- 前缀，避免与 ic- 现有样式冲突。
 */

/* ============ 画廊头部 / 图例 / tabs ============ */
/* K-FULLWIDTH-B: 画廊 full-bleed breakout 至 94vw（分类卡已 T29-S0 收回容器内 4 列贴紧 composer，仅画廊保留 breakout；组名栏仍左置 148px 不变，超窄屏见文末 @media 720px） */
.wf-gallery-mount { margin-top: 44px; padding-top: 28px; border-top: 1px dashed rgba(148,163,184,.16); text-align: left; width: 94vw; margin-left: calc(50% - 47vw); }
.wf-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.wf-head h2 { margin: 0; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.3px; }
.wf-head h2 small { font-size: 11px; color: #64748b; font-weight: 600; margin-left: 8px; letter-spacing: .12em; text-transform: uppercase; }
.wf-head-desc { color: #94a3b8; font-size: 12px; font-weight: 500; }
.wf-legend { display: flex; gap: 14px; font-size: 11.5px; color: #94a3b8; margin: 8px 0 4px; flex-wrap: wrap; }
.wf-legend span { display: inline-flex; align-items: center; gap: 6px; }
.wf-legend .wf-st { position: static; box-shadow: none; }

.wf-tabs { display: flex; gap: 6px; margin: 10px 0 18px; flex-wrap: wrap; }
.wf-tab {
  padding: 5px 13px; font-size: 12px; font-weight: 700; color: #94a3b8;
  background: rgba(15,23,42,.62); border: 1px solid rgba(148,163,184,.16);
  border-radius: 999px; cursor: pointer; font-family: inherit; transition: color .12s, border-color .12s, background .12s;
}
.wf-tab:hover { color: #e2e8f0; border-color: rgba(124,58,237,.30); }
.wf-tab.on { color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); border-color: transparent; }

/* ============ 分组行 ============ */
.wf-groups { display: flex; flex-direction: column; gap: 26px; }
.wf-grp { display: flex; gap: 18px; position: relative; }
.wf-grp-side { width: 148px; flex-shrink: 0; padding-top: 10px; display: flex; flex-direction: column; }
.wf-grp-side h3 { font-size: 15px; margin: 0 0 4px; color: #e5e7eb; }
.wf-grp-side p { font-size: 11px; color: #8b95a8; margin: 0; line-height: 1.55; }
.wf-stage { display: inline-block; font-size: 9.5px; margin-top: 8px; border-radius: 999px; padding: 1px 8px; border: 1px solid; align-self: flex-start; }
.st-now { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.st-part { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.st-plan { color: #94a3b8; border-color: rgba(148,163,184,.3); background: rgba(148,163,184,.06); }
.wf-grp-row {
  flex: 1; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px 10px;
  scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.3) transparent; min-width: 0;
}
.wf-grp-row::-webkit-scrollbar { height: 6px; }
.wf-grp-row::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 3px; }

/* ============ 工作流卡 ============ */
.wf-card {
  flex-shrink: 0; width: 196px; height: 236px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(148,163,184,.16); position: relative; background: #0d1526;
  cursor: pointer; padding: 0; text-align: left; font-family: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.wf-card:hover { transform: translateY(-3px); border-color: rgba(129,140,248,.55); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.wf-card:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
.wf-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: none; overflow: hidden; }
/* K-WF-COVERS:真图封面套在渐变容器内(约定路径 assets/wf-covers/<卡id>.jpg),404 onerror 自摘 → 渐变兜底 */
.wf-cvimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-badge { position: absolute; left: 8px; top: 8px; font-size: 9.5px; color: #e5e7eb; background: rgba(0,0,0,.55); border-radius: 5px; padding: 1px 7px; z-index: 2; }
.wf-tx {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 11px 10px;
  background: linear-gradient(180deg, transparent, rgba(2,6,16,.62) 45%, rgba(2,6,16,.9));
}
.wf-tx b { font-size: 12.5px; color: #f1f5f9; display: block; line-height: 1.4; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.wf-tx small { font-size: 10px; color: #b6c0d2; display: block; margin-top: 2px; line-height: 1.45; }
.wf-st { position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0,0,0,.35); z-index: 2; }
.wf-st.g { background: #4ade80; } .wf-st.y { background: #fbbf24; } .wf-st.w { background: #64748b; }
.wf-dim { opacity: .62; } .wf-dim:hover { opacity: .85; }
.wf-beta { position: absolute; right: 8px; top: 22px; z-index: 3; font-size: 8.5px; color: #fbbf24; background: rgba(2,6,16,.7); border: 1px solid rgba(251,191,36,.4); border-radius: 6px; padding: 1px 5px; }

/* 封面渐变（对齐 design-preview .g1..g8） */
.wf-g1 { background: linear-gradient(150deg, #1e3a8a, #4c1d95); }
.wf-g2 { background: linear-gradient(150deg, #0e4429, #4d7c0f); }
.wf-g3 { background: linear-gradient(150deg, #7c2d12, #b45309); }
.wf-g4 { background: linear-gradient(150deg, #831843, #7c3aed); }
.wf-g5 { background: linear-gradient(150deg, #164e63, #2563eb); }
.wf-g6 { background: linear-gradient(150deg, #3f3f46, #a1a1aa); }
.wf-g7 { background: linear-gradient(150deg, #713f12, #eab308); }
.wf-g8 { background: linear-gradient(150deg, #14532d, #4ade80); }

.wf-style-row .wf-card { width: 150px; height: 200px; }
.wf-style-empty, .wf-empty { color: #94a3b8; font-size: 12px; padding: 24px 12px; }
.wf-empty { grid-column: 1 / -1; text-align: center; }

/* ============ 已套用 chip / 抽屉小标 ============ */
.wf-applied-chip, .wf-drawer-tag {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: #c7d2fe;
  border: 1px solid rgba(129,140,248,.4); background: rgba(99,102,241,.12); border-radius: 999px;
  padding: 4px 12px; margin: 0 0 9px; max-width: 100%;
}
.wf-drawer-tag { color: #fde68a; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.wf-applied-beta { font-size: 9.5px; color: #fbbf24; border: 1px solid rgba(251,191,36,.4); border-radius: 999px; padding: 0 6px; }
.wf-applied-x { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 11px; padding: 0; font-family: inherit; }
.wf-applied-x:hover { color: #e5e7eb; }

/* ============ 占位待办条 + 高亮 ============ */
.wf-assist { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10.5px; color: #94a3b8; margin: 0 0 8px; }
.wf-assist-lbl { color: #64748b; }
.wf-assist-ok { color: #4ade80; font-weight: 600; }
.wf-assist-warn { color: #f59e0b; font-weight: 600; }
.wf-assist-list { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wf-ph { border-radius: 4px; padding: 1px 6px; font-size: 10px; }
.wf-ph.req { color: #fde68a; background: rgba(251,191,36,.18); }
.wf-ph.opt { color: #94a3b8; background: rgba(148,163,184,.13); }
.wf-ph.done { color: #86efac; background: rgba(74,222,128,.12); }
.ic-composer textarea.wf-hl-req { box-shadow: inset 0 0 0 1px rgba(251,191,36,.45); border-radius: 8px; }
.ic-composer textarea.wf-hl-ok { box-shadow: inset 0 0 0 1px rgba(74,222,128,.35); border-radius: 8px; }

/* ============ K-PARAM-CARD 参数卡（槽位 / 进度 / 传图槽 / chips / ⚙高级） ============
 * 视觉基准 tmp/design-preview-slot-form.html，配色融入本文件 wf- 体系（violet #818cf8 / green #4ade80 / amber #fbbf24）。
 */
.wf-slot-card { background: rgba(15,23,42,.5); border: 1px solid rgba(148,163,184,.16); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; }
.wf-slot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.wf-slot-head .wf-applied-chip { margin: 0; }
.wf-progress { margin-left: auto; font-size: 11.5px; border-radius: 999px; padding: 3px 11px; border: 1px solid; white-space: nowrap; }
.wf-progress.warn { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.1); }
.wf-progress.ok { color: #4ade80; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.1); }

.wf-slot-rows { display: flex; flex-direction: column; }
.wf-slot-row { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; }
.wf-slot-row + .wf-slot-row { border-top: 1px dashed rgba(148,163,184,.12); }
.wf-slot-label { width: 104px; flex: none; font-size: 12.5px; color: #e2e8f0; padding-top: 5px; line-height: 1.4; }
.wf-slot-label .req { display: block; font-size: 10px; color: #fbbf24; margin-top: 2px; }
.wf-slot-label .opt { display: block; font-size: 10px; color: #64748b; margin-top: 2px; }
.wf-slot-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

/* 传图槽 */
.wf-upslot { width: 58px; height: 58px; border: 1.5px dashed rgba(129,140,248,.4); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 20px; cursor: pointer; background: rgba(15,23,42,.6); position: relative; overflow: hidden; flex-shrink: 0; }
.wf-upslot:hover { border-color: #818cf8; color: #a5b4fc; }
.wf-upslot.filled { border-style: solid; border-color: rgba(74,222,128,.5); }
.wf-upslot.filled img { width: 100%; height: 100%; object-fit: cover; }
.wf-upslot.filled::after { content: "✕"; position: absolute; top: 2px; right: 3px; font-size: 10px; color: #fff; background: rgba(2,6,16,.72); width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wf-slot-hint { font-size: 10.5px; color: #64748b; align-self: center; }

/* chips + 自定义 / 纯文本输入 */
.wf-chip { border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.55); color: #cbd5e1; border-radius: 999px; padding: 4px 12px; font-size: 12px; cursor: pointer; user-select: none; transition: border-color .12s, background .12s, color .12s; }
.wf-chip:hover { border-color: rgba(129,140,248,.5); color: #fff; }
.wf-chip.sel { background: rgba(99,102,241,.22); border-color: #818cf8; color: #e0e7ff; }
.wf-chip.sel::before { content: "✓ "; color: #a5b4fc; }
.wf-chip-input, .wf-text-input { background: rgba(15,23,42,.6); border: 1px solid rgba(148,163,184,.2); color: #e2e8f0; border-radius: 999px; padding: 5px 12px; font-size: 12px; outline: none; font-family: inherit; min-width: 150px; }
.wf-text-input { flex: 1; border-radius: 8px; }
.wf-chip-input:focus, .wf-text-input:focus { border-color: #818cf8; }
.wf-chip-input::placeholder, .wf-text-input::placeholder { color: #64748b; }

/* ⚙ 高级折叠（方案 C） */
.wf-adv { margin-top: 8px; border-top: 1px dashed rgba(148,163,184,.14); padding-top: 8px; }
.wf-adv-head { font-size: 11.5px; color: #64748b; cursor: pointer; user-select: none; }
.wf-adv-head:hover { color: #a5b4fc; }
.wf-adv-body { display: none; margin-top: 8px; }
.wf-adv.open .wf-adv-body { display: block; }
.wf-adv-box { width: 100%; box-sizing: border-box; background: rgba(2,6,16,.5); border: 1px solid rgba(148,163,184,.18); border-radius: 8px; padding: 9px 11px; font-size: 12px; color: #cbd5e1; line-height: 1.6; font-family: inherit; resize: vertical; outline: none; min-height: 96px; }
.wf-adv-box:focus { border-color: #818cf8; }
.wf-adv-note { font-size: 10.5px; color: #64748b; margin-top: 6px; line-height: 1.5; }

/* 工具条卡模式收敛：仅空态 composer(icComposer)——商品图=槽位唯一入口，隐藏 ＋参考图 / 风格参考 / ic-refs / 风格模式条 */
.ic-composer.wf-card-mode .ic-refs,
.ic-composer.wf-card-mode .ic-tool[title*="参考图"],
.ic-composer.wf-card-mode .ic-tool-style,
.ic-composer.wf-card-mode #icStyleMode { display: none !important; }
.wf-preset { display: none; font-style: normal; font-size: 9px; color: #7dd3fc; background: rgba(12,74,110,.4); border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.ic-composer.wf-card-mode .wf-preset { display: inline; }

/* ============ 工具条 pill / 平台色点 / 圆形发送键 ============ */
.wf-pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #cbd5e1;
  border: 1px solid rgba(148,163,184,.15); border-radius: 9px; padding: 5px 11px;
  background: rgba(148,163,184,.05); cursor: pointer; font-family: inherit;
}
.wf-pill:hover { border-color: rgba(129,140,248,.4); color: #fff; }
.wf-pill-lb { color: #64748b; font-size: 10px; }
.wf-pill-dn { color: #5a6577; font-size: 10px; } /* K-ICON-SYSTEM 审查:8.5px 装 1.75 描边 chevron 糊成色块,提到 10px */
.wf-tpl-pill { color: #fbbf24; border-color: rgba(251,191,36,.45); background: rgba(251,191,36,.08); font-weight: 600; }
.wf-home-pill { color: #c7d2fe; border-color: rgba(129,140,248,.4); background: rgba(99,102,241,.12); }
.wf-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ic-send.wf-send-round {
  width: 36px; height: 36px; min-width: 36px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.ic-send.wf-send-round:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }

/* ============ 小弹层（张数 / 画质） ============ */
.wf-pop {
  position: fixed; z-index: 60; min-width: 108px; background: rgba(9,14,28,.98);
  border: 1px solid rgba(129,140,248,.35); border-radius: 10px; padding: 5px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px;
}
.wf-pop-item { text-align: left; background: none; border: none; color: #cbd5e1; font-size: 12px; padding: 6px 10px; border-radius: 7px; cursor: pointer; font-family: inherit; }
.wf-pop-item:hover { background: rgba(99,102,241,.16); color: #fff; }
.wf-pop-item.on { color: #c7d2fe; background: rgba(99,102,241,.14); }

/* ============ 抽屉 V2（顶栏搜索 + 最近用过 + 推荐，硬规矩：≤12卡、封顶~240px、永不滚动） ============
 * 视觉基准：tmp/design-preview-drawer-v2.html，.drawer 与 .dr- 系列、.tcard 对应值照抄到本文件 .wf-drawer- 系列与 .wf-tcard
 */
.wf-drawer {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); z-index: 20;
  border: 1px solid rgba(129,140,248,.35); border-radius: 14px; background: rgba(9,14,28,.98);
  box-shadow: 0 -18px 50px rgba(0,0,0,.5); max-height: 360px; overflow: hidden; /* 实测「最近+推荐」两行共高约336px；360 留余量，纯安全顶，正常≤12卡内容不应触发裁切 */
  display: flex; flex-direction: column;
}
.wf-drawer-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(148,163,184,.12); flex-shrink: 0; }
.wf-drawer-head b { font-size: 13px; color: #e5e7eb; font-weight: 600; flex-shrink: 0; }
.wf-drawer-search { flex: 1; max-width: 300px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(148,163,184,.2); border-radius: 8px; padding: 5px 10px; background: rgba(148,163,184,.05); min-width: 0; }
.wf-drawer-search .ci { width: 13px; height: 13px; flex-shrink: 0; color: #64748b; }
.wf-drawer-search input { flex: 1; min-width: 0; border: none; background: none; outline: none; color: #cbd5e1; font: inherit; font-size: 11.5px; font-family: inherit; }
.wf-drawer-search input::placeholder { color: #64748b; }
.wf-drawer-gallery-link { margin-left: auto; font-size: 11.5px; color: #93c5fd; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; white-space: nowrap; }
.wf-drawer-gallery-link:hover { color: #bfdbfe; }
.wf-drawer-close { color: #64748b; font-size: 14px; background: none; border: none; cursor: pointer; padding: 0; }
.wf-drawer-close:hover { color: #e5e7eb; }
.wf-drawer-body { padding: 12px 14px 14px; overflow: hidden; }
.wf-drawer-sec { font-size: 10.5px; color: #64748b; letter-spacing: .5px; margin: 2px 0 8px; display: flex; align-items: center; gap: 8px; }
.wf-drawer-sec .hint { color: #475569; letter-spacing: 0; }
.wf-drawer-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-bottom: 14px; }
.wf-drawer-row:last-child { margin-bottom: 0; }
.wf-drawer-empty { padding: 18px 4px; text-align: center; color: #94a3b8; font-size: 12px; }
.wf-drawer-golink { display: inline-block; margin-top: 8px; background: none; border: none; color: #93c5fd; font-size: 12px; cursor: pointer; font-family: inherit; padding: 0; }
.wf-drawer-golink:hover { color: #bfdbfe; }

/* 抽屉紧凑卡（最近用过 / 推荐 / 搜索结果共用）：封面 56px + 标题 + 小字，参考基准稿 .tcard */
.wf-tcard {
  position: relative; cursor: pointer; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(148,163,184,.12); background: rgba(148,163,184,.04);
  padding: 0; text-align: left; font-family: inherit; transition: border-color .15s, transform .15s;
}
.wf-tcard:hover { border-color: rgba(99,102,241,.6); transform: translateY(-1px); }
.wf-tcard:focus-visible { outline: 2px solid #818cf8; outline-offset: 1px; }
.wf-tcard-cv { display: block; width: 100%; height: 56px; object-fit: cover; border: none; position: relative; overflow: hidden; } /* K-WF-COVERS:改包裹式,内嵌 .wf-cvimg,404 回退渐变 */
.wf-tcard .wf-st { right: 6px; top: 6px; width: 7px; height: 7px; box-shadow: none; }
.wf-tcard-tx { display: block; padding: 6px 8px 7px; } /* span 装块级子元素必须显式 block，否则 inline 装 block 子级触发匿名盒重复算 padding，实测把卡片撑高一倍 */
.wf-tcard-tx b { display: block; font-size: 11px; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-tcard-tx small { font-size: 9.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: 1px; }

/* ============ toast ============ */
.wf-toast-host { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.wf-toast {
  background: rgba(9,14,28,.96); color: #e5e7eb; font-size: 12.5px; border: 1px solid rgba(129,140,248,.4);
  border-radius: 999px; padding: 8px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s;
}
.wf-toast.show { opacity: 1; transform: translateY(0); }

/* ============ 窄屏 ============ */
@media (max-width: 720px) {
  .wf-grp { flex-direction: column; gap: 8px; }
  .wf-grp-side { width: auto; padding-top: 0; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .wf-grp-side p { flex-basis: 100%; }
  .wf-card { width: 156px; height: 200px; }
  .wf-gallery-mount { width: 100%; margin-left: 0; } /* K-FULLWIDTH-B: 超窄屏回收 breakout */
  .wf-drawer-row { grid-template-columns: repeat(3, 1fr); }
  /* K-PARAM-CARD 窄屏：槽位标签上置、正文换行 */
  .wf-slot-row { flex-direction: column; gap: 4px; }
  .wf-slot-label { width: auto; padding-top: 0; display: flex; align-items: baseline; gap: 6px; }
  .wf-slot-label .req, .wf-slot-label .opt { display: inline; margin-top: 0; }
  .wf-progress { margin-left: 0; }
}

/* ============ T29-S1a · 专业图型组（图型库 12 型混排上墙，墙顶 D2） ============
 * 深色基调对齐本文件 wf- 体系（violet #818cf8 / green #4ade80 / amber #fbbf24）；
 * 类名一律 wf-tl- 前缀（文件头约定仅 wf- 前缀，本组独立扩展 wf-tl- 防冲突）。
 * 卡宽约 246px、3:4 封面、圆角 15、hover 浮起 translateY(-3px)；组行 auto-fill 网格永不横向溢出。
 */
.wf-tl-grp { display: flex; flex-direction: column; gap: 13px; scroll-margin-top: 88px; outline: none; border-radius: 16px; }
.wf-tl-grp:focus-visible { outline: 2px solid #818cf8; outline-offset: 6px; }
.wf-tl-grp.wf-tl-grp-pulse { animation: wf-tl-anchor-pulse 1.4s ease-out; }
@keyframes wf-tl-anchor-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(129,140,248,0); }
  18% { box-shadow: 0 0 0 4px rgba(129,140,248,.34); }
}
.wf-tl-grp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wf-tl-grp-title { margin: 0; font-size: 16px; font-weight: 800; color: #fde68a; letter-spacing: -.2px; }
.wf-tl-grp-note { font-size: 11.5px; color: #94a3b8; font-weight: 500; }
.wf-tl-grp-count { font-size: 10px; color: #fbbf24; border: 1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.08); border-radius: 999px; padding: 1px 9px; }
.wf-tl-grp-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.wf-tl-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 15px;
  border: 1px solid rgba(148,163,184,.16); background: #0d1526;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wf-tl-card:hover { transform: translateY(-3px); border-color: rgba(129,140,248,.55); box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.wf-tl-card:focus-within { border-color: rgba(129,140,248,.55); }

.wf-tl-cover { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0b1120; }
.wf-tl-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; color: #475569; font-size: 11px; background: linear-gradient(150deg, #1e293b, #0f172a); }
.wf-tl-ph-key { color: #94a3b8; font-size: 13px; font-weight: 700; line-height: 1.35; }
.wf-tl-cvimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-tl-no { position: absolute; left: 9px; top: 9px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #e5e7eb; background: rgba(2,6,16,.6); border-radius: 5px; padding: 1px 7px; }
.wf-tl-star { position: absolute; right: 9px; top: 9px; z-index: 2; font-size: 9.5px; color: #fde68a; background: rgba(2,6,16,.66); border: 1px solid rgba(251,191,36,.4); border-radius: 6px; padding: 1px 6px; }
.wf-tl-form { position: absolute; left: 9px; bottom: 9px; z-index: 2; font-size: 9.5px; color: #c7d2fe; background: rgba(2,6,16,.62); border: 1px solid rgba(129,140,248,.4); border-radius: 6px; padding: 1px 7px; }

.wf-tl-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; }
.wf-tl-name { margin: 0; font-size: 13.5px; font-weight: 700; color: #f1f5f9; line-height: 1.35; }
.wf-tl-usage { margin: 0; font-size: 11px; color: #94a3b8; line-height: 1.5; min-height: 2.9em; }
.wf-tl-metarow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.wf-tl-route { font-size: 10px; color: #a5b4fc; border: 1px solid rgba(129,140,248,.35); background: rgba(99,102,241,.12); border-radius: 999px; padding: 1px 8px; }
.wf-tl-price { font-size: 10px; color: #86efac; border: 1px solid rgba(74,222,128,.32); background: rgba(74,222,128,.1); border-radius: 999px; padding: 1px 8px; }
.wf-tl-actions { display: flex; gap: 8px; margin-top: 2px; }
.wf-tl-btn { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 12px; font-weight: 600; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-family: inherit; border: 1px solid transparent; transition: background .16s, border-color .16s, color .16s, filter .16s; }
.wf-tl-btn-ghost { color: #cbd5e1; background: rgba(148,163,184,.06); border-color: rgba(148,163,184,.2); }
.wf-tl-btn-ghost:hover { color: #fff; border-color: rgba(129,140,248,.5); }
.wf-tl-btn-primary { color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); }
.wf-tl-btn-primary:hover { filter: brightness(1.08); }
.wf-tl-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }

/* 极简 lightbox：遮罩 + 3:4 大图（onerror 露占位）+ 型名标题 */
.wf-tl-lb { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 6vh 6vw; background: rgba(2,6,16,.82); opacity: 0; transition: opacity .18s ease; }
.wf-tl-lb.show { opacity: 1; }
.wf-tl-lb-inner { display: flex; flex-direction: column; align-items: center; max-width: min(440px, 88vw); }
.wf-tl-lb-figure { position: relative; width: min(440px, 88vw); aspect-ratio: 3 / 4; max-height: 80vh; border-radius: 14px; overflow: hidden; background: #0b1120; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.wf-tl-lb-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px; text-align: center; color: #94a3b8; font-size: 12px; background: linear-gradient(150deg, #1e293b, #0f172a); }
.wf-tl-lb-ph span { color: #e2e8f0; font-size: 16px; font-weight: 700; }
.wf-tl-lb-ph em { color: #64748b; font-size: 11px; font-style: normal; }
.wf-tl-lb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #0b1120; }
.wf-tl-lb-cap { margin-top: 12px; color: #e5e7eb; font-size: 13px; font-weight: 600; text-align: center; }
.wf-tl-lb-x { position: fixed; top: 18px; right: 22px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(148,163,184,.3); background: rgba(9,14,28,.85); color: #cbd5e1; font-size: 15px; cursor: pointer; font-family: inherit; }
.wf-tl-lb-x:hover { color: #fff; border-color: rgba(129,140,248,.5); }
.wf-tl-lb-x:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wf-tl-card, .wf-tl-btn, .wf-tl-lb { transition: none; }
  .wf-tl-card:hover { transform: none; }
  .wf-tl-grp.wf-tl-grp-pulse { animation: none; }
}
@media (max-width: 720px) {
  .wf-tl-grp-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .wf-tl-usage { min-height: 0; }
  .wf-tl-actions { flex-wrap: wrap; }
}