* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4f6fa; --card: #ffffff; --line: #e4e8f0;
  --text: #1c2333; --muted: #6b7487;
  --primary: #2f6bff; --primary-dark: #1f51d6;
  --ok: #16a34a; --warn: #d97706; --err: #dc2626;

  /* ── 统一悬停交互令牌（所有下拉菜单 / 列表项 / 可点行共用，勿各处另写颜色）── */
  --hv-bg: #eef3ff;          /* 悬停底色（浅蓝，行内高亮） */
  --hv-bg-2: #f5f8ff;        /* 悬停底色（渐变收尾，更浅） */
  --hv-bg-soft: #f7f9ff;     /* 悬停底色（宽行/卡片，极浅） */
  --hv-fg: #2f6bff;          /* 悬停文字色（主色） */
  --hv-line: #bcd0ff;        /* 悬停描边色（卡片/胶囊类） */
  --hv-dur: .15s;            /* 悬停过渡时长：全站统一 */
  --hv-ease: ease;           /* 悬停缓动：全站统一 */
}
/* ── 统一悬停反馈约定（新增可点元素照此写，不要再自定颜色）──
   ① 行/列表项（下拉选项、菜单项、清单行）：
      transition: background/color/box-shadow var(--hv-dur) var(--hv-ease);
      :hover → background: linear-gradient(90deg, var(--hv-bg), var(--hv-bg-2));
               color: var(--hv-fg); box-shadow: inset 3px 0 0 var(--primary);
      左侧指示条用 inset 阴影实现，不占布局宽度，不会挤动文字。
   ② 胶囊/卡片类（chip、胶囊按钮、带边框的条目）：
      :hover → border-color: var(--hv-line); background: var(--hv-bg-soft); color: var(--hv-fg);
   ③ 深色背景上的元素（顶栏步骤轴等）：保留半透明白底高亮，仅共用时长/缓动令牌。
   危险项（删除/退出）只把底色换成红调，不套用主色渐变。 */
body { background: var(--bg); color: var(--text); font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 14px; }

.topbar { background: linear-gradient(90deg, #1e2c52, #2f4a8f); color: #fff; padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; }
.brand { font-size: 19px; font-weight: 700; }
.brand .sub { font-size: 12px; font-weight: 400; opacity: .75; margin-left: 10px; }
.env-status { font-size: 12px; opacity: .9; }

.wrap { max-width: 980px; margin: 22px auto 60px; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 4px rgba(20,30,60,.05); }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2 { font-size: 16px; }
.step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.hint { color: var(--muted); font-size: 12px; }

textarea#narration { width: 100%; min-height: 140px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; resize: vertical; }
textarea#narration:focus { outline: 2px solid #bcd0ff; border-color: var(--primary); }

.row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.field { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
select { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; background: #fff; cursor: pointer;
  transition: border-color var(--hv-dur) var(--hv-ease), background var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease); }
/* 所有下拉框（含被自定义弹层接管的）统一悬停反馈：描边变浅蓝 + 极浅底色 */
select:hover { border-color: var(--hv-line); background: var(--hv-bg-soft); }
select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(47,107,255,.10); }

.btn { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; transition: .15s; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.big { font-size: 15px; padding: 11px 26px; }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.danger { border-color: #f3c6c6; color: var(--err); }
.btn.danger:hover { background: #fef2f2; border-color: var(--err); }
.btn.confirm { background: var(--err); border-color: var(--err); color: #fff; }
.btn.confirm:hover { background: #b91c1c; }
/* 作为「下方内容开关」的按钮：展开时保持高亮，让显隐状态一眼可见 */
.btn-toggle { white-space: nowrap; }
.btn.active { border-color: var(--primary); color: var(--primary); background: #eff6ff; }
.btn.active:hover { background: #e2edff; }
.btn.active:focus-visible { outline: 2px solid #bcd0ff; outline-offset: 1px; }

/* ---------------- 字幕面板 ---------------- */
.sub-panel { margin-top: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fafbfe; }
.sub-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sub-head h3 { font-size: 14px; }

/* ---------- ④子区块手风琴（字幕设置 / 背景音乐曲库）----------
   开关与标题常显，内容折叠：手机端第4步不再无限拉长 */
.sub-acc { border: 1px dashed var(--line); border-radius: 10px; margin-top: 10px; background: #fff; }
.sub-acc > summary {
  cursor: pointer; padding: 9px 12px; font-size: 13px; color: #39415a;
  user-select: none; list-style: none; font-weight: 600;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease);
}
.sub-acc > summary:hover { background: var(--hv-bg-soft); color: var(--hv-fg); }
.sub-acc > summary::-webkit-details-marker { display: none; }
.sub-acc > summary::before { content: "▸"; margin-right: 6px; color: #7a86a8; }
.sub-acc[open] > summary::before { content: "▾"; }
.sub-acc[open] > summary { border-bottom: 1px dashed var(--line); }
.sub-acc > .sub-grid, .sub-acc > .bgm-lib, .sub-acc > .bgm-edit { padding: 10px 12px; }
.sub-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.sub-grid { display: flex; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.sub-preview { flex: none; width: 200px; }
.sub-preview img { width: 200px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: #10151f; display: block; }
.sub-preview .center { text-align: center; margin-top: 6px; display: block; }
.sub-controls { flex: 1; min-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.sub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sub-row > label { color: var(--muted); font-size: 12px; min-width: 56px; text-align: right; }
.sub-row.dim { opacity: .5; }
#subXYWrap { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#subXYWrap > label { color: var(--muted); font-size: 12px; min-width: 0; text-align: left; margin-left: 4px; }
#subPosHint { max-width: 360px; }
.ctl { border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; font: inherit; font-size: 13px; background: #fff; }
.ctl.num { width: 76px; }
.ctl.color { width: 46px; height: 30px; padding: 2px; cursor: pointer; }
input[type="range"].ctl { width: 110px; padding: 0; }
.sub-items-wrap { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.sub-items-title { font-size: 13px; }
.sub-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f1f4f9; }
.sub-item:last-child { border-bottom: none; }
.sub-item .no { flex: none; width: 52px; font-size: 12px; color: var(--muted); padding-top: 8px; }
.sub-item .no .len { display: block; font-size: 11px; opacity: .8; }
.sub-item textarea { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 13px; resize: vertical; min-height: 38px; background: #fff; }
.sub-item textarea:focus { outline: 2px solid #bcd0ff; border-color: var(--primary); }
.sub-item textarea.edited { border-color: #f0c36d; background: #fffdf5; }
.sub-item .tag { flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 2px 8px; margin-top: 8px; }
.sub-item .tag.manual { color: var(--warn); border-color: #f0c36d; background: #fffaf0; }
.sub-item .tag.runs { color: #7c3aed; border-color: #ddd0ff; background: #f7f3ff; }
.sub-selbar { background: #f7f3ff; border: 1px solid #ddd0ff; color: #7c3aed; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sub-selbar.hidden { display: none; }
.sub-selbar .btn { padding: 3px 10px; font-size: 12px; }
#subSelText { flex: 1; min-width: 200px; word-break: break-all; }
.sub-item .btn { margin-top: 5px; }
.folder-row .btn.danger { margin-left: 2px; }
.tool-row { margin-top: 0; margin-bottom: 12px; }
.tool-row + #folderRows .folder-row { margin-bottom: 8px; }
.hist-row { margin-top: 0; margin-bottom: 10px; }
.hist-row .btn { padding: 5px 14px; font-size: 13px; }
#btnUndo:disabled, #btnRedo:disabled { opacity: .38; cursor: not-allowed; }
#btnUndo:disabled:hover, #btnRedo:disabled:hover { border-color: var(--line); color: inherit; }

.seg.playing { border-color: var(--primary); background: #f0f5ff; box-shadow: 0 0 0 2px rgba(47,107,255,.12); }

.seg-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.seg-toggle { margin-top: 10px; padding: 8px 0 2px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; gap: 10px; }
.seg-toggle .btn.small { padding: 5px 14px; }

.seg { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #fafbfe; }
.seg-head { display: flex; align-items: center; gap: 8px; }
.seg-no { background: #eef2ff; color: var(--primary); border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
.seg textarea { flex: 1; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; font: inherit; min-height: 44px; max-height: 220px; resize: vertical; field-sizing: content; }
.seg-audio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seg audio { height: 32px; }
.seg .dur { color: var(--muted); font-size: 12px; }

/* ---------------- 配音片段 · 麦克风录音 ---------------- */
.rec-panel { border: 1px solid #ddd0ff; border-radius: 10px; background: #faf8ff;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.rec-panel.on { border-color: #ef4444; background: #fff5f5; box-shadow: 0 0 0 2px rgba(239,68,68,.10); }
.rec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-head b { font-size: 13px; }
.rec-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.rec-dot.on { background: #ef4444; animation: recPulse 1.1s infinite; }
.rec-dot.pause { background: #f59e0b; }
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.78); }
}
.rec-time { font-family: Consolas, "Courier New", monospace; font-size: 14px; font-weight: 700;
  color: #7c3aed; min-width: 66px; }
.rec-panel.on .rec-time { color: #dc2626; }
.rec-msg { flex: 1; min-width: 160px; }
.rec-ops { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rec-panel .hint { display: block; line-height: 1.6; }

.folder-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.folder-label { flex: none; width: 74px; color: var(--muted); font-size: 13px; }
.path-input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; background: #fff; color: var(--text); }
.path-input:focus { outline: none; border-color: var(--primary); }
.path-input.grow { flex: 1; }
.status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.status-dot.ok { background: var(--ok); } .status-dot.busy { background: var(--warn); } .status-dot.err { background: var(--err); }

.clip-panel, table.clips, .name-cell { display: none; }

.progress-box { margin-top: 14px; }
.progress-bar { height: 10px; background: #e8edf6; border-radius: 6px; overflow: hidden; }
#progressFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #6d9bff); transition: width .4s; border-radius: 6px; }

/* 素材分析进度条与控制按钮 */
.analyze-prog { margin: 4px 0 10px; align-items: stretch; }
.analyze-box { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfe; }
#analyzeFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--warn, #f59e0b), #fb923c); transition: width .35s; border-radius: 6px; }
#analyzeProgText { font-size: 12px; line-height: 1.5; min-height: 16px; word-break: break-all; }
#btnPauseAnalyze, #btnStopAnalyze { align-self: center; }
.analyze-prog.stopped #analyzeFill, .analyze-prog.done #analyzeFill { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.done-box { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.done-box.ok { background: #ecfdf3; border: 1px solid #b7ebc9; color: var(--ok); }
.done-box.err { background: #fef2f2; border: 1px solid #fecaca; color: var(--err); }

.mask { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: center; justify-content: center; z-index: 50; }
.dialog { background: #fff; border-radius: 14px; width: min(640px, 92vw); max-height: 76vh; display: flex; flex-direction: column; padding: 18px 20px; overflow-y: auto; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pick-list { flex: 1; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; min-height: 220px; }
.pick-item { padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f1f4f9;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease); }
.pick-item:hover { background: linear-gradient(90deg, var(--hv-bg), var(--hv-bg-2)); color: var(--hv-fg); box-shadow: inset 3px 0 0 var(--primary); }
.hidden { display: none !important; }

/* ---------------- 音色克隆面板 ---------------- */
.clone-panel { margin-top: 14px; border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; background: #fafbfe; }
.clone-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clone-head h3 { font-size: 14px; }
.clone-name { border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; background: #fff; }
.clone-panel > .row > .clone-name { flex: none; width: 200px; }
.clone-file { flex: 1; min-width: 190px; font: inherit; }
.clone-status { margin-top: 8px; font-size: 12px; line-height: 1.6; padding: 6px 10px; border-radius: 6px; word-break: break-all; }
.clone-status.busy { background: #fff7ed; color: var(--warn); }
.clone-status.ok { background: #ecfdf3; color: var(--ok); }
.clone-status.err { background: #fef2f2; color: var(--err); }

.clone-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.clone-item { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.clone-item-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clone-item .clone-name { border: none; background: none; padding: 0; font-weight: 700; font-size: 13px; }
.clone-badge { flex: none; font-size: 11px; border-radius: 20px; padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); }
.clone-badge.busy { color: var(--warn); border-color: #f0c36d; background: #fffaf0; }
.clone-badge.ok { color: var(--ok); border-color: #b7ebc9; background: #ecfdf3; }
.clone-badge.err { color: var(--err); border-color: #f3c6c6; background: #fef2f2; }
.clone-progress { flex: 1; min-width: 110px; height: 8px; background: #e8edf6; border-radius: 5px; overflow: hidden; }
.clone-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #6d9bff); transition: width .4s; border-radius: 5px; }

/* 克隆引擎状态条：换引擎会影响出片时长，必须让用户随时看得见当前在用哪个 */
.clone-engine {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: 12px;
}
.clone-engine .ce-title { color: var(--muted); }
.clone-engine .ce-badge { font-weight: 700; border-radius: 20px; padding: 2px 9px; border: 1px solid var(--line); }
.clone-engine .ce-badge.neural { color: #6d28d9; border-color: #ddd0f7; background: #f6f2ff; }
.clone-engine .ce-state { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.clone-engine .ce-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
.clone-engine .ce-dot.ok { background: var(--ok); }
.clone-engine .ce-dot.busy { background: var(--warn); }
.clone-engine .ce-dot.bad { background: var(--err); }
.clone-engine .ce-note { flex-basis: 100%; color: var(--muted); line-height: 1.6; word-break: break-all; }
.clone-engine .ce-note.warn { color: var(--warn); }
.clone-engine .ce-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- 背景音乐面板 ---------------- */
.bgm-panel { margin-top: 14px; }
.bgm-lib { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 12px; }
.bgm-lib-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bgm-lib-head .ctl { flex: 1; min-width: 140px; }
.bgm-tabs { display: inline-flex; background: #eef2f9; border-radius: 10px; padding: 3px; gap: 2px; }
.bgm-tabs button { border: none; background: transparent; border-radius: 8px; padding: 5px 14px; font: inherit; font-size: 13px; cursor: pointer; color: var(--muted); transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }
.bgm-tabs button:hover { color: var(--hv-fg); background: var(--hv-bg-soft); }
.bgm-tabs button.on { background: #fff; color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(20,30,60,.12); }
.btn.rec { border-color: #ddd0ff; color: #7c3aed; background: #f7f3ff; }
.btn.rec:hover { border-color: #7c3aed; }
.bgm-styles { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.bgm-filter { padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: #fafbfe; }
.bgm-filter .filter-label { font-size: 12px; color: var(--muted); margin-right: 2px; }
.bgm-styles button { border: 1px solid var(--line); background: #fff; border-radius: 20px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), border-color var(--hv-dur) var(--hv-ease); color: var(--text); }
.bgm-styles button:hover { border-color: var(--hv-line); color: var(--hv-fg); background: var(--hv-bg-soft); }
.bgm-styles button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.bgm-list { margin-top: 10px; max-height: 268px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 2px; }
.bgm-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: background var(--hv-dur) var(--hv-ease), border-color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease); background: #fff; }
.bgm-item:hover { border-color: var(--hv-line); background: var(--hv-bg-soft); box-shadow: inset 3px 0 0 var(--primary); }
.bgm-item.active { border-color: var(--primary); background: #eef3ff; }
.bgm-item .nm { flex: 0 1 auto; min-width: 60px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-item .reason { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bgm-item .rank { flex: none; width: 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
.bgm-item .rank.top { color: #e11d48; }
.bgm-item .rank.top:nth-child(1) { color: #f59e0b; }
.bgm-item .tag { flex: none; font-size: 11px; color: var(--muted); border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; }
.bgm-item .tag.mine { color: var(--ok); border-color: #b7ebc9; background: #ecfdf3; }
.bgm-item .tag.scene { color: #2563eb; border-color: #c7d7fe; background: #eef3ff; }
.bgm-item .tag.hot { color: #e11d48; border-color: #fecdd3; background: #fff1f2; }
.bgm-item .tag.dim { color: var(--muted); }
.bgm-item .tag.lic { color: #16a34a; border-color: #b7ebc9; background: #f0fdf4; }
.bgm-web { margin-top: 10px; border: 1px solid #c7d7fe; border-radius: 10px; background: #f6f9ff; padding: 10px 12px; }
.bgm-web-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bgm-web-row .web-label { font-size: 13px; font-weight: 700; color: var(--primary); flex: none; }
.bgm-web-row .ctl { flex: 1; min-width: 150px; }
.bgm-web-row select { flex: none; min-width: 170px; }
.web-results { margin-top: 8px; max-height: 220px; }
.bgm-web .hint { display: block; margin-top: 6px; }
/* 曲源检测结果 */
.src-probe { margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 8px 10px; }
.src-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; flex-wrap: wrap; }
.src-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #cbd5e1; }
.src-item .dot.ok { background: #22c55e; }
.src-item .dot.bad { background: #ef4444; }
.src-item b { min-width: 76px; }
/* 曲源与网络设置 */
.src-cfg { margin-top: 8px; }
.src-cfg > summary { cursor: pointer; font-size: 12.5px; color: var(--primary); padding: 4px 6px; border-radius: 6px; user-select: none;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }
.src-cfg > summary:hover { background: var(--hv-bg-soft); color: var(--hv-fg); }
.src-cfg-body { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 12px; margin-top: 4px; }
.src-cfg-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.src-cfg-row > span:first-child { flex: none; width: 128px; font-size: 12.5px; color: var(--muted); }
.src-cfg-row .ctl { flex: 1; min-width: 200px; }
.bgm-item .dur { flex: none; font-size: 12px; color: var(--muted); min-width: 42px; text-align: right; }
.bgm-item .ops { flex: none; display: flex; gap: 4px; }
.bgm-item .ops .btn { padding: 3px 9px; font-size: 12px; }
.bgm-rec { margin-top: 10px; border: 1px solid #ddd0ff; border-radius: 10px; background: #faf8ff; padding: 10px 12px; }
.bgm-rec-head { font-size: 13px; font-weight: 700; color: #7c3aed; margin-bottom: 8px; }
.bgm-rec .bgm-item { background: #fff; }
.bgm-rec .bgm-item .rank { width: 22px; }
.bgm-empty { color: var(--muted); font-size: 12px; text-align: center; padding: 18px 0; }
.bgm-edit { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px 14px; }
.bgm-edit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bgm-edit-head b { flex: 1; font-size: 14px; min-width: 120px; }
.bgm-note { margin-top: 8px; }
#bgmVol { width: 200px; }

/** 曲目语言徽标（中文 / 中国风 / 纯音乐） */
.bgm-item .tag.lang { font-weight: 700; }

/** 上传进度条（读取 → 上传百分比 → 入库 → 失败重试） */
.bgm-upload { margin-top: 8px; border: 1px solid #c7d8ff; border-radius: 8px; background: #f5f8ff; padding: 8px 12px; }
.upl-row { display: flex; align-items: baseline; gap: 8px; }
.upl-name { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl-pct { font-size: 13px; font-weight: 700; color: #2563eb; font-variant-numeric: tabular-nums; }
.upl-bar { margin-top: 6px; height: 8px; border-radius: 4px; background: #dde6f8; overflow: hidden; }
.upl-fill { height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #60a5fa, #2563eb); transition: width .15s ease; }
.upl-sub { margin-top: 5px; }
.upl-retry { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.upl-fail { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 3px 8px; max-width: 100%; overflow: hidden; }
.upl-fail .btn { flex: none; }

/** 素材上传进度面板（逐文件进度条 + 状态徽标 + 取消/重试） */
.clip-upl-box { margin-top: 10px; border: 1px solid #c7d8ff; border-radius: 10px; background: #f5f8ff; padding: 10px 14px; }
.clip-upl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.clip-upl-head b { font-size: 14px; }
.clip-upl-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.clip-upl-row { padding: 8px 10px; background: #fff; border: 1px solid #e2e9f5; border-radius: 8px; }
.clip-upl-st { flex: none; font-size: 12px; font-weight: 700; border-radius: 10px; padding: 1px 9px; white-space: nowrap; }
.st-pending { color: #64748b; background: #eef2f7; }
.st-run     { color: #1d4ed8; background: #dbeafe; }
.st-ok      { color: #15803d; background: #dcfce7; }
.st-fail    { color: #b91c1c; background: #fee2e2; }
.st-cancel  { color: #92400e; background: #fef3c7; }
.clip-upl-err { margin-top: 5px; font-size: 12px; color: #b91c1c; }
.clip-upl-retry-btn { flex: none; }

/** 曲目收藏（♥ 收藏 / ♡ 未收藏；收藏页筛选） */
.bgm-item .fav-btn { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; color: #d1a318; flex: none; }
.bgm-item .fav-btn:hover { transform: scale(1.15); }
.bgm-item .fav-btn.dim { color: #c9c9c9; }
.bgm-item .tag.lang-zh { color: #dc2626; border-color: #fecaca; background: #fef2f2; }
.bgm-item .tag.lang-cn { color: #b45309; border-color: #fde68a; background: #fffbeb; }
.bgm-item .tag.lang-inst { color: #0e7490; border-color: #a5f3fc; background: #ecfeff; }

/** 搜索结果提示条（中文曲目稀少 / 命中说明） */
.web-note { font-size: 12px; line-height: 1.55; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; }

/** 非商用(NC)曲目标识：与可商用结果明显区分，提醒勿用于对外推广 */
.bgm-item .tag.nc { color: #b91c1c; border-color: #fecaca; background: #fef2f2; font-weight: 700; }

/** 网络设置里的「纳入非商用曲目」开关 */
.nc-toggle { display: flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; user-select: none; }
.nc-toggle input { width: 15px; height: 15px; cursor: pointer; flex: none; margin: 0; }

/** 🇨🇳 中文音乐素材站（开放曲库里没有中文歌，这是拿中文歌的合规入口） */
.zh-sites { margin-top: 8px; }
.zh-sites > summary { cursor: pointer; font-size: 12.5px; color: var(--primary); padding: 4px 6px; border-radius: 6px; user-select: none;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }
.zh-sites > summary:hover { background: var(--hv-bg-soft); color: var(--hv-fg); }
.zh-sites-body { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 12px; margin-top: 4px; }
.zh-sites-tip { font-size: 12px; line-height: 1.6; color: #92400e; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }
.zh-site { border-top: 1px dashed var(--line); padding: 8px 0; }
.zh-site:first-child { border-top: none; padding-top: 0; }
.zh-site-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zh-site-head b { font-size: 13px; }
.zh-site-head .btn { margin-left: auto; text-decoration: none; }
.zh-site-note { font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.zh-sites-foot { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid var(--line); }

/** 试听加载中：按钮呼吸，明确「正在加载，不是卡死」 */
.btn.loading { color: var(--primary); border-color: #bcd0ff; background: #f0f5ff;
  cursor: progress; animation: btnpulse 1.1s ease-in-out infinite; }
@keyframes btnpulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 8px; }

/* ---------------- 试听播放条（所有试听共用，可拖动进度） ---------------- */
.mini-player {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 998;
  width: min(720px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: #1e2c52; color: #fff; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(20, 30, 60, .3); font-size: 13px;
}
.mini-player.hidden { display: none !important; }
.mp-title { flex: 0 1 210px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; }
.mp-state { flex: none; font-size: 12px; color: #ffd88a; }
.mp-state.hidden { display: none !important; }
.mp-time { flex: none; min-width: 42px; text-align: center; font-size: 12px;
  opacity: .85; font-variant-numeric: tabular-nums; }

.mp-seek { flex: 1 1 auto; min-width: 120px; height: 18px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent; }
.mp-seek:disabled { cursor: default; opacity: .5; }
.mp-seek:focus { outline: none; }
.mp-seek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #6ea8ff 0%, #6ea8ff var(--pct, 0%),
              rgba(255, 255, 255, .28) var(--pct, 0%), rgba(255, 255, 255, .28) 100%);
}
.mp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  margin-top: -4px; border-radius: 50%; background: #fff;
  border: 2px solid #2f6bff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.mp-seek::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .28); }
.mp-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: #6ea8ff; }
.mp-seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid #2f6bff; }
.mini-player .btn { flex: none; color: #fff; background: transparent; border-color: rgba(255, 255, 255, .4); }
.mini-player .btn:hover { background: rgba(255, 255, 255, .14); }

@media (max-width: 560px) { .mp-title { flex-basis: 96px; } }

/* ---- 人工锁定画面（片段内下拉） ---- */
.seg-lock { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.lock-ico { flex: none; font-size: 14px; }
.lock-sel { flex: 1 1 auto; min-width: 0; max-width: 420px; font-size: 12px; padding: 4px 8px;
  border: 1px solid var(--border, #c9d4e4); border-radius: 8px; background: #fff; }
.seg[data-locked="1"] .lock-sel { border-color: #3b6d11; background: #f3f8ea; }
.lock-note { font-size: 12px; color: #5f6b7c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }

/* ---- 匹配预检面板 ---- */
.plan-box { margin-top: 10px; border: 1px solid var(--border, #c9d4e4); border-radius: 12px;
  background: #f8fafc; padding: 10px 12px; max-height: 420px; overflow: auto; }
.plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.plan-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid transparent; }
.plan-chip.tier-S { background: #eaf3de; color: #3b6d11; border-color: #97c459; }
.plan-chip.tier-A { background: #e6f1fb; color: #185fa5; border-color: #85b7eb; }
.plan-chip.tier-B { background: #faeeda; color: #854f0b; border-color: #ef9f27; }
.plan-chip.tier-C { background: #fcebeb; color: #a32d2d; border-color: #f09595; }
.plan-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-top: 1px dashed rgba(95, 107, 124, .25); font-size: 12px; flex-wrap: wrap; }
.tier-badge { flex: none; width: 18px; height: 18px; border-radius: 6px; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tier-badge.tier-S { background: #639922; }
.tier-badge.tier-A { background: #378add; }
.tier-badge.tier-B { background: #ba7517; }
.tier-badge.tier-C { background: #e24b4a; }
.plan-seq { flex: none; color: #5f6b7c; }
.plan-text { flex: 0 1 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2c2c2a; }
.plan-why { flex: none; color: #444441; }
.plan-clips { flex: 1 1 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f6e56; }
.plan-warn { flex-basis: 100%; color: #993c1d; }
.plan-tip { margin-top: 8px; }

/* ===== Layer 0.5 推荐候选 + 素材缩略图（看图选画面） ===== */
.plan-cands { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 2px 30px; }
.cands-cap { flex: none; color: #5f6b7c; font-size: 12px; }
.cand-card { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c9d4e4;
  background: #f7fafd; border-radius: 10px; padding: 4px 10px 4px 4px; cursor: pointer; transition: all .15s; }
.cand-card:hover { border-color: #3b82f6; background: #eef5ff; transform: translateY(-1px); }
.cand-thumb { width: 34px; height: 60px; border-radius: 6px; object-fit: cover; background: #e5ebf3; flex: none; }
span.cand-thumb { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #8fa3bb; }
.cand-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cand-name { font-size: 12px; color: #2c2c2a; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-warn { color: #b45309; margin-left: 3px; }
.cand-why { font-size: 11px; color: #6b7686; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand-act { flex: none; font-size: 12px; opacity: .65; }
.cand-card:hover .cand-act { opacity: 1; }

/* 画面选择弹窗：缩略图网格 */
.dialog-wide { width: min(860px, 94vw); max-height: 84vh; }
.clip-grid { overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; padding: 10px 2px; flex: 1; }
.clip-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px solid #dbe3ee; background: #fff; border-radius: 10px; padding: 6px; cursor: pointer; transition: all .15s; }
.clip-card:hover { border-color: #3b82f6; background: #eef5ff; }
.clip-card.picked { border-color: #16a34a; background: #effaf3; }
.clip-thumb { width: 92px; height: 164px; border-radius: 7px; object-fit: cover; background: #e5ebf3; }
span.clip-thumb { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; color: #8fa3bb; }
.clip-dur { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 11px; border-radius: 5px; padding: 1px 5px; }
.clip-name { font-size: 11px; color: #2c2c2a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-sub { font-size: 10px; color: #6b7686; }

/* 锁定行的 🖼 按钮 */
.lock-thumb-btn { flex: none; }

/* ===== 爆款文案 / 封面 / 批量生产 / 缺口清单 ===== */
.copy-out { overflow-y: auto; max-height: 52vh; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.copy-card { border: 1px solid #c9d4e4; border-radius: 12px; padding: 10px 12px; background: #fbfdff; }
.copy-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.copy-text { white-space: pre-wrap; font-family: inherit; font-size: 13px; color: #2c2c2a;
  background: #f2f6fb; border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; }
.cover-prev { display: flex; justify-content: center; padding: 10px 0 4px; min-height: 200px; align-items: center; }
.cover-prev img { width: 220px; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.batch-jobs { display: flex; flex-direction: column; gap: 12px; max-height: 46vh; overflow-y: auto; padding: 2px; }
.batch-job { border: 1px solid #c9d4e4; border-radius: 12px; padding: 8px 10px; background: #fbfdff; }
.batch-job .row { margin-bottom: 6px; }
.bj-narr { width: 100%; min-height: 88px; box-sizing: border-box; border: 1px solid #c9d4e4;
  border-radius: 8px; padding: 8px; font: inherit; resize: vertical; }
.batch-out { border-top: 1px dashed #c9d4e4; margin-top: 8px; padding: 8px 2px; font-size: 12px; color: #2c2c2a; }
.gap-box { border-top: 1px dashed #c9d4e4; padding: 8px 10px; }
.gap-pre { white-space: pre-wrap; font-family: inherit; font-size: 12.5px; color: #2c2c2a;
  background: #fff8ec; border-radius: 8px; padding: 10px 12px; margin: 0 0 6px; }

/* ===== 封面工作台：样式自定义 + 九宫格编辑器 ===== */
.cv-style-row { flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.cv-lab { flex: none; color: var(--muted); font-size: 12px; }
.cv-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); cursor: pointer; }
.cv-swatches { display: inline-flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.cv-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(0,0,0,.10); cursor: pointer; padding: 0; transition: transform .12s, box-shadow .12s; }
.cv-swatch:hover { transform: scale(1.12); }
.cv-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }

.cv-grid { display: grid; gap: 10px; justify-content: center; padding: 10px 0 4px; }
.cv-cell { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden;
  border: 2px solid #dbe3ee; background: #eef2f8; cursor: grab; transition: border-color .15s, box-shadow .15s; }
.cv-cell:hover { border-color: #b9c8de; }
.cv-cell:active { cursor: grabbing; }
.cv-cell img, .cv-cell .cv-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-cell.empty { display: flex; align-items: center; justify-content: center; border-style: dashed; cursor: default; }
.cv-cell .cv-ph { font-size: 12px; color: #8fa3bb; text-align: center; line-height: 1.7; }
.cv-cell.dragging { opacity: .45; }
.cv-cell.drag-over { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.3); }
.cv-swap { position: absolute; right: 5px; bottom: 5px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: rgba(15,23,42,.6); color: #fff; font-size: 13px; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0; backdrop-filter: blur(2px); }
.cv-cell:hover .cv-swap, .cv-cell.empty .cv-swap { display: inline-flex; }
.cv-swap:hover { background: rgba(59,130,246,.92); }
#cvMiss { max-width: 420px; margin: 0 auto; }
.cv-var { position: absolute; left: 5px; top: 5px; background: rgba(15,23,42,.6); color: #fff;
  font-size: 10px; line-height: 1; border-radius: 5px; padding: 3px 6px; pointer-events: none; }

/* ===== 单图封面：拖动进度条选帧 ===== */
#cvTs { accent-color: #3b82f6; height: 4px; }
#cvTs:disabled { opacity: .45; }
#cvTsLabel { font-variant-numeric: tabular-nums; }

/* ===== 封面工作台：左预览 + 右控件双栏，舞台式可拖动文字 ===== */
#coverMask .dialog { width: min(940px, 94vw); padding: 20px 22px; }
#coverMask .dialog > * { flex: none; }        /* 弹窗子项禁止 flex 收缩（防止预览/格子被压扁裁切） */
#coverMask .dialog-head { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
#coverMask .dialog-head h3 { margin: 0; font-size: 16px; }
.cv-body { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 20px; align-items: start; }
.cv-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }
.cv-controls { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
#coverMask .cv-side .row, #coverMask .cv-controls .row { margin-top: 0; }
.cv-group { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fafbfe; }
.cv-group-title { font-size: 12.5px; color: var(--text); margin-bottom: 10px; font-weight: 600;
  display: flex; align-items: center; gap: 7px; }
.cv-group-title::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--primary); flex: none; }
.cv-group .row { margin-top: 0; }
.cv-group .row + .row, .cv-group .cv-tpl-row + .row, .cv-group .row + .cv-tpl-row,
.cv-group .cv-group-title + .cv-tpl-row { margin-top: 8px; }
#coverMask .cv-style-row .lock-sel { flex: 0 1 auto; min-width: 96px; }
#coverMask .cv-style-row .cv-lab { min-width: 56px; }

.cover-prev { min-height: 120px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f2f5fb, #e8edf6); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.cover-prev img { width: auto; max-width: 218px; max-height: 50vh; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); object-fit: contain; }
.cv-stage { position: relative; display: inline-block; }
.cv-stage img { display: block; max-height: 50vh; width: auto; max-width: 218px; border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); user-select: none; -webkit-user-drag: none; }
.cv-guide { position: absolute; background: rgba(59,130,246,.85); pointer-events: none; z-index: 5;
  box-shadow: 0 0 4px rgba(59,130,246,.6); }
.cv-guide.v { left: 50%; top: 0; width: 1px; height: 100%; }
.cv-guide.h { top: 50%; left: 0; height: 1px; width: 100%; }
.cv-textbox { position: absolute; transform: translate(-50%, -50%); cursor: move; touch-action: none;
  white-space: pre-wrap; text-align: center; width: max-content; max-width: 92%; pointer-events: auto; line-height: 1.3; }
.cv-textbox i { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(59,130,246,.92); color: #fff; font-size: 12px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center; cursor: nwse-resize; touch-action: none; }
.cv-textbox:hover { outline: 1px dashed rgba(59,130,246,.7); outline-offset: 4px; border-radius: 4px; }

/* 封面模板 / 预设 */
.cv-tpl-row { display: flex; flex-wrap: wrap; gap: 7px; }
.cv-tpl-btn { padding: 5px 12px; border: 1px solid #d6deea; border-radius: 16px; background: #fff; cursor: pointer;
  font-size: 12px; color: var(--text); transition: border-color var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), background var(--hv-dur) var(--hv-ease); }
.cv-tpl-btn:hover { border-color: var(--hv-line); color: var(--hv-fg); background: var(--hv-bg-soft); }
.cv-preset { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.cv-preset-del { position: absolute; right: -7px; top: -7px; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid #fff; background: #e5484d; color: #fff; font-size: 10px; line-height: 1;
  cursor: pointer; padding: 0; display: none; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); z-index: 2; }
.cv-preset:hover .cv-preset-del { display: inline-flex; }
.cv-preset-del:hover { background: #c53034; transform: scale(1.12); }
/* 预设选中态（当前套用中的预设） */
.cv-tpl-btn.on { border-color: var(--primary); color: var(--primary); background: #eaf1ff; font-weight: 600; }
input[type="number"].path-input { padding: 6px 8px; }

/* 底部主操作：通栏大按钮 */
#coverMask #cvGo { width: 100%; padding: 11px 16px; font-size: 14px; border-radius: 10px; }

/* 移动端：单列堆叠，预览居中缩小 */
@media (max-width: 760px) {
  #coverMask .dialog { padding: 14px; }
  #coverMask .dialog-head { flex-wrap: wrap; gap: 8px; }
  #coverMask .dialog-head .row { margin: 0; }
  .cv-body { grid-template-columns: 1fr; gap: 14px; }
  .cv-side { position: static; }
  .cover-prev { padding: 10px; }
  .cv-stage img, .cover-prev img { max-height: 36vh; max-width: 150px; }
  #coverMask #cvGo { padding: 12px 16px; }
  .cv-grid { gap: 6px; }
}

/* ---------- 统一入口：项目栏 + 取材选择（方案 D 合并） ---------- */
.projectbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--card, #fff);
  border-bottom: 1px solid var(--line, #e6e6e6);
}
.pb-label { font-size: 13px; color: var(--muted, #888); }
/* 桌面端：第一行容器透明化，保持原有单行布局；⋯ 按钮只在手机端显示 */
.pb-top { display: contents; }
.pb-more-btn { display: none; }
.pb-stat { font-size: 12px; color: var(--muted, #888); margin-left: 2px; white-space: nowrap; }
.pb-sel {
  min-width: 260px; max-width: 420px; padding: 6px 10px; font-size: 13px;
  border: 1px solid var(--line, #d9d9d9); border-radius: 8px; background: #fff;
}
.pb-sel.small { min-width: 150px; }
/* 操作按钮组：桌面端与项目栏同行，手机端独立 Grid 等宽排列 */
.pb-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pb-actions > .btn.small {
  white-space: nowrap;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 2px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 5px 12px; font-size: 13px; border-radius: 999px;
  border: 1px solid var(--line, #d9d9d9); background: #fff; color: #444;
  transition: border-color var(--hv-dur) var(--hv-ease), background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease);
}
.chip:hover { border-color: var(--hv-line); background: var(--hv-bg-soft); color: var(--hv-fg); }
.chip.on { background: var(--brand, #3b82f6); border-color: var(--brand, #3b82f6); color: #fff; }
.chip b { font-weight: 500; opacity: .75; font-size: 12px; }
.chip i { font-style: normal; opacity: .8; }
/* 空夹（整棵子树都没有素材）：虚线浅底，视觉上退到背景里 */
.chip.dim { border-style: dashed; color: #98a1b0; background: #fbfcfe; }
.chip.dim b { opacity: .6; }
.chip.dim:hover { color: var(--hv-fg); background: var(--hv-bg-soft); }
/* 新建目标夹成功后：对应标签闪烁定位提示 */
.chip.flash { animation: chipFlash 2.4s ease 1; }
@keyframes chipFlash {
  0%, 55% { background: var(--primary); border-color: var(--primary); color: #fff;
            box-shadow: 0 0 0 3px rgba(47,107,255,.25); }
}
/* ---------- 取材范围：常驻内嵌的素材夹层级面板（无需点击展开） ---------- */
/* 原「摘要条」一行（.lib-bar / .lib-scope-chips / .scope-chip）已整行删除，
   死样式一并清掉；若今后要恢复「已选标签一览」，样式请加在 .sq-foot 那一行里。 */
.cascade-inline { display: block; margin: 8px 0 2px; }
.cd-panel.cd-inline {
  position: static;                 /* 回到正常文档流，不再 fixed 浮层 */
  z-index: auto;
  max-width: none;
  margin: 0;
  border: 1px solid var(--line, #e3e8f0);   /* 内嵌卡片：淡描边，不用主色 */
  border-radius: 10px;
  box-shadow: none;                 /* 内嵌卡片不加重阴影 */
  animation: none;                  /* 常驻显示，去掉下落动画（每次重绘会闪） */
}
/* 常驻面板用固定像素限高 + 列内独立滚动：夹再多也不把下面内容挤出屏幕，
   不用 vh（vh 随窗口高度乱跳，大屏上能撑到 700px+） */
.cd-panel.cd-inline .cd-cols {
  max-height: 264px;
  overflow-x: auto; overflow-y: hidden;   /* 列多时横向滚动，不撑破外层面板 */
}
.cd-panel.cd-inline .cd-col { max-height: 264px; }
.cd-panel.cd-inline .cd-results { max-height: 264px; overflow-y: auto; }

/* ── 取材范围面板底部：**已选素材夹列表** + 清空 ──
   每个已选夹一个 chip，右侧 ✕ 单独移出（点完列表 / 列里勾选态 / 计数一起实时重绘）。
   2026-09-14：这里原先是「取材状态说明（含空范围告警）」，按用户要求改为直接列出已选夹 ——
   告警也随之取消、不再需要标黄样式：分析按钮已收紧为"必须先勾选才能分析"，
   未勾选时点它会被当场拦下并给出说明。 */
.sq-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; border-top: 1px solid #eef1f5; background: #f8faff;
}
.sq-sum {
  flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted, #6b7487);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.sq-sum b { color: var(--primary, #2563eb); font-weight: 600; }
.sq-sum .sq-none { color: #98a1b0; }
.sq-picked-head { flex: none; color: var(--muted, #6b7487); }
/* 已选素材夹标签：点右侧 ✕ 单独移出（长路径省略号，整行放不下自动换行） */
.picked-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 3px 1px 9px; border-radius: 999px;
  border: 1px solid var(--primary, #2563eb); background: #f2f6ff; color: var(--primary, #2563eb);
  font-size: 11.5px; line-height: 1.75;
}
.picked-chip .pc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.picked-chip b { font-weight: 500; opacity: .7; }
.picked-chip.dim { border-style: dashed; border-color: #c8d2e2; background: #fbfcfe; color: #8892a6; }
.picked-chip .x {
  border: none; background: none; color: inherit; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: 999px; opacity: .65;
}
.picked-chip .x:hover { opacity: 1; background: rgba(37,99,235,.12); }
/* 未选择素材夹时的「🔍 分析已选素材」按钮：只降观感、不 disabled
   （disabled 会让人不知道为什么按不动，这里点了会给出明确该做什么） */
.btn.is-idle { opacity: .55; }
.btn.is-idle:hover { opacity: .78; }
/* 多选模式（取材范围）里，勾选中的条目名字前加 ✓；单选的目标夹下拉不受影响 */
.cd-panel.cd-multi .cd-item.cd-selected .cd-name::before { content: "✓ "; font-weight: 700; }
/* 类型组（地区/交通/美食/住宿）本身不是具体夹，多选模式下点击只是钻取，不做勾选提示 */
.cd-panel.cd-multi .cd-item .cd-cnt { flex: none; }

/* ---------- 素材夹搜索：空状态 ---------- */
.lib-search-empty { padding: 14px 10px; text-align: center; line-height: 1.9; }
.lib-search-empty span { font-size: 11.5px; color: #8a93a6; }

/* 素材夹按类型分组、可折叠 */
.lib-group { border: 1px solid var(--line, #e3e8f0); border-radius: 10px; margin: 6px 0; background: #fff; overflow: hidden; }
.lib-group > summary { list-style: none; cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13.5px; color: var(--text, #1c2333); display: flex; align-items: center; gap: 6px; user-select: none; background: #f7f9fc;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }
.lib-group > summary::-webkit-details-marker { display: none; }
.lib-group > summary::before { content: "▾"; color: #6b7487; display: inline-block; margin-right: 2px; transition: transform .15s; }
.lib-group:not([open]) > summary::before { transform: rotate(-90deg); }
.lib-group > summary:hover { background: var(--hv-bg); color: var(--hv-fg); }
.lg-ico { font-size: 15px; line-height: 1; }
.lg-cnt { font-size: 12px; font-weight: 500; color: #6b7487; background: #e3e8f0; border-radius: 10px; padding: 0 7px; margin-left: 2px; }
.lg-vc { font-size: 12px; font-weight: 500; color: #8892a6; }
.lib-group-body { padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
/* 素材夹层级：父夹下面挂子夹（地区 ▸ 景点、交通 ▸ 汽车 ▸ 大巴），
   用左侧引导线表达从属关系；平级夹子仍按行内 flow 排列，与原来观感一致。 */
.chip-node { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.chip-sub {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-left: 10px; margin-left: 3px;
  border-left: 2px dashed var(--line, #e4e8f0); border-radius: 2px;
}
.chip-node > .chip-sub { margin-top: 1px; }

/* 显示空夹开关 */
.toggle-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #7a8599; cursor: pointer; user-select: none; margin-left: auto; white-space: nowrap; }
.toggle-label:hover { color: #4a5568; }
.toggle-label input[type="checkbox"] { accent-color: var(--brand, #3b82f6); cursor: pointer; }

/* ---------- 级联筛选面板（替代扁平下拉框，逐层缩小范围） ----------
/* ==================== 目标夹：悬停级联下拉菜单 ====================
   交互：点击触发器 → 展开多列级联菜单 → 鼠标悬停自动展开子列
   顶部搜索框跨层级过滤；点击叶子项选中并关闭
   数据来源：U.tree（素材库目录树） */

/* ── 下拉容器（相对定位，为面板定位锚点）── */
.cascade-dropdown {
  position: relative; display: inline-flex;
  min-width: 180px; max-width: 320px;
}

/* ── 触发按钮（模拟 select 外观）── */
.cd-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  width: 100%; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--line, #d0d5dd); border-radius: 8px;
  background: linear-gradient(180deg, #fff, #fafbfc);
  font-size: 13px; color: var(--text, #1c2333);
  cursor: pointer; text-align: left;
  transition: border-color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease), background var(--hv-dur) var(--hv-ease);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  user-select: none;
}
.cd-trigger:hover {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 2px 6px rgba(37,99,235,.10);
}
.cd-trigger.cd-open {
  border-color: var(--primary, #2563eb);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  box-shadow: 0 2px 8px rgba(37,99,235,.14);
  background: #fff;
}
.cd-label {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.cd-arrow {
  font-size: 11px; color: #94a3b8; transition: transform .2s ease;
  flex: none;
}
.cd-trigger.cd-open .cd-arrow { transform: rotate(180deg); color: var(--primary, #2563eb); }

/* ── 下拉面板（fixed 定位，脱离 body overflow:hidden 裁切）── */
.cd-panel {
  position: fixed;
  z-index: 99999;
  border: 1px solid var(--primary, #2563eb);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #fff;
  box-shadow:
    8px 12px 32px rgba(15,23,42,.18),
    0 2px 6px rgba(15,23,42,.06);
  animation: cdDropIn .18s ease;
  max-width: min(88vw, 720px);
  overflow: hidden;
}
@keyframes cdDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 搜索行 ── */
.cd-search-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #eef1f5;
  background: #fafbfc;
}
.cd-search {
  flex: 1; min-width: 0;
  border: 1px solid #e0e4ee; border-radius: 18px;
  padding: 5px 12px; font-size: 12.5px;
  background: #fff; color: var(--text);
  transition: all .18s ease;
}
.cd-search:focus { outline: none; border-color: var(--primary, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.cd-search::placeholder { color: #a0a8bc; }

/* ── 多列级联菜单容器（横向排列，每列独立纵向滚动）── */
.cd-cols {
  display: flex;
  align-items: stretch;
  max-height: 380px;
  background: #fff;
}
.cd-col {
  display: flex; flex-direction: column;
  width: auto; min-width: 120px; max-width: 240px;
  max-height: 380px;
  overflow: hidden;                 /* 列整体不滚动，滚动交给 .cd-col-body */
  border-right: 1px solid #f0f2f7;
  flex-shrink: 0;
}
/* 列表区：只有这里纵向滚动；列标题在它上方，永不参与滚动 */
.cd-col-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 0;
  scrollbar-width: thin;
}
.cd-col:last-child { border-right: none; }

/* ── 菜单项 ── */
.cd-item {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 7px 12px;
  border: none; background: transparent;
  font-size: 13px; font-weight: 400; color: var(--text, #1c2333);
  cursor: pointer; text-align: left; white-space: nowrap;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease);
  position: relative;
  user-select: none;
}
/* 悬停 / 键盘高亮：与全站统一（浅蓝渐变底 + 主色文字 + 左侧主色指示条） */
.cd-item:hover, .cd-item.cd-active {
  background: linear-gradient(90deg, var(--hv-bg), var(--hv-bg-2));
  color: var(--hv-fg);
  box-shadow: inset 3px 0 0 var(--primary, #2563eb);
}
.cd-item.cd-active {
  background: linear-gradient(90deg, #e0e8ff, var(--hv-bg));
  font-weight: 600;
}
.cd-item.cd-selected {
  background: linear-gradient(90deg, var(--primary, #2563eb), #3b82f6);
  color: #fff;
  font-weight: 600;
}
/* 已选中项被悬停时也要有反馈：整条提亮一档（否则蓝底上看不出变化） */
.cd-item.cd-selected:hover {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  box-shadow: inset 3px 0 0 rgba(255,255,255,.85);
}
.cd-item .cd-ico { display: none; }            /* 默认隐藏图标（后续列不显示图标） */
.cd-col[data-colidx="0"] .cd-item .cd-ico { display: inline; }  /* 仅第一列（类型组）显示图标 */
.cd-item .cd-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.cd-item .cd-cnt {
  font-size: 10px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #94a3b8, #a8b5c8);
  border-radius: 8px; padding: 1px 6px; margin-left: 4px;
  line-height: 1.6; flex: none;
}
.cd-item:hover .cd-cnt,
.cd-item.cd-active .cd-cnt {
  background: linear-gradient(135deg, var(--primary, #2563eb), #3b82f6);
}
.cd-item.cd-selected .cd-cnt {
  background: rgba(255,255,255,.25);
}
.cd-item .cd-arrow-icon {
  font-size: 10px; color: #b0b8c8; margin-left: 4px; flex: none;
  transition: transform .15s ease;
}
.cd-item:hover .cd-arrow-icon { color: var(--primary, #2563eb); transform: translateX(1px); }

/* ── 列标题（面包屑/当前路径）── */
.cd-col-header {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 12px 6px;
  font-size: 11.5px; font-weight: 700; color: var(--primary, #2563eb);
  border-bottom: 1px solid #eef1f5;
  background: #f8faff;
  flex: none;                       /* 固定在列顶，不随列表滚动 */
  letter-spacing: .3px;
  white-space: nowrap;
}
.cd-col-header .cd-h-ico { font-size: 13px; }

/* ── 空状态 ── */
.cd-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 16px; color: #9aa2b4; font-size: 12.5px;
  text-align: center; line-height: 1.6;
}
.cd-empty::before { content: "🔍"; font-size: 26px; margin-bottom: 6px; opacity: .4; }

/* ── 搜索结果列表（覆盖多列模式）── */
.cd-results {
  display: none; max-height: 280px; overflow-y: auto;
  padding: 4px 0;
}
.cd-results.cd-show { display: block; animation: cdSlideDown .18s ease; }
@keyframes cdSlideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 280px; }
}
.cd-result-item {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 8px 14px;
  border: none; background: transparent;
  cursor: pointer; text-align: left;
  font-size: 12.5px;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease);
  user-select: none;
}
.cd-result-item:hover {
  background: linear-gradient(90deg, var(--hv-bg), var(--hv-bg-2));
  color: var(--hv-fg);
  box-shadow: inset 3px 0 0 var(--primary);
}
.cd-result-item .cd-path-tag {
  font-size: 10px; color: #7a85a0; background: #f0f3f9;
  border-radius: 8px; padding: 2px 7px; white-space: nowrap; font-weight: 500;
}
.cd-result-item .cd-name { font-weight: 600; }
.cd-result-item .cd-n {
  font-size: 10.5px; color: #8e98ae; margin-left: auto;
  font-weight: 600; background: #f0f2f7; border-radius: 10px; padding: 1px 7px;
}

/* ── 手机端适配 ── */
@media (max-width: 768px) {
  .cascade-dropdown { max-width: none; }
  .cd-panel { max-height: 60vh; }
  .cd-cols { max-height: 50vh; }
  .cd-col { min-width: 130px; max-width: 170px; }
  /* 常驻面板在小屏上收紧一些，避免挤占内容；并解除 .cd-panel 的 60vh 上限
     （内嵌面板高度由内容决定，用 vh 会随窗口高度乱跳甚至裁掉底部） */
  .cd-panel.cd-inline { max-height: none; }
  .cd-panel.cd-inline .cd-cols,
  .cd-panel.cd-inline .cd-col,
  .cd-panel.cd-inline .cd-results { max-height: 210px; }
}
.chip.dim { opacity: .45; border-style: dashed; }
.chip.dim:hover { opacity: .75; }

/* 登录门禁：未登录时服务端给 <html> 加 nl，首帧即隐藏工具界面（配合 p5 登录页） */
html.nl body>*:not(#p5Login){visibility:hidden}
html.nl body{background:#f4f6fa;overflow:hidden;height:100vh}

/* ---------- 高级音色选项：统一折叠（音色克隆 / Azure / 豆包） ---------- */
#advVoices{border:1px solid var(--line,#e3e8f0);border-radius:10px;background:#fff;margin-bottom:12px}
#advVoices>summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:600;font-size:14px;color:var(--text,#1c2333);display:flex;align-items:center;gap:8px;user-select:none;transition:background var(--hv-dur) var(--hv-ease),color var(--hv-dur) var(--hv-ease)}
#advVoices>summary::-webkit-details-marker{display:none}
#advVoices>summary::before{content:"▸";color:#6b7487;display:inline-block;transition:transform .15s}
#advVoices[open]>summary::before{transform:rotate(90deg)}
#advVoices>summary:hover{background:var(--hv-bg-soft);color:var(--hv-fg)}
.adv-badge{font-size:11px;font-weight:400;padding:1px 8px;border-radius:999px;background:#e8f6ec;color:#15803d}
.adv-body{padding:0 12px 12px}

/* ④字幕样式设置折叠（默认收起，只显示预览画面） */
#subStyleBox{flex:1;min-width:340px}
#subStyleBox>summary{list-style:none;cursor:pointer;padding:10px 12px;font-weight:600;font-size:14px;color:var(--text,#1c2333);display:inline-flex;align-items:center;gap:8px;user-select:none;border:1px solid var(--line,#dfe4ee);border-radius:8px;background:#fff;transition:background var(--hv-dur) var(--hv-ease),color var(--hv-dur) var(--hv-ease),border-color var(--hv-dur) var(--hv-ease)}
#subStyleBox>summary::-webkit-details-marker{display:none}
#subStyleBox>summary::before{content:"\25B8";color:#6b7487;display:inline-block;transition:transform .15s}
#subStyleBox[open]>summary::before{transform:rotate(90deg)}
#subStyleBox>summary:hover{background:var(--hv-bg-soft);color:var(--hv-fg);border-color:var(--hv-line)}
#subStyleBox .sub-controls{margin-top:10px}

/* ---------- 项目条账号菜单（切换账号 / 退出登录） ---------- */
.acct-wrap { position: relative; margin-left: auto; }
.pb-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card, #fff);
  border: 1px solid var(--line, #e4e8f0); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(28,35,51,.14); min-width: 150px; padding: 6px; z-index: 70; }
.pb-menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0;
  background: none; border-radius: 6px; font-size: 13px; font-family: inherit;
  color: var(--text, #1c2333); cursor: pointer; white-space: nowrap;
  transition: background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease); }
/* 悬停反馈与全站统一；危险项保留红色语义，只把底色换成红调 */
.pb-menu button:hover { background: linear-gradient(90deg, var(--hv-bg), var(--hv-bg-2)); color: var(--hv-fg); box-shadow: inset 3px 0 0 var(--primary); }
.pb-menu button.danger { color: var(--err, #dc2626); }
.pb-menu button.danger:hover { background: linear-gradient(90deg, #fef2f2, #fff5f5); color: var(--err, #dc2626); box-shadow: inset 3px 0 0 var(--err, #dc2626); }


/* ---------- 深空顶区：项目条不再吸顶（随页面滚动，2026-09-13 用户选定方案A） ---------- */
.cockpit{position:relative;z-index:50;
  background:linear-gradient(135deg,#151f3d 0%,#27407e 100%);
  box-shadow:0 2px 14px rgba(15,23,50,.28)}
.cockpit .topbar{background:none;padding:12px 28px 8px;max-height:64px;overflow:hidden;
  transition:max-height .22s ease,opacity .18s ease,padding .22s ease}
.cockpit .brand{font-size:17px}
.cockpit .projectbar{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;margin:0 14px 10px;padding:8px 12px}
.cockpit .pb-label{color:rgba(255,255,255,.72)}
.cockpit.mini .topbar{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
#ckSentinel{height:1px;margin-top:-1px}
@media (prefers-reduced-motion:reduce){.cockpit .topbar{transition:none}}
/* ---------- 第 2 步：步骤轴 + 吸底状态条 + 首次引导 ---------- */
#stepAxis{display:flex;gap:6px;padding:0 14px 10px;flex-wrap:wrap}
.st-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);
  font-size:13px;font-family:inherit;cursor:pointer;transition:background var(--hv-dur) var(--hv-ease),border-color var(--hv-dur) var(--hv-ease),color var(--hv-dur) var(--hv-ease)}
.st-tab:hover{background:rgba(255,255,255,.12)}
.st-tab.active{background:#fff;color:#1c2333;border-color:#fff;font-weight:700}
.st-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35);flex:none}
.st-tab.done .st-dot{background:#4ade80}
.st-tab.active .st-dot{background:var(--primary)}
.st-tab.active.done .st-dot{background:#16a34a}
.st-badge{background:#f59e0b;color:#3b2b00;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700}
/* 折叠面板标题：手机上按住稍久会被当成"选择文字"，点击就不触发 → 禁止选中 */
summary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stBar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
  min-height:48px;padding:8px 20px;background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(20,30,60,.08);font-size:13px;transition:opacity .3s ease}
#stBar.fade{opacity:0;pointer-events:none}
#stBar.blocked{background:#fffbeb;border-top-color:#fde68a}
#stBar .st-msg{flex:1}
#stBar .st-go{white-space:nowrap}
#stBar .st-back{white-space:nowrap}
body.st-pad{padding-bottom:76px}
@media (max-width:768px){
  /* 片段锁定行：下拉框收窄，给右侧「自选画面」按钮和锁定说明留位 */
  .lock-sel{max-width:150px}
  /* 只允许竖向滚动：横向滑动不再被浏览器抢走（小米/夸克系内核会在
     横滑时把触摸序列转成自家手势并发 touchcancel，导致页面滑不动切步）。
     副作用：手机端禁用双指缩放页面（应用型页面可接受）。 */
  body{touch-action:pan-y;overscroll-behavior-x:none}
  .cockpit .topbar{padding:10px 16px 6px}
  #stepAxis{padding:0 8px 8px;gap:4px}
  /* 底部操作条：加高加大点击区，避开手机浏览器底部工具栏（safe-area） */
  #stBar{padding:10px 12px calc(12px + env(safe-area-inset-bottom));gap:10px;min-height:56px}
  #stBar .st-msg{font-size:13px;line-height:1.4}
  #stBar .st-go{padding:10px 16px;font-size:14px;font-weight:700;border-radius:9px;flex-shrink:0}
  #stBar .st-back{padding:10px 14px;font-size:14px;border-radius:9px;flex-shrink:0;
    background:#fff;border-color:var(--line);color:#333}
  .cockpit .brand{font-size:15px}
  .cockpit .brand .sub{display:none}
  .cockpit .projectbar{margin:0 8px 8px;padding:6px 8px;gap:6px}
  /* 手机端：项目条收成一行（下拉框+⋯），低频按钮收进展开面板 */
  .pb-top{display:flex;align-items:center;gap:6px;width:100%}
  .pb-sel{flex:1 1 0%;min-width:0;max-width:none}
  .pb-label{font-size:12px;flex-shrink:0;margin-right:0}
  .pb-more-btn{display:inline-block;flex:0 0 auto;font-size:16px;line-height:1;
    padding:6px 12px;min-width:40px;border-radius:8px;
    background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
  .pb-actions{display:none;width:100%}
  .pb-actions.open{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
    gap:6px;margin-top:6px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.2)
  }
  .pb-actions>.btn.small{justify-self:stretch;text-align:center;font-size:12px;padding:5px 4px}
  .pb-actions .acct-wrap{margin-left:0;grid-column:span 1}
  .pb-actions .pb-stat{grid-column:1/-1;margin:0;color:rgba(255,255,255,.65)}
  /* 步骤轴：4 等分加大成主导航，醒目易点 */
  #stepAxis{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 8px 10px}
  .st-tab{justify-content:center;padding:10px 4px;font-size:13.5px;font-weight:600;
    border-radius:10px;white-space:nowrap}
  .st-tab.active{box-shadow:0 2px 10px rgba(255,255,255,.25)}
  /* ---------- 手机端整理：按钮等宽 + 留白压缩 ---------- */
  .card{padding:12px 12px 14px;margin-bottom:10px}
  /* 按钮行改 2 列等宽 Grid（卡片直属的 .row 且只含按钮/字段的行） */
  .hist-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .card[data-step="1"]>.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  /* ②配音 音色行：单行压缩（试听按钮文字缩为「试听」；下拉框里的
     「🎙 音色名」「快 1.2x」本身自解释），状态小字出现时独占下一行 */
  .voice-row{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:10px}
  .voice-row #btnVoicePreview{flex-shrink:0;padding:8px 10px}
  .voice-row select{padding:7px 8px;font-size:13px}
  .voice-row label.field:nth-of-type(1){flex:1 1 auto;min-width:0;max-width:130px}
  .voice-row .fld-name{white-space:nowrap;flex-shrink:0}
  .voice-row label.field:nth-of-type(1) select{flex:1 1 auto;width:auto;min-width:0}
  .voice-row label.field:nth-of-type(2){flex-shrink:0}
  .voice-row #voicePreviewStatus{flex-basis:100%;width:100%;margin:0}
  .card[data-step="3"]>.tool-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .card[data-step="3"]>.tool-row>.hint{display:none}  /* 「目标夹」小字隐藏，select 独占一格 */
  .card[data-step="3"]>.tool-row>#uploadTarget{grid-column:span 1}
  .card[data-step="4"]>.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #btnCompose{grid-column:1/-1;width:100%}
  #btnDownload{grid-column:1/-1;width:100%}
  .card[data-step="4"]>.row .btn.hidden{display:none}
}

/* ---------- 第 3 步：线路模板 ---------- */
.tpl-list{max-height:300px;overflow:auto;display:flex;flex-direction:column;gap:8px}
.tpl-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;flex-wrap:wrap}
.tpl-item .tpl-name{font-weight:700;font-size:14px}
.tpl-item .tpl-meta{color:#5a6478;font-size:12px;flex:1;min-width:140px}
.tpl-chips{display:flex;gap:4px;flex-wrap:wrap}
.tpl-chip{background:#eef3ff;color:#2f6bff;border-radius:999px;font-size:11px;padding:2px 8px}
.tpl-empty{padding:14px 4px}

/* ==================== 第4步 · 批量出片队列抽屉 + 预览片面板 ==================== */

/* 顶区队列角标 */
.q-badge {
  display: inline-block; min-width: 16px; height: 16px; line-height: 16px;
  padding: 0 4px; margin-left: 4px; border-radius: 8px;
  background: #e11d48; color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}

/* 队列抽屉 */
.bq-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 96vw;
  background: #fff; z-index: 56; box-shadow: -12px 0 32px rgba(15, 23, 42, .18);
  padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.bq-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.bq-head .hint { flex: 1; text-align: right; }
.bq-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.bq-list { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.qrow {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fafafa;
}
.qrow.done, .qrow.error, .qrow.canceled { opacity: .82; }
.q-main { flex: 1; min-width: 0; }
.q-main b { font-size: 12.5px; }
.q-sub { font-size: 10.5px; color: #6b7280; margin-top: 2px; word-break: break-all; }
.qrow.error .q-sub { color: #b91c1c; }
.qrow.done .q-sub { color: #15803d; }
.qst { font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.qst.q-wait { background: #eef1f6; color: #5a6472; }
.qst.q-run { background: #dbeafe; color: #1d4ed8; }
.qst.q-done { background: #dcfce7; color: #15803d; }
.qst.q-err { background: #fee2e2; color: #b91c1c; }
.q-ops { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.qbar { height: 4px; border-radius: 2px; background: #e5e7eb; margin-top: 5px; overflow: hidden; }
.qbar i { display: block; height: 100%; background: #2563eb; border-radius: 2px; transition: width .5s; }
.bq-sched { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border: 1px dashed #d1d5db; border-radius: 9px; padding: 7px 9px; font-size: 11.5px; }

/* 预览片（480p 草稿）面板 */
.vf-box { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px; background: #f8fafc; margin-top: 8px; }
.vf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.vf-title { font-weight: 700; font-size: 12.5px; color: #374151; }
.vf-cap { flex: 1; text-align: right; font-size: 10.5px; color: #94a3b8; }
.vf-draft { display: flex; gap: 12px; align-items: stretch; }
.vf-draft video { width: 270px; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; flex: none; }
.vf-draft-side { flex: 1; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 768px) {
  .vf-draft { flex-direction: column; }
  .vf-draft video { width: 100%; max-width: 360px; height: auto; margin: 0 auto; display: block; }
  .bq-drawer { width: 100vw; max-width: 100vw; }
}

/* 草稿片渲染中悬浮进度球 */
.vf-orb {
  position: fixed; right: 16px; bottom: 20px; width: 56px; height: 56px;
  border-radius: 50%; border: none; cursor: pointer; padding: 0; z-index: 60;
  background: conic-gradient(#2563eb calc(var(--p, 0) * 1%), #dbe3ee 0);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .35);
  transition: transform .15s;
}
.vf-orb:hover { transform: scale(1.06); }
.vf-orb i {
  position: absolute; inset: 5px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; font-style: normal; color: #1d4ed8;
}
@media (max-width: 768px) {
  .vf-orb { right: 12px; bottom: 16px; width: 50px; height: 50px; }
  .vf-orb i { font-size: 10px; }
}

/* ---------- 文案库（金句库） ---------- */
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.dlg-head b { font-size: 16px; }
.dlg-head .hint { font-weight: 400; font-size: 11px; }
.dlg-x { border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer; color: var(--muted); padding: 2px 4px; }
.dlg-x:hover { color: var(--text); }
.copies-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.copies-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.libcat { display: inline-flex; font-size: 12px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; background: #fff; color: var(--muted); cursor: pointer; user-select: none;
  transition: border-color var(--hv-dur) var(--hv-ease), background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }
.libcat:hover { border-color: var(--hv-line); background: var(--hv-bg-soft); color: var(--hv-fg); }
.libcat.on { background: var(--primary-bg, #eaf1ff); border-color: #b9cdfd; color: var(--primary-dark, #1d4ed8); font-weight: 700; }
.copies-list { flex: 1; overflow-y: auto; min-height: 120px; max-height: 42vh; display: flex; flex-direction: column; gap: 8px; }
.copy-item { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: #fff; }
.copy-cat { flex: none; font-size: 11px; color: var(--primary-dark, #1d4ed8); background: var(--primary-bg, #eaf1ff); border-radius: 6px; padding: 2px 7px; margin-top: 1px; }
.copy-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.copy-ops { flex: none; display: flex; gap: 5px; }
.copy-fav.on { color: #f5a623; }
.copies-add { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.copies-add .ctl { padding: 7px 10px; font-size: 13px; }
@media (max-width: 768px) {
  .copies-list { max-height: 38vh; }
  .copy-item { flex-wrap: wrap; }
}

/* ---------- 违禁词检查（第6步） ---------- */
.sen-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sen-scope { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sen-summary { font-size: 12.5px; margin-bottom: 10px; color: var(--text); }
.sen-summary .sen-hi { color: #dc2626; font-weight: 700; }
.sen-summary .sen-mid { color: #d97706; font-weight: 700; }
.sen-ok { color: #15803d; font-weight: 600; }
.sen-list { flex: 1; overflow-y: auto; min-height: 120px; max-height: 46vh; display: flex; flex-direction: column; gap: 10px; }
.sen-group { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fbfcfe; }
.sen-group-head { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sen-hit { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-top: 1px dashed var(--line); flex-wrap: wrap; }
.sen-hit:first-of-type { border-top: 0; }
.sen-cat { flex: none; font-size: 11px; color: var(--muted); background: #eef1f6; border-radius: 6px; padding: 2px 7px; }
.sen-word { font-size: 13px; font-weight: 700; color: #b91c1c; }
.sen-level { flex: none; font-size: 11px; border-radius: 6px; padding: 2px 7px; }
.sen-level.hi { background: #fee2e2; color: #b91c1c; }
.sen-level.mid { background: #fef3c7; color: #b45309; }
.sen-sug { font-size: 12.5px; color: #15803d; }
@media (max-width: 768px) {
  .sen-list { max-height: 42vh; }
  .sen-hit { gap: 5px; }
}

/* ---------- 防查重（第6步） ---------- */
/* 防查重面板（类名刻意避开 "ad-"：小米浏览器广告净化会隐藏含该前缀的元素；
   布局刻意不用 flex：旧内核对 flex 支持差，块级最稳） */
.dup-box { border: 1px dashed #d1d5db; border-radius: 10px; padding: 8px 11px; background: #fbfcfe; margin: 10px 0; }
.dup-item { display: block; padding: 5px 8px; margin: 0 -8px; border-radius: 6px; font-size: 12.5px; line-height: 1.6; cursor: pointer;
  transition: background var(--hv-dur) var(--hv-ease), box-shadow var(--hv-dur) var(--hv-ease); }
.dup-item:hover { background: linear-gradient(90deg, var(--hv-bg), var(--hv-bg-2)); box-shadow: inset 3px 0 0 var(--primary); }
.dup-item b { font-weight: 700; margin-right: 2px; }
.dup-item .hint { font-size: 11.5px; }

/* ---------- 自定义下拉弹层：全面替代原生 select 弹出（手机上系统菜单无法定制样式） ----------
   面板锚定在下拉框正下方/正上方展开；遮罩透明仅用于点击空白处关闭 */
.dd-mask{position:fixed;inset:0;z-index:99999}
.dd-sheet{position:fixed;background:#fff;border:1px solid #e7ebf2;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 34px rgba(15,23,42,.22);transform-origin:top center;animation:ddPop .16s ease}
.dd-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:1px solid #eef1f5;font-size:13px;font-weight:700;color:#2b3444;background:#f8fafc}
.dd-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 0 10px}
.dd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;font-size:14.5px;color:#2b3444;cursor:pointer;
  transition:background var(--hv-dur) var(--hv-ease),color var(--hv-dur) var(--hv-ease),box-shadow var(--hv-dur) var(--hv-ease)}
.dd-row:active{background:var(--hv-bg)}
.dd-row .dd-txt{flex:1;min-width:0;word-break:break-all}
.dd-row .dd-check{flex:none;color:var(--primary,#2563eb);font-weight:700}
.dd-row.on{color:var(--primary,#2563eb);font-weight:700;background:#f5f8ff}
.dd-row.dis{color:#b9c0cc;pointer-events:none}
/* 悬停反馈：与全站统一（浅蓝渐变底 + 主色文字 + 左侧指示条）；放在 .on 之后，
   保证「已选中项」被悬停时同样有反馈，不会看起来像点不动 */
.dd-row:hover:not(.dis){background:linear-gradient(90deg,var(--hv-bg),var(--hv-bg-2));color:var(--hv-fg);box-shadow:inset 3px 0 0 var(--primary)}
.dd-close{border:none;background:none;font-size:16px;color:#98a1b0;cursor:pointer;padding:2px 6px;
  border-radius:6px;transition:background var(--hv-dur) var(--hv-ease),color var(--hv-dur) var(--hv-ease)}
.dd-close:hover{background:var(--hv-bg);color:var(--hv-fg)}
.dd-group{padding:12px 20px 4px;font-size:12px;color:#8a93a3;font-weight:700}
.dd-empty{padding:26px 20px;text-align:center;color:#98a1b0;font-size:13px}
@keyframes ddPop{from{opacity:0;transform:scaleY(.88) translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 站内确认弹窗（替代浏览器原生 confirm / alert） ----------
   原生 confirm 在各浏览器里长得都不一样（手机上还会被当成系统框），
   与页面风格割裂。这里统一成站内卡片：白底圆角 + 图标 + 说明 + 双按钮。
   类名用 cfm-* ：避开 ad- 之类会被国产浏览器广告净化误伤的命名。 */
#cfmMask{ z-index: 90000; background: rgba(15,23,42,.5); }
.cfm-box{
  width: min(360px, 90vw); background: #fff; border-radius: 16px;
  padding: 22px 22px 18px; text-align: center;
  box-shadow: 0 20px 60px rgba(15,23,42,.28);
  animation: cfmIn .18s ease-out;
}
.cfm-ico{ font-size: 27px; line-height: 1; margin-bottom: 9px; }
.cfm-title{ font-size: 16.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cfm-text{ font-size: 13.5px; line-height: 1.65; color: var(--muted); margin-bottom: 18px; white-space: pre-wrap; }
.cfm-text b{ color: var(--text); }
.cfm-input{ width: 100%; box-sizing: border-box; margin-bottom: 18px; padding: 9px 11px;
  font-size: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
  color: var(--text); outline: none; }
.cfm-input:focus{ border-color: var(--primary); }
.cfm-acts{ display: flex; gap: 10px; }
.cfm-acts .btn{ flex: 1; padding: 10px 0; font-size: 14px; border-radius: 10px; }
#cfmCancel{ background: #fff; }
#cfmOk.primary{ background: var(--primary); border-color: var(--primary); color: #fff; }
#cfmOk.primary:hover{ background: var(--primary-dark); }
#cfmOk.danger{ background: #fff; border-color: #f3c6c6; color: var(--err); }
#cfmOk.danger:hover{ background: #fef2f2; border-color: var(--err); }
@keyframes cfmIn{ from{ opacity: 0; transform: translateY(10px) scale(.97); } to{ opacity: 1; transform: none; } }

/* ===== 看图归类（B：乱名素材精准匹配） ===== */
#clsEditor{ z-index: 60; }
.cls-editor-thumb{ display: flex; justify-content: center; margin-bottom: 12px; }
.cls-editor-thumb .clip-thumb{ width: 120px; height: 214px; border-radius: 8px; object-fit: cover; background: #e5ebf3; }
.cls-field{ display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; text-align: left; }
.cls-field label{ font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cls-field .path-input{ width: 100%; }
/* 素材卡片上的来源标签（人工 / 夹推断 / 词库 / 未识别） */
.cls-src{ position: absolute; left: 8px; bottom: 8px; font-size: 10px; line-height: 1;
  padding: 3px 6px; border-radius: 6px; color: #fff; font-weight: 700; letter-spacing: .3px; }
.cls-tile .clip-thumb{ margin-bottom: 22px; }
.src-manual{ background: #16a34a; }
.src-folder{ background: #7c3aed; }
.src-lexicon{ background: #2563eb; }
.src-category{ background: #0891b2; }
.src-keyword{ background: #0891b2; }
.src-unknown{ background: #94a3b8; }
.cls-tile .clip-sub{ margin-bottom: 18px; }

/* ===== 看图归类·组织层（工具栏 / 分组 / 卡片状态 / 批量条） =====
   素材上了百个以后，光铺一片网格会「找不到、看不动」，所以加了工具栏 + 分组视图。
   工具栏不进 #clsGrid，只有网格自己滚，故它天然常驻，不需要 sticky。 */
.cls-tools{ flex: none; padding: 4px 0 8px; margin-bottom: 2px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px; }
.cls-row{ margin: 0; gap: 8px; }
.cls-count{ flex: none; white-space: nowrap; }
.cls-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.cls-chip{ border: 1px solid var(--line); background: #fff; border-radius: 14px;
  padding: 4px 11px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: border-color var(--hv-dur) var(--hv-ease), background var(--hv-dur) var(--hv-ease), color var(--hv-dur) var(--hv-ease); }
.cls-chip:hover{ border-color: var(--hv-line); background: var(--hv-bg-soft); color: var(--hv-fg); }
.cls-chip.on{ background: var(--primary); border-color: var(--primary); color: #fff; }
.cls-chip .cls-n{ font-size: 11px; font-weight: 700; opacity: .85; }
.cls-spacer{ flex: 1 1 auto; }
.cls-sel{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
.cls-sel select{ padding: 4px 6px; font-size: 12px; border-radius: 7px; }
.cls-prog{ display: flex; align-items: center; gap: 8px; }
.cls-prog-bar{ flex: 1; height: 6px; border-radius: 4px; background: #e8edf6; overflow: hidden; }
.cls-prog-bar i{ display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #3b82f6, #16a34a); transition: width .25s ease; }
#clsProgText{ flex: none; white-space: nowrap; }
.cls-foot{ padding: 6px 2px 0; line-height: 1.7; }

/* 分组视图：外层容器改块级，每组内部各自铺网格 */
#clsGrid.cls-grouped{ display: block; padding-top: 0; }
.cls-group{ margin-bottom: 6px; }
.cls-ghead{ position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 6px; border-radius: 8px;
  background: #f2f5fb; border: 1px solid var(--line); }
.cls-gtoggle, .cls-gpick{ flex: none; border: none; background: transparent; cursor: pointer;
  font-size: 12px; line-height: 1; color: var(--muted); padding: 3px 4px; border-radius: 5px; }
.cls-gtoggle:hover, .cls-gpick:hover{ background: var(--hv-bg); color: var(--hv-fg); }
.cls-gpick{ color: var(--primary); }
.cls-gname{ font-size: 12.5px; font-weight: 700; color: var(--text); word-break: break-all; }
.cls-gcount{ font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.cls-gtodo{ color: var(--warn); }
.cls-gbody{ display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; padding: 2px; }

/* 卡片状态：待归类显眼（虚线琥珀），选中显蓝 */
.cls-tile.is-todo{ border-style: dashed; border-color: #f0c98a; background: #fffdf7; }
.cls-tile.is-todo:hover{ border-color: var(--warn); background: #fff8ec; }
.cls-tile.is-sel{ border-color: var(--primary); background: var(--hv-bg); box-shadow: 0 0 0 2px rgba(47,107,255,.18); }
.cls-tile .cls-src.src-unknown{ background: var(--warn); }   /* 「待归类」用琥珀色，比灰色更抓眼 */
.cls-tick{ position: absolute; top: 6px; left: 6px; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.94); border: 1px solid #b9c6da; color: transparent;
  font-size: 12px; line-height: 16px; text-align: center; font-weight: 700; }
.cls-tile.is-sel .cls-tick{ background: var(--primary); border-color: var(--primary); color: #fff; }

/* 批量操作条 */
.cls-batchbar{ flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px; border-radius: 10px;
  background: var(--hv-bg-soft); border: 1px solid var(--hv-line); }
.cls-batch-info{ font-size: 12.5px; font-weight: 700; color: var(--primary); }
#clsBatchMask{ z-index: 62; }
/* ===== AI 建议标签（core/vision.py 画面识别结果，人工点选后才生效） ===== */
.ai-suggest{ margin-top: 8px; padding: 9px 10px; border-radius: 8px;
  background: var(--chip-bg, #f1f5f9); border: 1px dashed var(--line, #cbd5e1); }
.ai-tip{ font-size: 11.5px; color: var(--muted); margin-bottom: 7px; line-height: 1.5; }
.ai-list{ display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chip{ display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px; border-radius: 14px; font-size: 12.5px; font-weight: 600;
  background: var(--card, #fff); border: 1px solid var(--line, #cbd5e1);
  color: var(--text, #1e293b); transition: all .12s; }
.ai-chip:hover{ border-color: var(--hv-line); color: var(--hv-fg); background: var(--hv-bg-soft); }
.ai-chip .ai-score{ font-size: 10.5px; font-weight: 500; opacity: .65; }
.ai-chip.picked{ background: var(--primary, #2563eb); border-color: var(--primary, #2563eb); color: #fff; }
.ai-chip.picked .ai-score{ opacity: .85; }
.ai-chip.loading{ cursor: default; opacity: .6; }

/* ===== AI 美化解说词：逐段并列对照弹窗 ===== */
.pl-out{ max-height: 52vh; overflow-y: auto; padding: 4px 14px 10px; display: flex; flex-direction: column; gap: 10px; }
/* 曲库分页条 */
.bgm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 4px; }
.pl-row{ border: 1px solid var(--line); border-radius: 10px; background: #fafbfe; padding: 9px 11px; }
.pl-row.pl-warn{ border-color: #f0b429; background: #fffaf0; }
.pl-row-head{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 7px; }
.pl-row-head .pl-no{ font-size: 12px; font-weight: 700; color: var(--muted); }
.pl-row-head label{ display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; font-weight: 600; }
.pl-badge{ font-size: 11.5px; padding: 2px 9px; border-radius: 12px; font-weight: 600; }
.pl-badge.ok{ background: #e8f7ee; color: #177245; }
.pl-badge.warn{ background: #fdf1d6; color: #9a6b00; }
.pl-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pl-col-title{ font-size: 11.5px; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
.pl-text{ font: inherit; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word;
  padding: 8px 10px; border-radius: 8px; min-height: 40px; }
.pl-orig .pl-text{ background: #fff; border: 1px dashed var(--line); color: var(--muted); }
.pl-new .pl-text{ background: #fff; border: 1px solid var(--line); color: var(--text); }
.pl-len{ font-size: 11.5px; padding: 2px 9px; border-radius: 12px; font-weight: 600;
  background: #eaf3ff; color: #1d4ed8; }
.pl-len.grow{ background: #fdf1d6; color: #9a6b00; }
.pl-len.over{ background: #fde8e8; color: #b42318; }
.pl-missing{ margin-top: 6px; font-size: 12px; color: #9a6b00; }