/* AI电商图片工作台 · 设计系统
   浅绿灰底 + 白卡片 + 翡翠绿主色（#2FA36B），柔和阴影大圆角，微交互自然 */

:root {
  --bg: #f2f6f3;            /* 页面背景（浅绿灰） */
  --nav: #ffffff;           /* 导航/记录栏底 */
  --panel: #ffffff;         /* 卡片 */
  --line: #e7efe9;          /* 卡片细边 */
  --line-strong: #d2e0d7;   /* 输入框/描边按钮边框 */
  --text: #1b2a22;          /* 深绿墨 */
  --muted: #5c7260;         /* 绿灰次级文字 */
  --faint: #93a89b;
  --brand: #2fa36b;         /* 主色（翡翠绿） */
  --brand-deep: #1e7a4d;
  --brand-soft: #e7f5ec;    /* 浅绿选中底 */
  --brand-grad: linear-gradient(135deg, #35b477, #1e7a4d);
  --ok: #2fa36b;      --ok-bg: #e7f5ec;
  --warn: #d97a16;    --warn-bg: #fff4e5;
  --err: #dc4b3e;     --err-bg: #fdeeee;
  --info: #2f6fd6;    --info-bg: #ecf3fe;
  --radius-s: 8px;
  --radius: 10px;
  --radius-l: 13px;
  --shadow-s: 0 1px 2px rgba(23, 58, 38, .05);
  --shadow-m: 0 4px 16px rgba(23, 58, 38, .08);
  --shadow-l: 0 14px 44px rgba(23, 58, 38, .16);
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-size: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; overflow: hidden;
}

/* ============ 顶部主导航 ============ */
#header {
  height: 46px; flex: none; background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 14px; gap: 6px;
  z-index: 20;
}
#brand {
  font-size: 14px; font-weight: 700; color: var(--brand-deep);
  margin-right: 14px; letter-spacing: .3px; display: flex; align-items: center; gap: 7px;
}
#brand .logo-dot {
  width: 22px; height: 22px; border-radius: var(--radius-s);
  background: linear-gradient(135deg, #66bb6a, #2e7d32);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.main-tab {
  height: 30px; padding: 0 13px; border-radius: var(--radius-s); cursor: pointer;
  font-size: 13.5px; color: var(--muted); user-select: none;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.main-tab:hover { color: var(--brand-deep); }
.main-tab.active { background: var(--brand); color: #fff; font-weight: 500; }
.main-tab.disabled { opacity: .45; cursor: default; }
.main-tab .ic { font-size: 13px; }
.main-tab .beta { font-size: 9px; opacity: .8; transform: translateY(-4px); }
#header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
#main-tabs { display: flex; align-items: center; gap: 6px; }
.side-tab {
  height: 30px; padding: 0 14px; border-radius: var(--radius-s); cursor: pointer;
  font-size: 13px; color: var(--muted); user-select: none; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1.3px solid var(--line-strong);
}
.side-tab:hover { color: var(--brand-deep); border-color: var(--brand); }
.side-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 500; }

/* ============ 三栏工作区 ============ */
#workspace { flex: 1; display: flex; min-height: 0; }

/* ============ AI 视频首帧工作包 ============ */
.video-workspace { max-width: 980px; }
.video-plan-modal { max-width: 900px; max-height: 88vh; overflow-y: auto; }
.video-plan-list { display: grid; gap: 10px; max-height: 62vh; overflow-y: auto; }
.video-plan-item, .video-preview-item, .video-record-item {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fbfdfb; padding: 10px;
}
.video-plan-item .head, .video-preview-head, .video-record-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
}
.video-plan-item .sub, .video-record-item .sub { display: block; margin: 5px 0 3px; }
.video-plan-item textarea, .video-record-item textarea, .video-preview-item textarea {
  width: 100%; min-height: 72px; resize: vertical; margin-bottom: 7px;
}
.video-preview-item { margin-top: 8px; }
.video-preview-head span { margin-left: auto; color: var(--muted); font-size: 12px; }
.video-preview-grid { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 10px; align-items: start; }
.video-source img { width: 120px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-s); background: #f1f5f1; }
.video-prompt-text { min-height: 72px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-s); background: #fff; font-size: 12px; line-height: 1.6; white-space: pre-wrap; }
.video-record-prompts { margin: 10px 0; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #f8fbf8; }
.video-record-head button { margin-left: auto; }
.video-record-item { margin-top: 8px; }
@media (max-width: 900px) {
  .video-preview-grid { grid-template-columns: 90px 1fr; }
  .video-preview-grid > :last-child { grid-column: 2; }
  .video-source img { width: 90px; }
}


/* 左侧功能标签（白底、42px 行高、选中淡绿块 + 左侧绿条） */
#leftbar {
  width: 150px; flex: none; background: var(--nav);
  border-right: 1px solid var(--line); padding: 8px 0;
  display: flex; flex-direction: column; overflow-y: auto;
}
.feat-tab {
  display: flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 14px 0 17px;
  cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted);
  position: relative; user-select: none; white-space: nowrap;
  border-left: 3px solid transparent;
}
.feat-tab:hover { color: var(--brand-deep); }
.feat-tab.active {
  background: var(--bg); color: var(--brand); font-weight: 600;
  border-left-color: var(--brand);
}
.feat-tab .pill {
  font-size: 9px; padding: 0 5px; border-radius: 999px;
  background: #ef4444; color: #fff; font-weight: 700; transform: scale(.85);
}
.feat-tab .pill.free { background: #43a047; }

/* 主表单区：内容 774px 居中 */
#main { flex: 1; min-width: 0; overflow-y: auto; padding: 14px 16px 40px; }
#main.narrow .ws-inner { width: 774px; max-width: 100%; margin: 0 auto; }
.ws-inner { display: flex; flex-direction: column; gap: 8px; }

/* 页标题与副提示 */
.ws-page-title { font-size: 15px; font-weight: 600; }
.page-hint { font-size: 11px; color: var(--muted); margin-top: -4px; }
.form-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; }

/* 右侧记录流 */
#feed {
  width: 420px; flex: none; background: var(--nav);
  border-left: 1px solid var(--line); display: flex; flex-direction: column;
}
#feed-modes { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.feed-mode {
  padding: 4px 14px; font-size: 12.5px; border-radius: var(--radius-s);
  cursor: pointer; color: var(--muted); user-select: none;
}
.feed-mode:hover { color: var(--brand-deep); }
.feed-mode.active { background: var(--brand); color: #fff; font-weight: 500; }
#feed-body { flex: 1; overflow-y: auto; padding: 10px; }
.feed-empty { text-align: center; color: var(--faint); padding: 40px 10px; font-size: 13px; line-height: 2; }
.feed-empty .big { font-size: 28px; color: #b9cfbe; }

.feed-card {
  border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 10px; margin-bottom: 8px; background: #fff; cursor: pointer;
  transition: border-color .12s;
}
.feed-card:hover { border-color: var(--brand); }
.feed-card .fc-hd { display: flex; align-items: center; gap: 7px; }
/* 1.23.156 标题行圆形播放按钮（用户拍板方案A）：放标题行最右比底部文字按钮显眼；
   仅已成片任务渲染；悬停微放大+光晕。 */
.feed-card .fc-play { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0;
  padding: 0; margin-left: 2px; cursor: pointer; color: #fff; font-size: 13px; line-height: 1;
  text-indent: 1px;   /* ▶ 字符视觉重心右移一像素居中 */
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #3b8bff, #2e7cf6);
  box-shadow: 0 2px 8px rgba(46, 124, 246, .35);
  transition: transform .15s ease, box-shadow .15s ease; }
.feed-card .fc-play:hover { transform: scale(1.12); box-shadow: 0 3px 14px rgba(46, 124, 246, .5); }
.feed-card .fc-play:active { transform: scale(1.02); }
.feed-card .fc-tm { font-size: 11px; color: var(--faint); white-space: nowrap; }
.feed-card .fc-tt { font-size: 12.5px; font-weight: 600; line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-card .fc-thumbs { display: flex; gap: 4px; margin-top: 7px; align-items: center; }
.feed-card .fc-thumbs img {
  width: 42px; height: 42px; border-radius: 5px; object-fit: cover;
  border: 1px solid var(--line); background: #f2f6f2;
}
.feed-card .fc-count { font-size: 11px; color: var(--faint); margin-left: 5px; white-space: nowrap; }
.feed-card .fc-prog { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.feed-card .fc-prog .fp-bar {
  flex: 1; height: 5px; border-radius: 3px; background: #e3ebe3; overflow: hidden;
}
.feed-card .fc-prog .fp-bar i {
  display: block; height: 100%; background: var(--brand); border-radius: 3px;
  transition: width .35s;
}
.feed-card .fc-prog .fp-txt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.feed-card .fc-thumbs img { cursor: zoom-in; }
/* 1.23.143 视频任务卡小格（与图片小格同款 42×42；点击=播放弹窗） */
.feed-card .fc-thumbs video.fc-vthumb {
  width: 42px; height: 42px; border-radius: 5px; object-fit: cover;
  border: 1px solid var(--line); background: #111; cursor: pointer; flex-shrink: 0;
}
.feed-card .fc-ops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.feed-card .fc-ops .btn, .feed-card .fc-ops select, .feed-card .fc-ops .link-btn { white-space: nowrap; }

/* ============ 卡片与表单元素 ============ */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 11px 13px;
}
.f-sec { margin-bottom: 0; }
.f-group + .f-group { margin-top: 10px; }
.f-label { font-size: 13px; font-weight: 600; margin-bottom: 7px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.f-label .sub, .label-hint { font-weight: 400; color: var(--faint); font-size: 12px; }
.f-label .right { margin-left: auto; }

input:not([type]), input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text);
}
input:not([type]), input[type=text], input[type=password], input[type=number], select {
  height: 32px; padding: 0 10px;
}
textarea { padding: 6px 10px; font-size: 13px; line-height: 1.7; min-height: 64px; resize: vertical; }
input::placeholder, textarea::placeholder { font-size: 11.5px; color: #9db3a2; }
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(67,160,71,.1); }
input[type=range] { width: 100%; accent-color: var(--brand); }
input[type=checkbox] { accent-color: var(--brand); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--brand); color: #fff; border: none; border-radius: var(--radius-s);
  padding: 7px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: background .12s;
}
.btn:hover { background: var(--brand-deep); }
.btn:disabled { opacity: 1; background: #e4e4e7; color: #a1a1aa; cursor: not-allowed; }
.btn.ghost { background: #fff; color: var(--muted); border: 1.3px solid var(--line-strong); }
.btn.ghost:hover { background: #f4f8f4; color: var(--brand-deep); }
.btn.danger { background: var(--err); }
.btn.mini { padding: 3px 10px; font-size: 12px; border-radius: 6px; }
.btn.sm { padding: 6px 13px; font-size: 12.5px; }
.btn.lg { padding: 9px 26px; font-size: 13.5px; }
.btn.block { width: 100%; }

/* ============ 产品知识库（主图 / 详情图） ============ */
.kb-flow { display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: var(--radius-l); }
.kb-flow > i { flex: 1; min-width: 12px; height: 1px; background: #cfe0d2; }
.kb-step { display: flex; align-items: center; gap: 5px; color: var(--muted);
  font-size: 11.5px; white-space: nowrap; }
.kb-step b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: #f2f6f2; color: var(--faint); font-size: 11px; }
.kb-step.done { color: var(--brand-deep); font-weight: 600; }
.kb-step.done b { color: #fff; background: var(--brand); }
.kb-card { border-color: #d9eadb; background: linear-gradient(180deg, #fff, #fbfefb); }
.kb-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kb-card-head .f-label { margin-bottom: 4px; }
.kb-actions { display: flex; gap: 6px; flex: none; }
.kb-meta { color: var(--faint); font-size: 11.5px; line-height: 1.55; }
.kb-picker-row { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(260px, 1.25fr);
  gap: 8px; margin-top: 9px; }
.kb-product-summary { margin-top: 8px; }
.kb-empty-product { display: flex; align-items: center; gap: 8px; border-radius: 7px;
  background: #f6faf6; padding: 7px 9px; font-size: 11.5px; color: var(--faint); }
.kb-empty-product b { color: var(--muted); white-space: nowrap; }
.kb-product-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; }
.kb-product-title b { color: var(--brand-deep); font-size: 13px; }
.kb-product-title span { color: var(--muted); background: var(--brand-soft); padding: 2px 7px; border-radius: 999px; }
.kb-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 7px; }
.kb-summary-grid > div { border: 1px solid var(--line); background: #fff; border-radius: 7px;
  padding: 7px 8px; min-width: 0; }
.kb-summary-grid b, .kb-summary-grid span { display: block; }
.kb-summary-grid b { font-size: 11px; color: var(--brand-deep); margin-bottom: 3px; }
.kb-summary-grid span { font-size: 11.5px; color: var(--muted); line-height: 1.55;
  overflow-wrap: anywhere; max-height: 3.1em; overflow: hidden; }
.kb-match-warning { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #f5b47d;
  background: var(--warn-bg); color: #9a3e00; border-radius: var(--radius); padding: 9px 11px;
  font-size: 12px; line-height: 1.55; }
.kb-match-warning[hidden] { display: none; }
.kb-match-warning b { flex: none; }

/* ============ 双栏（主图/详情图：字段卡 + 参数栏） ============ */
.two-col { display: flex; gap: 8px; align-items: flex-start; }
.two-col .col-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.two-col .col-right { width: 224px; flex: none; display: flex; flex-direction: column; gap: 8px; }

/* chips 选择（胶囊型，选中绿描边浅绿底） */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: #fff; border-radius: 100px;
  height: 31px; padding: 0 14px; font-size: 13px; font-weight: 500;
  color: var(--muted); cursor: pointer; user-select: none;
  transition: all .1s; white-space: nowrap;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.chip .em { font-size: 13px; }
.chip.more { border: 1px dashed var(--line-strong); color: var(--faint); }
.chip-group-label { font-size: 11px; color: var(--faint); width: 100%; margin: 4px 0 0; letter-spacing: 1px; }

/* 比例按钮（小方块） */
.ratio-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ratio-opt {
  min-width: 56px; height: 33px; padding: 0 10px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted);
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
}
.ratio-opt:hover { border-color: var(--brand); color: var(--brand); }
.ratio-opt.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* 分段选择（配对方式等） */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .seg-btn {
  height: 29px; padding: 0 13px; border-radius: var(--radius-s);
  border: 1px solid var(--line-strong); background: #fff; color: var(--muted);
  font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.seg .seg-btn:hover { border-color: var(--brand); color: var(--brand); }
.seg .seg-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 上传区 */
.upload-title { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.upload-title .sub { font-weight: 400; color: var(--faint); font-size: 11.5px; }
.count-badge {
  font-size: 11px; font-weight: 400; color: var(--faint);
  background: var(--bg); border-radius: 999px; padding: 1px 8px;
}
.dropzone {
  border: 1.4px dashed var(--line-strong); border-radius: var(--radius-s);
  padding: 16px 12px; text-align: center; cursor: pointer; transition: all .12s;
  background: #fafafa;
}
.dropzone:hover, .dropzone.drag { border-color: var(--brand); background: #f0f7f0; }
.dropzone .up-icon { font-size: 17px; color: #b9c6bd; line-height: 1; }
.dropzone .t1 { font-size: 13.5px; color: var(--text); margin-top: 4px; }
.dropzone .t1 b { color: var(--brand); font-weight: 600; }
.dropzone .t2 { font-size: 11px; color: var(--faint); margin-top: 4px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumb {
  width: 72px; height: 72px; border-radius: var(--radius-s); overflow: hidden;
  position: relative; border: 1px solid var(--line); background: #f2f6f2;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .x {
  position: absolute; top: 2px; right: 2px; width: 17px; height: 17px;
  background: rgba(0,0,0,.55); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; cursor: pointer;
}
.dual-upload { display: flex; gap: 8px; }
.dual-upload > * { flex: 1; min-width: 0; }

/* 折叠面板 */
.collapse { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.collapse.plain { border: none; background: transparent; }
.collapse > .head {
  display: flex; align-items: center; gap: 6px; padding: 9px 2px;
  cursor: pointer; font-size: 13px; color: var(--muted); user-select: none; font-weight: 500;
}
.collapse > .head:hover { color: var(--brand-deep); }
.collapse > .head .arrow { transition: transform .15s; font-size: 10px; color: var(--faint); }
.collapse.open > .head .arrow { transform: rotate(90deg); }
.collapse > .body { border-top: 1px dashed var(--line); padding: 10px 2px 4px; }
.collapse:not(.open) > .body { display: none; }

/* 区块标题（带 —— 说明） */
.section-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--muted); }
.section-title .expl { font-size: 11px; font-weight: 400; color: var(--faint); }

/* 总体要求独立输入框 */
.overall-input { min-height: 58px; font-size: 13px; }

/* 使用说明卡 */
.guide { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-l);
  box-shadow: 0 1px 2px rgba(0,0,0,.03); padding: 11px 13px; }
.guide-title { font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--muted); }
.guide ol { padding-left: 18px; }
.guide li { font-size: 12px; color: var(--muted); line-height: 1.85; }
.guide .guide-result { font-size: 12px; color: var(--brand); font-weight: 500; margin-top: 6px; }
.usage { background: #f6faf6; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.usage b { color: var(--text); }

/* 预计生成算式（灰色文字行） */
.estimate { font-size: 12.5px; color: var(--muted); padding: 2px 2px; }

/* 底部操作条（重置 + 拉通主按钮） */
.gen-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gen-actions .btn-main {
  flex: 1; height: 38px; font-size: 15px; font-weight: 600; border-radius: var(--radius-s);
}
/* 底部操作条内的人脸策略分段选择 */
.face-policy { display: flex; align-items: center; gap: 6px; flex: none; }
.face-policy .fp-label {
  font-size: 12px; color: var(--faint); white-space: nowrap;
}
.face-policy .seg .seg-btn { height: 29px; }
.face-policy-tip {
  font-size: 11.5px; color: var(--faint); margin: -2px 0 8px; padding: 0 2px;
}
.form-actions { display: flex; gap: 10px; margin-top: 14px; align-items: center; }
.form-actions .gap { flex: 1; }
.link-btn { color: var(--faint); font-size: 12px; cursor: pointer; }
.link-btn:hover { color: var(--brand); }

/* 页脚 */
.ws-footer { text-align: center; padding: 18px 0 6px; }
.ws-logo {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
  background: var(--brand-soft); display: flex; align-items: center; justify-content: center;
  font-size: 30px;
}
.ws-disclaimer { font-size: 10.5px; color: var(--faint); margin-top: 8px; }

/* 行内参数（买家秀四个下拉） */
.param-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.param { display: flex; align-items: center; gap: 7px; }
.param > span { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--muted); }
.param select { width: auto; min-width: 86px; height: 32px; padding: 0 8px; }

/* 滑杆组（高级参数） */
.slider-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.slider-label b { color: var(--brand); font-weight: 600; }

/* 状态徽章 */
.badge { font-size: 11px; padding: 1px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.badge.queued { background: #f2f6f2; color: var(--muted); }
.badge.running { background: var(--info-bg); color: var(--info); }
.badge.done { background: var(--ok-bg); color: var(--ok); }
.badge.partial { background: var(--warn-bg); color: var(--warn); }
.badge.failed { background: var(--err-bg); color: var(--err); }
.badge.cancelled { background: #f2f6f2; color: var(--faint); }

/* ============ 弹层 ============ */
.modal-mask { position: fixed; inset: 0; background: rgba(24,32,26,.45); z-index: 900; display: flex; align-items: center; justify-content: center; }
.modal { background: #fff; border-radius: var(--radius-l); padding: 20px 22px; width: min(720px, 94vw); max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
.modal.wide { width: min(1060px, 94vw); }
.modal h3 { font-size: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.modal h3 .x { margin-left: auto; cursor: pointer; color: var(--faint); font-size: 16px; font-weight: 400; }

/* 规划确认列表 */
.plan-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; margin-bottom: 8px; background: #fff; }
.plan-item .head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; }
.plan-item textarea { min-height: 60px; font-size: 12.5px; }

/* 记录详情画廊 */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gitem { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; position: relative; }
.gitem img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f2f6f2; cursor: zoom-in; display: block; }
.gitem .bar { padding: 6px 8px; font-size: 11.5px; }
.gitem .bar .lb { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gitem .bar .st { margin-top: 2px; color: var(--muted); }
.gitem .bar .st.err { color: var(--err); }
.gitem.running img { opacity: .35; }
.gitem .spin { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); color: var(--brand); font-size: 11px; display: flex; align-items: center; }
.gitem .edit-ops { display: flex; gap: 4px; padding: 0 6px 8px; flex-wrap: wrap; }
.gitem .edit-ops .btn { padding: 2px 6px; font-size: 11px; line-height: 1.5; }
.edit-stage { background: #f2f6f2; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; }
.edit-stage canvas { max-width: 100%; max-height: 52vh; cursor: crosshair; touch-action: none; display: block; margin: 0 auto; }
.edit-tools { display: flex; align-items: center; gap: 10px; margin: 10px 0; font-size: 12px; flex-wrap: wrap; }
.edit-tools .ed-hint { color: var(--faint); font-size: 11.5px; }
.edit-tools input[type=range] { width: 110px; }
.review-box { background: #f6faf6; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 6px; font-size: 12.5px; line-height: 1.7; }

#toast-wrap { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #243026; color: #fff; padding: 8px 18px; border-radius: 100px; font-size: 12.5px; box-shadow: 0 6px 20px rgba(0,0,0,.2); animation: pop .18s; }
.toast.err { background: var(--err); }
.toast.ok { background: var(--ok); }
@keyframes pop { from { opacity: 0; transform: translateY(-8px);} to { opacity: 1; } }

#lightbox { position: fixed; inset: 0; background: rgba(9,14,10,.88); z-index: 998; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 12px; cursor: zoom-out; }
#lightbox img { max-width: 92vw; max-height: 84vh; border-radius: var(--radius); cursor: default; }
#lightbox .ops { display: flex; gap: 10px; align-items: center; }
#lightbox .lb-count { color: #cfe0d2; font-size: 13px; }
#lightbox .lb-x {
  position: absolute; top: 14px; right: 18px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; font-size: 16px; line-height: 34px;
  text-align: center; cursor: pointer; z-index: 2;
}
#lightbox .lb-x:hover { background: rgba(255,255,255,.28); }
#lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  border: none; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer; z-index: 2;
}
#lightbox .lb-nav:hover { background: rgba(255,255,255,.28); }
#lightbox .lb-nav.prev { left: 16px; }
#lightbox .lb-nav.next { right: 16px; }

/* ============ 无限画布（深色工作区） ============ */
.cv-page { display: flex; flex-direction: column; height: calc(100vh - 46px - 28px); min-height: 520px; }
.cv-actions { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; }
.cv-actions .gap { flex: 1; }
.cv-clear-cmd { color: #ef4444 !important; border-color: rgba(239,68,68,.4) !important; }
.cv-body { flex: 1; display: flex; gap: 8px; min-height: 0; }

/* 左侧图层面板 */
.cv-left { width: 212px; flex: none; display: flex; flex-direction: column; gap: 8px;
  background: #23272f; border: 1px solid #333a45; border-radius: var(--radius-l); padding: 10px; overflow: hidden; }
.cv-left-head { display: flex; align-items: center; justify-content: space-between;
  color: #cfd6df; font-size: 13px; font-weight: 600; }
.cv-left-head b { color: #7e8794; font-weight: 500; margin-left: 3px; }
.cv-group-btn { border: 1px solid #3d4552; background: #2a2f38; color: #aab3bf;
  border-radius: 6px; padding: 3px 12px; font-size: 12px; cursor: pointer; }
.cv-group-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cv-group-btn:disabled { opacity: .45; cursor: default; }
.cv-layerlist { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; }
.cv-lrow { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid #333a45;
  border-radius: 6px; cursor: pointer; font-size: 12px; color: #cfd6df; background: #272b33; }
.cv-lrow:hover { border-color: #465062; }
.cv-lrow.on { border-color: var(--brand); background: rgba(67,160,71,.14); }
.cv-lrow img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; background: #1b1e24; flex: none; }
.cv-lrow .cv-lcb { flex: none; accent-color: var(--brand); cursor: pointer; }
.cv-lrow .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-lrow .op { color: #6b7481; cursor: pointer; font-size: 11px; padding: 0 2px; flex: none; }
.cv-lrow .op:hover { color: var(--brand); }
.cv-lrow .op.lock-on { color: var(--warn, #f59e0b); }
.cv-lrow.locked { opacity: .65; }
.cv-zoomrow { display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid #333a45; padding-top: 8px; color: #7e8794; font-size: 12px; }
.cv-zoomrow b { color: #cfd6df; margin-left: 2px; }
.cv-zbtns { display: flex; gap: 4px; }
.cv-zbtn { width: 24px; height: 22px; border: 1px solid #3d4552; background: #2a2f38; color: #aab3bf;
  border-radius: 5px; font-size: 11px; cursor: pointer; line-height: 1; }
.cv-zbtn:hover { border-color: var(--brand); color: var(--brand); }

/* 舞台 */
.cv-stagewrap { flex: 1; min-width: 0; position: relative; overflow: hidden;
  background: #2b303b; border: 1px solid #333a45; border-radius: var(--radius-l);
  background-image: radial-gradient(#363d4a 1px, transparent 1px); background-size: 18px 18px; }
.cv-stagewrap.t-move { cursor: default; }
.cv-stagewrap.t-pan { cursor: grab; }
.cv-stagewrap.t-pan.panning { cursor: grabbing; }
.cv-stagewrap.t-draw { cursor: crosshair; }
.cv-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 100%; height: 100%; }
.cv-layer { position: absolute; cursor: move; }
.cv-layer.locked { cursor: default; }
.cv-layer img { width: 100%; height: 100%; display: block; user-select: none;
  pointer-events: none; border: 1px solid transparent; }
.cv-layer.sel img { outline: 2px solid var(--brand); }
.cv-layer.in-multi img { outline: 2px dashed rgba(67,160,71,.85); }
.cv-layer.hidden { display: none; }   /* 单图显示：不显示的图层彻底隐藏，不留鬼影 */
/* 8 向缩放手柄 + 顶部旋转手柄 */
.cv-h { position: absolute; width: 10px; height: 10px; background: #fff; border: 2px solid var(--brand);
  border-radius: 2px; z-index: 5; }
.cv-h.h-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.cv-h.h-n  { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }
.cv-h.h-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.cv-h.h-e  { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.cv-h.h-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.cv-h.h-s  { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }
.cv-h.h-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.cv-h.h-w  { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.cv-rot { position: absolute; left: 50%; top: -28px; margin-left: -7px; width: 14px; height: 14px;
  background: #fff; border: 2px solid var(--brand); border-radius: 50%; cursor: grab; z-index: 5; }
.cv-rot::after { content: ''; position: absolute; left: 50%; top: 12px; width: 2px; height: 14px;
  margin-left: -1px; background: var(--brand); }
.cv-selbox { position: absolute; border: 1.5px dashed #ef4444; background: rgba(239,68,68,.12);
  pointer-events: none; z-index: 999; }
.cv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; cursor: pointer; color: #7e8794;
  background: rgba(27,30,36,.35); }
.cv-empty .t { font-size: 14px; color: #cfd6df; }
.cv-empty .s { font-size: 12px; }
.cv-busy { position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  background: #23272f; border: 1px solid #333a45; border-radius: 999px;
  padding: 5px 16px; font-size: 12.5px; color: var(--brand); z-index: 1000; }
.cv-busy .spinner { border-color: rgba(67,160,71,.3); border-top-color: var(--brand); }

/* 浮动工具条（舞台顶部居中） */
.cv-toolov { position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  display: flex; gap: 4px; padding: 5px; background: #23272f; border: 1px solid #333a45;
  border-radius: 10px; z-index: 1200; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.cv-tool { width: 34px; height: 34px; border: none; border-radius: 7px; background: transparent;
  color: #aab3bf; font-size: 15px; cursor: pointer; line-height: 34px; padding: 0; }
.cv-tool:hover { background: #333a45; color: #fff; }
.cv-tool.active { background: #3a4250; color: var(--brand); }
.cv-tool.danger:hover { background: rgba(239,68,68,.16); color: #ef4444; }

/* 左下角：画布对比 + 缩放 */
.cv-compare { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center;
  gap: 8px; z-index: 1100; }
.cv-cmp-btn { border: 1px solid #3d4552; background: #23272f; color: #cfd6df; border-radius: 7px;
  padding: 5px 14px; font-size: 12.5px; cursor: pointer; }
.cv-cmp-btn:hover { border-color: var(--brand); color: var(--brand); }
.cv-cmp-btn:active { background: var(--brand-soft); color: var(--brand); }
.cv-compare span { color: #7e8794; font-size: 12px; background: #23272f; border: 1px solid #333a45;
  border-radius: 7px; padding: 5px 10px; }

/* 底部提示词面板（可拖动位置 / 可调宽度） */
.cv-inputbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: 620px; max-width: calc(100% - 28px); background: #23272f; border: 1px solid #333a45;
  border-radius: 12px; padding: 8px 14px 10px; z-index: 1150;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; }
.cv-ib-head { display: flex; align-items: center; justify-content: space-between;
  color: #cfd6df; font-size: 12.5px; font-weight: 600; cursor: move; user-select: none; }
.cv-grip { opacity: .8; flex: none; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-chip { border: 1px solid #3d4552; background: #2a2f38; color: #cfd6df; border-radius: 999px;
  padding: 4px 12px; font-size: 12px; cursor: pointer; }
.cv-chip:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cv-chip.on { background: rgba(67,160,71,.16); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.cv-chip:disabled { opacity: .4; cursor: default; }
.input-row { display: flex; gap: 8px; align-items: flex-end; }
.cv-prompt-input { flex: 1; min-height: 54px; max-height: 120px; resize: none;
  background: #1b1e24; border: 1px solid #333a45; border-radius: 8px; color: #cfd6df;
  padding: 8px 10px; font-size: 12.5px; font-family: inherit; outline: none; }
.cv-prompt-input:focus { border-color: var(--brand); }
.cv-prompt-input:disabled { opacity: .5; }
.cv-input-actions { display: flex; flex-direction: column; gap: 6px; }
.cv-send-btn { border: none; background: var(--brand); color: #fff; border-radius: 8px;
  padding: 7px 16px; font-size: 12.5px; cursor: pointer; }
.cv-send-btn:hover:not(:disabled) { filter: brightness(1.1); }
.cv-send-btn:disabled { opacity: .4; cursor: default; }
.cv-batch-btn { border: 1px solid #3d4552; background: #2a2f38; color: #cfd6df; border-radius: 8px;
  padding: 6px 12px; font-size: 12px; cursor: pointer; }
.cv-batch-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.cv-batch-btn:disabled { opacity: .4; cursor: default; }
.cv-input-hint { display: flex; align-items: center; gap: 5px; color: #6b7481; font-size: 11.5px; }
.cv-ib-rs { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize;
  border-radius: 0 12px 12px 0; }
.cv-ib-rs:hover { background: rgba(67,160,71,.18); }

/* 画布模型选择（弹窗内沿用浅色） */
.cv-oplist { display: flex; flex-direction: column; gap: 5px; max-height: 320px; overflow-y: auto; }
.cv-op { height: 30px; display: flex; align-items: center; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12.5px;
  color: var(--muted); cursor: pointer; background: #fff; }
.cv-op:hover { border-color: var(--brand); color: var(--brand); }
.cv-op.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }

/* ============ 设置页 ============ */
.page-full { max-width: 980px; margin: 0 auto; }
/* 开关（启用独立分析模型） */
.switch { position: relative; width: 36px; height: 20px; flex: none; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: #d4d4d8; border-radius: 999px; transition: background .15s; }
.switch.on .track { background: var(--brand); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.switch.on .knob { left: 18px; }
.az-link { color: var(--brand); font-size: 12px; text-decoration: none; }
.az-link:hover { text-decoration: underline; }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; margin-bottom: 16px; }
.provider-card { border: 1px solid var(--line); border-radius: var(--radius-l); padding: 11px 13px; cursor: pointer; background: #fff; position: relative; transition: all .12s; }
.provider-card:hover { border-color: var(--brand); }
.provider-card.on { border-color: var(--brand); background: var(--brand-soft); }
.provider-card .nm { font-size: 13px; font-weight: 600; }
.provider-card .pr { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.provider-card .stars { color: #f59e0b; font-size: 11px; margin-top: 2px; letter-spacing: 1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.section-h { font-size: 13.5px; font-weight: 700; margin: 18px 0 10px; display: flex; align-items: center; gap: 8px; }
.section-h:first-child { margin-top: 0; }

/* 产品知识库设置 */
.kb-settings-status { margin-bottom: 12px; border-color: #d9eadb;
  background: linear-gradient(135deg, #fbfefb, #f1f8f2); }
.kb-settings-title { display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  font-weight: 700; color: var(--brand-deep); }
.kb-settings-safe { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.kb-settings-source { margin-top: 5px; font-size: 11.5px; color: var(--faint);
  overflow-wrap: anywhere; }
.kb-settings-note { margin-top: 10px; padding: 8px 10px; border-radius: 7px;
  background: var(--warn-bg); color: #9a3e00; font-size: 11.5px; line-height: 1.65; }
.section-h .sub { font-weight: 400; color: var(--faint); font-size: 11.5px; }

/* ============ 共享知识库产品选择器（爆款复刻/短视频生成，2026-10-12） ============ */
.wb-kb-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wb-kb-row label { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.wb-kb-row select { flex: 1; min-width: 0; }
.wb-kb-summary { font-size: 11.5px; color: var(--faint); margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-kb-warn { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--warn-bg, #fef7ec);
  border: 1px solid #f3d9a4; color: #9a3e00; font-size: 11.5px; line-height: 1.6; }

/* ============ 行业模板新建弹窗（现代卡片选择器） ============ */
.tpl-create-mask { background: rgba(15,23,42,.42); backdrop-filter: blur(6px); }
.tpl-create-modal { width: min(720px, calc(100vw - 32px)); padding: 26px; border-radius: 22px; background: var(--panel,#fff); border: 1px solid rgba(148,163,184,.24); box-shadow: 0 24px 70px rgba(15,23,42,.22); color: var(--text,#17231b); }
.tpl-create-head { display:flex; align-items:flex-start; gap:20px; }
.tpl-create-head > div { flex:1; min-width:0; }
.tpl-create-kicker { color:var(--brand,#2e7cf6); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.tpl-create-head h3 { margin:0; font-size:22px; letter-spacing:-.02em; }
.tpl-create-subtitle { margin:7px 0 0; color:var(--muted,#64748b); font-size:13px; line-height:1.6; }
.tpl-create-close { width:32px; height:32px; border:0; border-radius:10px; background:var(--surface,#f8fafc); color:var(--muted,#64748b); font-size:22px; line-height:1; cursor:pointer; }
.tpl-create-close:hover { background:var(--brand-soft,#eaf2ff); color:var(--brand,#2e7cf6); }
.tpl-create-source { display:flex; align-items:center; gap:9px; margin-top:22px; padding:11px 13px; border-radius:12px; background:linear-gradient(135deg,#f8fbff,#f1f6ff); border:1px solid #dbe8ff; font-size:12px; }
.tpl-create-source span { color:var(--muted,#64748b); }
.tpl-create-source strong { color:var(--text,#17231b); font-size:13px; }
.tpl-create-source em { margin-left:auto; color:#2e7cf6; font-style:normal; font-size:11px; }
.tpl-create-label { margin:22px 0 10px; font-size:13px; font-weight:700; }
.tpl-create-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tpl-create-option { position:relative; min-height:168px; padding:17px 15px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:8px; border:1px solid var(--line,#e2e8f0); border-radius:15px; background:var(--panel,#fff); color:var(--text,#17231b); cursor:pointer; transition:transform .16s,border-color .16s,box-shadow .16s,background .16s; }
.tpl-create-option:hover { transform:translateY(-2px); border-color:#9fc2ff; box-shadow:0 10px 24px rgba(46,124,246,.10); }
.tpl-create-option.is-selected { border:2px solid var(--brand,#2e7cf6); padding:16px 14px; background:linear-gradient(180deg,#f5f9ff,#fff); box-shadow:0 10px 28px rgba(46,124,246,.14); }
.tpl-create-option-icon { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; background:#eef4ff; color:var(--brand,#2e7cf6); font-size:19px; }
.tpl-create-option-title { font-weight:700; font-size:14px; }
.tpl-create-option-desc { color:var(--muted,#64748b); font-size:12px; line-height:1.6; }
.tpl-create-option-badge { position:absolute; top:10px; right:10px; padding:3px 7px; border-radius:999px; background:#e8f1ff; color:#2563eb; font-size:10px; font-weight:700; }
.tpl-create-notes { display:flex; gap:8px; margin-top:18px; padding:11px 13px; border-radius:11px; background:#f8fafc; color:var(--muted,#64748b); font-size:12px; line-height:1.8; }
.tpl-create-notes > span:first-child { color:#16a34a; font-size:17px; line-height:1.2; }
.tpl-create-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.tpl-create-next { min-width:145px; background:var(--brand,#2e7cf6); color:#fff; border-color:var(--brand,#2e7cf6); }
.tpl-create-next:hover { background:#1d62d0; }
@media (max-width:650px) { .tpl-create-modal { padding:20px; border-radius:18px; } .tpl-create-options { grid-template-columns:1fr; } .tpl-create-option { min-height:0; } .tpl-create-source { flex-wrap:wrap; } .tpl-create-source em { margin-left:0; width:100%; } }

/* ============ 行业模板（左树右编辑器） ============ */
.tpl-page { display: flex; flex-direction: column; height: calc(100vh - 46px - 28px); min-height: 540px; }
.tpl-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.tpl-body { flex: 1; display: flex; gap: 10px; min-height: 0; }
.tpl-side { width: 262px; flex: none; display: flex; flex-direction: column; overflow: hidden; }
.tpl-side-actions { border-top: 1px solid var(--line); padding-top: 10px;
  display: flex; flex-direction: column; gap: 7px; }
.tree-item { margin-bottom: 2px; }
.tree-row { display: flex; align-items: center; gap: 6px; padding: 8px 9px;
  border-radius: 7px; cursor: pointer; font-size: 13px; font-weight: 600; }
.tree-row:hover { background: #f2f7f2; }
.tree-row.on { background: var(--brand-soft); color: var(--brand); }
.tree-toggle { font-size: 9px; color: var(--faint); width: 12px; flex: none; }
.tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-op { font-size: 12px; color: var(--faint); cursor: pointer; padding: 0 2px; }
.tree-op:hover { color: var(--brand); }
.tree-children { padding-left: 18px; }
.tree-child { padding: 6px 9px; font-size: 12.5px; color: var(--muted);
  border-radius: 6px; cursor: pointer; }
.tree-child:hover { background: #f2f7f2; color: var(--text); }
.tree-child.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.tpl-content { flex: 1; min-width: 0; overflow-y: auto; }
.content-title { font-size: 14px; font-weight: 700; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; }
.tpl-footer { display: flex; gap: 10px; align-items: center; padding-top: 10px; }
.ai-edit { display: flex; gap: 8px; margin-top: 8px; }
.ai-edit input { flex: 1; }
.tpl-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 11px; margin-bottom: 7px; cursor: pointer; background: #fff; display: flex; align-items: center; gap: 8px; }
.tpl-row:hover { border-color: var(--brand); }
.tpl-row.on { border-color: var(--brand); background: var(--brand-soft); }
.tpl-row .nm { font-size: 13px; font-weight: 600; flex: 1; }
.tpl-row .ct { font-size: 11px; color: var(--faint); }
.kv { display: flex; font-size: 12.5px; margin-bottom: 6px; }
.kv b { width: 82px; flex: none; color: var(--muted); font-weight: 600; }
.tabs-line { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tabs-line .t { padding: 7px 14px; cursor: pointer; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs-line .t.on { color: var(--brand); border-color: var(--brand); font-weight: 600; }

.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid #c8e2ca; border-top-color: var(--brand); border-radius: 50%; animation: rot .8s linear infinite; vertical-align: -2px; margin-right: 5px; }
@keyframes rot { to { transform: rotate(360deg); } }
.empty { text-align: center; color: var(--faint); padding: 50px 0; font-size: 13px; line-height: 2; }

/* ============ P0/P1 新增：配对提示 / 图标选择 / Feed 卡片结束按钮 / 双图对比 / 多选 / 右键菜单 ============ */
.pair-hint { margin-top: 8px; font-size: 12.5px; line-height: 1.7; min-height: 18px; }
.pair-hint .ok { color: var(--ok); }
.pair-hint .warn { color: var(--warn); }

.icon-pick { display: flex; gap: 4px; align-items: center; }
.icon-pick .ic-opt { width: 30px; height: 30px; line-height: 30px; text-align: center;
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 15px;
  background: #fff; transition: all .12s; }
.icon-pick .ic-opt:hover { border-color: var(--brand); }
.icon-pick .ic-opt.on { border-color: var(--brand); background: var(--brand-soft); }

.fc-x { margin-left: 6px; width: 20px; height: 20px; line-height: 20px; text-align: center;
  border-radius: 50%; color: var(--faint); cursor: pointer; font-size: 12px; flex: none; }
.fc-x:hover { background: var(--err-bg); color: var(--err); }

/* 精修双份：悬停/按住看原图 */
.gcmp { position: relative; aspect-ratio: 1; background: #f2f6f2; cursor: zoom-in; }
.gcmp img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain;
  display: block; user-select: none; -webkit-user-drag: none; }
.gcmp img.orig { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .12s; background: #f2f6f2; }
.gcmp:hover img.orig, .gcmp.show img.orig { opacity: 1; }
.gcmp-tip { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  font-size: 11px; color: #fff; background: rgba(20,28,22,.55); text-align: center;
  pointer-events: none; opacity: 0; transition: opacity .12s; }
.gcmp:hover .gcmp-tip, .gcmp.show .gcmp-tip { opacity: 1; }

/* 缩略图多选删除 */
.gitem.picked { outline: 2px solid var(--err); outline-offset: -2px; }
.gitem .gsel { position: absolute; top: 6px; left: 6px; z-index: 5; cursor: pointer;
  background: rgba(255,255,255,.85); border-radius: 5px; padding: 1px 3px; line-height: 0; }
.gitem .gsel input { width: 16px; height: 16px; cursor: pointer; }

/* 输入框右键菜单 */
.ctx-menu { position: fixed; z-index: 1100; background: #fff; border: 1px solid var(--line);
  border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 4px;
  display: flex; flex-direction: column; min-width: 110px; }
.ctx-menu button { border: none; background: none; text-align: left; padding: 7px 12px;
  font-size: 12.5px; border-radius: 6px; cursor: pointer; color: var(--text); }
.ctx-menu button:hover { background: var(--brand-soft); color: var(--brand); }
.ctx-menu button:disabled { color: var(--faint); cursor: default; background: none; }

/* 无限画布：套索选区覆盖层 / 模型切换按钮 */
.cv-lasso { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 998;
  fill: rgba(239,68,68,.14); stroke: #ef4444; stroke-width: 1.5; stroke-dasharray: 5 4; }
.cv-model-btn { border: 1px solid var(--line-strong); background: #fff; border-radius: 7px;
  padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--muted); }
.cv-model-btn:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 900px) {
  .kb-flow { align-items: stretch; gap: 4px; }
  .kb-flow > i { min-width: 4px; }
  .kb-step { flex-direction: column; text-align: center; white-space: normal; }
  .kb-picker-row, .kb-summary-grid { grid-template-columns: 1fr; }
  .kb-card-head { flex-direction: column; }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #ccdccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a9c5ac; }
::-webkit-scrollbar-track { background: transparent; }


/* ================= v2 视觉优化：微交互与动画（2026-09-27） =================
   仅视觉层：统一缓动、柔和阴影、自然过渡；不改布局尺寸与功能。 */

/* —— 关键帧 —— */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes soft-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* —— 页面切换：轻柔上浮入场 —— */
#main > .ws-inner { animation: rise .24s var(--ease) both; }
.col-left .card, .col-right .card { transition: box-shadow .25s var(--ease); }

/* —— 按钮族：渐变主色、悬停轻抬、按下微缩 —— */
.btn {
  background: var(--brand-grad); color: #fff;
  box-shadow: var(--shadow-s);
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .22s var(--ease),
              transform .12s var(--ease), filter .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-m); filter: brightness(1.05); }
.btn:active { transform: translateY(0) scale(.985); filter: brightness(.97); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn.ghost {
  background: #fff; color: var(--muted); border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--brand-soft); color: var(--brand-deep);
  border-color: var(--brand); box-shadow: var(--shadow-s); }
.btn.danger { background: linear-gradient(135deg, #e46154, #c53a2e); border: none; }
.btn.danger:hover { filter: brightness(1.06); }
.btn[disabled], .btn:disabled { opacity: .55; cursor: default;
  transform: none !important; box-shadow: none !important; filter: none !important; }
.gen-actions .btn-main { box-shadow: var(--shadow-m); }

/* —— 顶部导航 —— */
#header { backdrop-filter: saturate(140%) blur(8px); }
#brand .logo-dot {
  background: var(--brand-grad);
  box-shadow: 0 2px 8px rgba(30, 122, 77, .35);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
#brand:hover .logo-dot { transform: rotate(-6deg) scale(1.05); }
.main-tab, .side-tab {
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease),
              box-shadow .18s var(--ease);
}
.main-tab:hover { background: var(--brand-soft); color: var(--brand-deep); }
.main-tab.active { background: var(--brand-grad); box-shadow: 0 3px 10px rgba(30, 122, 77, .28); }
.side-tab:hover { background: var(--brand-soft); }
.side-tab.active { background: var(--brand-grad); box-shadow: 0 3px 10px rgba(30, 122, 77, .28); }
.main-tab:active, .side-tab:active, .feat-tab:active { transform: scale(.97); }

/* —— 左栏功能页签 —— */
.feat-tab {
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.feat-tab:hover { background: rgba(47, 163, 107, .08); color: var(--brand-deep); }
.feat-tab.active { background: var(--brand-soft); color: var(--brand-deep);
  border-left-color: var(--brand); }

/* —— 芯片/分段控件 —— */
.chip, .seg .seg-btn {
  transition: background .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .12s var(--ease),
              box-shadow .18s var(--ease);
}
.chip:hover, .seg .seg-btn:hover { border-color: var(--brand); color: var(--brand-deep); }
.chip:active, .seg .seg-btn:active { transform: scale(.96); }
.chip.on, .seg .seg-btn.on {
  background: var(--brand-grad); color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(30, 122, 77, .25);
}

/* —— 卡片与可交互条目 —— */
.card, .guide { box-shadow: var(--shadow-s); transition: box-shadow .25s var(--ease); }
.feed-card {
  transition: border-color .18s var(--ease), box-shadow .22s var(--ease),
              transform .18s var(--ease);
}
.feed-card:hover { border-color: var(--brand); box-shadow: var(--shadow-m);
  transform: translateY(-2px); }
.provider-card {
  transition: border-color .18s var(--ease), box-shadow .22s var(--ease),
              transform .16s var(--ease), background .18s var(--ease);
}
.provider-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.video-plan-item, .video-preview-item, .video-record-item {
  transition: border-color .18s var(--ease), box-shadow .22s var(--ease);
}
.video-plan-item:hover, .video-preview-item:hover, .video-record-item:hover {
  border-color: var(--brand); box-shadow: var(--shadow-s);
}

/* —— 表单 —— */
input, textarea, select {
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(47, 163, 107, .16);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
.dropzone { transition: background .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease); }
.dropzone:hover { border-color: var(--brand); background: var(--brand-soft);
  transform: translateY(-1px); }

/* —— 弹层 / 提示 —— */
.modal-mask { animation: fade-in .18s var(--ease); }
.modal { animation: pop-in .22s var(--ease); box-shadow: var(--shadow-l); }
.toast { animation: toast-in .22s var(--ease); }
.toast.ok { background: var(--brand-deep); }

/* —— 徽章 / 进度 / 旋钮 —— */
.badge { transition: background .2s var(--ease), color .2s var(--ease); }
.badge.running { animation: soft-pulse 1.6s ease-in-out infinite; }
.fp-bar i, .fc-prog .fp-bar i { transition: width .4s var(--ease); }
.kb-step { transition: color .2s var(--ease); }
.kb-step.done b { transition: background .25s var(--ease), transform .2s var(--ease); }

/* —— 知识条 / 流程条 —— */
.wf-bar, .kb-flow { transition: box-shadow .22s var(--ease), border-color .22s var(--ease); }

/* —— 图标（SVG 线性图标统一规格） —— */
.ic-svg { width: 15px; height: 15px; flex: none; display: block; }
.feat-tab .ic-svg { width: 17px; height: 17px; }
.badge .ic-svg, .btn .ic-svg { width: 14px; height: 14px; }

/* —— 滚动条 —— */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4d6c9; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9dbfa9; background-clip: content-box; }

/* —— 视频记录：整条提示词卡片与分镜折叠（1.0.16） —— */
.video-group-card {
  border: 1px solid var(--brand); border-radius: var(--radius-l);
  background: var(--brand-soft); padding: 12px 14px; margin-bottom: 10px;
  box-shadow: var(--shadow-s);
}
.video-group-card textarea { width: 100%; min-height: 120px; }
.video-shots-fold { border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; background: var(--panel); }
.video-shots-fold > summary { cursor: pointer; font-size: 12.5px; color: var(--muted); user-select: none; }

/* —— 无障碍：减少动态效果 —— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 复核建议徽标（1.0.20 速度/质量提示） */
.st.warn { color: #b45309; }