/* 放映机+胶片式外壳：明亮商务风格 */
:root {
  --bg: #f5f6fa;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --muted: #64748b;
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
  --accent: #7c3aed;
  --success: #16a34a;
  --danger: #dc2626;
  --warn: #d97706;
  --radius: 8px;
  --shadow: none;
  --app-header-h: 110px;        /* 顶部横幅+TAB栏 */
  --screen-y-gap: 24px;
  --screen-max-h: calc(100dvh - var(--app-header-h) - var(--screen-y-gap) * 2);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(180deg, #eceef9 0%, var(--bg) 320px);
  color: var(--text);
}

/* ── 放映机外壳：顶栏 / 主屏 / 页脚（固定框架，不随胶片重渲染） ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 46px; height: 46px; border-radius: 12px; color: #fff; font-weight: 700; font-size: 22px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--accent)); box-shadow: 0 4px 14px rgba(37,99,235,.25);
}
.brand-name { font-weight: 700; font-size: 17px; }
.brand-sub { color: var(--muted); font-size: 12px; }
.badge {
  font-size: 11px; letter-spacing: .3px; color: var(--primary-strong);
  background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.18);
  padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
/* 主屏：大屏 3 列（提交 / 进度 / 结果），中等 2 列，小屏 1 列 */
.screen {
  width: min(calc(100vw - 48px), 1800px);
  max-width: none;
  min-height: 620px;
  height: min(820px, var(--screen-max-h));   /* 硬顶，底部留呼吸 */
  max-height: var(--screen-max-h);
  margin: var(--screen-y-gap) auto;
  padding-inline: 24px;
  display: grid; grid-template-columns: minmax(320px, 460px) minmax(280px, 420px) minmax(340px, 1fr);
  grid-template-rows: minmax(0, 1fr);         /* 去掉 auto——超一屏根因 */
  gap: 20px; align-items: stretch;
}
.col { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow: hidden; }
/* TAB1 三模块行高统一：①各列胶片顶部对齐 ②模块标题行高/间距一致 ③结果卡片行高统一 */
.col .film { margin-top: 0; flex: 1; min-height: 0; overflow: hidden; }
.film-title { margin: 0 0 14px; font-size: 18px; display: flex; align-items: center; gap: 10px; line-height: 1.4; min-height: 26px; }
.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 30px 0 34px; }

/* ── 胶片：可插拔功能模块 ── */
.film {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px;
}
.film-title { margin: 0 0 16px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.film-submit { display: flex; flex-direction: column; }
.film-submit form { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }

.field { display: block; margin-bottom: 18px; }
.label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.req { color: var(--danger); font-style: normal; font-size: 11px; }
.opt { color: var(--muted); font-style: normal; font-size: 11px; font-weight: 400; }
textarea {
  width: 100%; resize: vertical; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; font: inherit; font-size: 14px; line-height: 1.6; outline: none;
}
textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.char-count { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 4px; }
.upload-zone {
  border: 1.5px dashed #c7d2fe; border-radius: 10px; padding: 16px; text-align: center;
  color: var(--primary-strong); cursor: pointer; background: #f5f8ff; transition: .15s;
}
.upload-zone:hover { border-color: var(--primary); background: #eef4ff; }
.upload-zone.drag { border-color: var(--primary); background: #eef4ff; box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.upload-cta { font-weight: 600; }
.upload-hint { margin-top: 4px; font-size: 11px; color: var(--muted); }
.refs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.ref-chip { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); transition: opacity .25s ease; }
.ref-chip img { width: 100%; height: 100%; object-fit: cover; }
.ref-chip .x { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(15,23,42,.6); color: #fff; border: 0; cursor: pointer; font-size: 12px; line-height: 1; }
.submit-btn {
  width: 100%; border: 0; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--primary); cursor: pointer; transition: .15s; box-shadow: 0 2px 8px rgba(37,99,235,.25);
  position: relative;
}
.submit-btn:hover { filter: brightness(1.06); }
.submit-btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(37,99,235,.3); }
.submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* 通用加载态（.loading 转圈）：所有可点按钮一统的"正在处理"反馈标准 */
.ghost-btn.loading, .submit-btn.loading, .tab-btn.loading, .wash-btn.loading {
  opacity: .7; cursor: progress; pointer-events: none;
}
.ghost-btn.loading::before, .submit-btn.loading::before, .tab-btn.loading::before, .wash-btn.loading::before {
  content: ''; display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  vertical-align: -2px; animation: spin .8s linear infinite;
}

/* 胶片 B：进度 */
.task-id { font-size: 13px; color: var(--primary-strong); font-weight: 600; }
.status-line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* 生成中状态独立一行：pill 单独一行，详情(计时/阶段)在下一行，避免挤压变形 */
.progress-status { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.progress-status .status-msg { font-size: 13px; color: var(--muted); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; color: #fff; }
.status-msg { color: var(--muted); font-size: 13px; }
.progress { height: 8px; background: #edf1f7; border-radius: 999px; overflow: hidden; margin-bottom: 18px; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .4s; }
.note { font-size: 12px; color: var(--warn); background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.prog-summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  background: #f8fafc; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; margin-bottom: 14px; font-size: 12px;
  height: 32px; overflow: hidden;
}
.prog-stage { font-weight: 700; color: var(--text); flex-shrink: 0; }
.prog-alive { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.prog-alive .spinner {
  width: 13px; height: 13px; border: 2px solid var(--primary); border-top-color: transparent;
  border-radius: 50%; display: inline-block; animation: spin .8s linear infinite;
}
.prog-alive.slow { color: var(--warn); font-weight: 700; }
.prog-alive.slow .spinner { border-color: var(--warn); border-top-color: transparent; animation: none; }
.prog-alive.done .spinner { display: none; }
.prog-latest {
  margin-left: auto; flex: 1 1 auto; min-width: 0; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ 贴友商帖子URL取图（参考图下方）═══ */
.xhs-zone { margin-top: 12px; border: 1px dashed #cfdcfb; border-radius: 10px; padding: 12px; background: #fafbff; }
.xhs-row { display: flex; gap: 8px; }
.xhs-row input[type=url] {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 13px; outline: none;
}
.xhs-row input[type=url]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.xhs-row .ghost-btn { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
.xhs-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.xhs-thumb { position: relative; width: 88px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.xhs-thumb img { width: 100%; height: 76px; object-fit: cover; display: block; cursor: pointer; }
.xhs-thumb img:hover { opacity: .9; }
.xhs-cap {
  font-size: 10px; color: var(--muted); padding: 3px 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.xhs-tip { margin-top: 8px; font-size: 11px; color: var(--muted); line-height: 1.5; }
/* 抓取心跳输出：让用户实时看到抓取/下载进度，而非空占位 */
.xhs-fetch-status {
  margin-top: 8px; padding: 8px 12px; border-radius: 8px;
  background: var(--ref-bg, #f5f7fb); font-size: 12px; color: var(--text);
  display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.xhs-fetch-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .7;
  animation: xhsPulse 1s ease-in-out infinite; flex: 0 0 auto;
}
.xhs-fetch-status.ok { color: #16a34a; background: #f0fdf4; }
.xhs-fetch-status.ok .dot { animation: none; }
.xhs-fetch-status.err { color: #dc2626; background: #fef2f2; }
.xhs-fetch-status.err .dot { animation: none; }
@keyframes xhsPulse { 0%,100% { opacity:.3; } 50% { opacity:1; } }
/* 能力1：解析到的配文（标题/正文/标签）展示块 */
.xhs-caption {
  margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff;
}
.xhs-cap-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.xhs-cap-label { font-size: 12px; font-weight: 600; color: var(--text); }
.xhs-cap-label::before { content: '📝 '; }
.xhs-cap-fill { margin-left: auto; padding: 5px 12px; font-size: 12px; }
.xhs-cap-row { display: flex; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--border); }
.xhs-cap-row:first-of-type { border-top: 0; }
.xhs-cap-k {
  flex: 0 0 34px; font-size: 11px; color: var(--muted); line-height: 1.7;
}
.xhs-cap-v {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text); line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
}
.xhs-cap-body { max-height: 110px; overflow-y: auto; }
.xhs-cap-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xhs-cap-tag {
  font-size: 11px; color: var(--primary-strong, #2563eb); background: #eff4ff;
  border-radius: 999px; padding: 2px 9px; line-height: 1.6;
}
/* 抓图缩略图区：限高滚动，防止图多把提交按钮挤出可视区 */
.xhs-thumbs-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.xhs-thumbs-bar .ghost-btn { padding: 7px 14px; font-size: 13px; }
.xhs-thumbs-count { font-size: 12px; color: var(--primary-strong); font-weight: 600; }
.xhs-thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;
  max-height: 160px; overflow-y: auto; padding-right: 4px;
}
/* 已加入的参考图区也限高滚动，防挤压提交按钮 */
.refs { max-height: 120px; overflow-y: auto; }
/* 「全部加入」成功后参考图区高亮闪烁，让用户明确看到变化 */
.refs.flash { animation: refsFlash 0.9s ease; border-radius: 10px; }
@keyframes refsFlash {
  0% { box-shadow: 0 0 0 0 rgba(27,119,255,0.6); background: rgba(27,119,255,0.12); }
  100% { box-shadow: 0 0 0 0 rgba(27,119,255,0); background: transparent; }
}
/* 预览弹层「加入为参考图」按钮：位于大图下方，居中 */
.lightbox-add { align-self: center; margin: 10px auto; display: block; }
.lightbox-add[hidden] { display: none; }

/* ═══ 目标项目（可选，投稳定项目）═══ */
.target-project { margin-top: 4px; }
.tp-wrap {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 10px; padding: 0 12px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.tp-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tp-prefix { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.tp-wrap input[type=url] {
  flex: 1; min-width: 0; border: 0; outline: none; padding: 11px 0;
  font: inherit; font-size: 13px; color: var(--text);
}
.tp-wrap input::placeholder { color: #94a3b8; }
.field-hint { margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.field-hint em { font-style: normal; color: var(--primary-strong); font-weight: 600; }
.film-progress { display: flex; flex-direction: column; }
.log-box { margin-top: 18px; position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.log-box summary { cursor: pointer; font-size: 13px; color: var(--muted); font-weight: 600; }
#task-log {
  flex: 1 1 auto; min-height: 120px; max-height: none; overflow-y: auto;
  background: #0f172a; color: #cbd5e1; border-radius: 10px; padding: 12px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap;
}
#task-log .log-group { margin-bottom: 4px; }
#task-log .log-stage { color: var(--primary-strong); font-weight: 700; margin: 6px 0 2px; }
#task-log .log-group.error .log-stage { color: var(--danger); }
#task-log .log-line { padding-left: 6px; }
#task-log .log-line.key { font-weight: 800; }
#task-log .log-line.error {
  color: var(--danger); font-weight: 700; background: rgba(220, 38, 38, .14);
  border-left: 3px solid var(--danger); border-radius: 4px; padding: 1px 6px 1px 9px; margin: 2px 0;
}
.new-log-btn {
  position: absolute; right: 12px; bottom: 10px; z-index: 5; background: var(--primary); color: #fff;
  border: 0; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
.pill.queued { background: #94a3b8; }
.pill.generating { background: var(--primary); }
.pill.completed { background: var(--success); }
.pill.failed { background: var(--danger); }

/* 胶片 C：结果下载 */
.failures { font-size: 12px; color: var(--danger); background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.gallery-empty { color: var(--muted); font-size: 13px; grid-column: 1 / -1; text-align: center; padding: 30px 0; }
.film-results { display: flex; flex-direction: column; }
.film-results .gallery { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
.card-el { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.card-el img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.card-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-size: 12px; min-height: 33px; box-sizing: border-box; }
.card-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.ghost-btn {
  border: 1px solid #c9d9fb; background: #eaf1ff; color: var(--primary-strong);
  padding: 10px 16px; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: 14px;
  transition: background .15s, filter .15s, transform .05s; position: relative;
}
.ghost-btn:hover { background: #dbe7ff; }
.ghost-btn:active { transform: translateY(1px); filter: brightness(.95); }
.ghost-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

@media (max-width: 1180px) {
  .screen { grid-template-columns: minmax(300px, 1fr) minmax(280px, 1fr); grid-template-areas: 'a b' 'a c'; }
  .col-1 { grid-area: a; }
  .col-2 { grid-area: b; }
  .col-3 { grid-area: c; }
}
@media (max-width: 860px) {
  .screen {
    width: min(calc(100vw - 32px), 100%); height: auto; min-height: 0; max-height: none;
    grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: 'a' 'b' 'c';
  }
  .col, .col .film { overflow: visible; }
  .film-results .gallery, #task-log, .log-box { max-height: none; overflow: visible; }
}
@media (max-width: 1000px) { .wash-layout { grid-template-columns: 1fr; } }

/* ═══ TAB 导航（出图 / 洗图 双产线）═居中══ */
.tabs {
  display: flex; justify-content: center; gap: 10px; padding: 14px 24px 0;
  border-bottom: 1px solid var(--border); background: #fff;
}
.tab-btn {
  padding: 11px 32px; border: 1px solid var(--border); border-bottom: none;
  border-radius: 12px 12px 0 0; background: #f7f9fd; color: var(--muted);
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.tab-btn:hover { color: var(--primary-strong); background: #eef4ff; }
.tab-btn.active {
  background: #eaf1ff; color: var(--primary-strong); border-color: #c9d9fb;
  position: relative; box-shadow: 0 -3px 8px rgba(37,99,235,.05);
}
.tab-btn.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--primary); border-radius: 2px 2px 0 0;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ══ 洗图产线（顶部上传横条 + 全宽图瀑布，屏幕给图片主导）══ */
.wash-screen { max-width: 1500px; margin: 24px auto; padding: 0 28px; }
/* 单列堆叠：上传横条在上，图网格整宽主导，消除左右并排的侧边空白 */
.wash-layout { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.wash-work { display: flex; flex-direction: column; gap: 16px; }
.wash-upload-card { padding: 18px; }
/* 上传横条：标题行 + 竖向明确拖放区（提高拖入命中率/准确率），不再用扁横条 */
.wash-upload-head { display: flex; align-items: flex-start; gap: 22px; flex-wrap: wrap; }
.wash-upload-head-title { font-size: 17px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; white-space: nowrap; padding-top: 6px; }
.wash-upload {
  flex: 1; min-width: 320px; border: 2px dashed #c7d2fe; border-radius: 8px;
  padding: 26px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; cursor: pointer; background: #f5f8ff; transition: all .15s; min-height: 108px;
}
.wash-upload:hover, .wash-upload.drag { border-color: var(--primary); background: #eef4ff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.wash-upload-ico { font-size: 30px; line-height: 1; }
.wash-upload .upload-cta { font-size: 15px; font-weight: 600; color: var(--primary-strong); }
.wash-upload .upload-hint { font-size: 12px; color: var(--muted); }
.wash-note { font-size: 12px; color: var(--muted); margin: 12px 0 4px; line-height: 1.6; }
/* ═══ 贴小红书链接解析图片 → 导入待清洗列表（洗图产线出图页）═══ */
.wash-link-zone { margin-top: 14px; border: 1px dashed #c8d8ef; border-radius: 10px; padding: 12px; background: #f8fbff; }
.wash-link-row { display: flex; gap: 8px; }
.wash-link-row input[type=url] {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
  font: inherit; font-size: 13px; outline: none;
}
.wash-link-row input[type=url]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.wash-link-row .ghost-btn { flex: 0 0 auto; padding: 9px 14px; font-size: 13px; }
.wash-link-status { margin-top: 10px; font-size: 12.5px; line-height: 1.6; }
.wash-link-status.ok { color: #1d7a44; }
.wash-link-status.err { color: #c0392b; }
.wash-stats { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.wash-stat-card {
  flex: 1 1 90px; min-width: 84px; background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 8px; text-align: center; box-shadow: none;
}
.wash-stat-card b { display: block; font-size: 15px; color: var(--muted); line-height: 1.3; }
.wash-stat-card span { font-size: 11px; color: var(--muted); }
.wash-stat-card.core {
  min-width: 104px; background: #f5f8ff; border-color: #cfdcfb; padding: 16px 14px;
}
.wash-stat-card.core b { font-size: 28px; color: var(--primary-strong); line-height: 1.1; }
.wash-stat-card.core span { color: var(--text); font-weight: 600; }
.wash-stat-card.dim { background: #fbfcfe; }

/* ═══ 检测结果面板（清洗前风险 + 清洗后复检）═══ */
.wash-detect-toggle {
  width: 100%; border: none; background: #f1f5f9; color: var(--text); font-size: 12px; font-weight: 600;
  padding: 8px 10px; cursor: pointer; text-align: left; border-top: 1px solid var(--border);
}
.wash-detect-toggle:hover { background: #e2e8f0; }
.wash-detect { border-top: 1px dashed var(--border); padding: 10px; background: #fafbff; max-height: 380px; overflow: auto; }
.detect-block { margin-bottom: 8px; }
.detect-title { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 4px; letter-spacing: .3px; }
.detect-risk { font-size: 12px; padding: 6px 8px; border-radius: 8px; margin-bottom: 6px; font-weight: 600; }
.detect-risk.high { background: #fee2e2; color: #991b1b; }
.detect-risk.medium { background: #ffedd5; color: #9a3412; }
.detect-risk.clean { background: #d1fae5; color: #065f46; }
.detect-summary { font-size: 12px; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; line-height: 1.55; margin-bottom: 6px; }
.detect-cards { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.detect-card { border: 1px solid var(--border); border-left: 4px solid #94a3b8; border-radius: 8px; padding: 8px 10px; background: #fff; }
.detect-card.high { border-left-color: #dc2626; }
.detect-card.medium { border-left-color: #f59e0b; }
.detect-card.clean { border-left-color: #10b981; }
.dc-key { font-size: 11px; font-weight: 700; color: var(--primary-strong); }
.dc-label { font-size: 12px; font-weight: 600; color: var(--text); margin: 2px 0; }
.dc-val { font-size: 11px; color: #57534e; background: #f8fafc; padding: 4px 6px; border-radius: 6px; word-break: break-all; font-family: ui-monospace, monospace; margin-bottom: 4px; }
.dc-int { font-size: 11px; color: var(--muted); line-height: 1.5; }
.detect-clean-note { font-size: 12px; color: #047857; background: #ecfdf5; border-radius: 8px; padding: 8px; margin-bottom: 6px; }
.detect-meta { font-size: 11px; }
.dm-title { font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.dm-row { display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px dashed #e5e7eb; }
.dm-row span { flex: 0 0 40%; color: var(--text); word-break: break-word; }
.dm-row code { flex: 1; color: #57534e; word-break: break-all; background: none; }
.detect-size { font-size: 12px; color: #0d9488; font-weight: 600; margin-top: 6px; }
.wash-toolbar {
  display: flex; justify-content: flex-end; gap: 12px; align-items: center;
}
/* 工具栏三个按钮等宽均分 */
.wash-toolbar button { flex: 1 1 0; min-width: 0; white-space: nowrap; }
/* 三个按钮统一观感（清空/打包下载沿用浅蓝幽灵钮，清洗为渐变主钮），等宽、垂直居中 */
.wash-toolbar .ghost-btn { padding: 12px 10px; font-size: 13px; }
.wash-toolbar .submit-btn { width: auto; padding: 12px 10px; font-size: 13px; border-radius: 10px; }
/* 图瀑布：固定 3 列均分整行(用户核心场景即 3 图)，卡 1fr 收缩不溢出，核心面积给图片(每卡~470px 大卡无空白) */
.wash-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start;
}
/* 空态提示去掉（用户要求），无图时上传区已足够引导 */
#wash-empty { display: none !important; }
@media (max-width: 1100px) { .wash-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 720px) { .wash-grid { grid-template-columns: 1fr; } }
.wash-card {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; position: relative; box-shadow: var(--shadow);
  display: grid; grid-template-columns: 130px 1fr; align-items: start;
}
.wash-card.purified { border-color: #34d399; }
/* 左右布局：左图固定宽，右侧信息列；检测面板占整行 */
.wash-card-left { position: relative; width: 130px; height: 130px; }
.wash-card-img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.wash-card-right {
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.wash-name-row { display: flex; align-items: center; gap: 8px; }
.wash-card-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; flex: 1; min-width: 0; }
.wash-meta { font-size: 12px; color: var(--muted); line-height: 1.5; }
.wash-ops { margin-top: auto; }
.wash-del {
  position: absolute; top: 6px; right: 6px; background: rgba(15,23,42,.55); color: #fff; border: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%; font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.wash-del:hover { background: #dc2626; }
.wash-badge { padding: 3px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; font-size: 12px; }
.wash-badge.ok { background: #d1fae5; color: #047857; }
.wash-badge.warn { background: #fef3c7; color: #b45309; }
.wash-badge.danger { background: #fee2e2; color: #b45309; }
/* 检测面板占满卡片整行（grid 跨两列） */
.wash-card .wash-detect-toggle { grid-column: 1 / -1; }
.wash-card .wash-detect { grid-column: 1 / -1; }

/* 空态占位（填充中列/右列，避免页面空旷） */
.empty-state {
  min-height: 420px; border: 1.5px dashed var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; background: rgba(255,255,255,.6);
}
.col .empty-state { min-height: 0; flex: 1; }
/* [hidden] 需显式覆盖 display:flex，否则空态在有结果时仍然显示 */
.empty-state[hidden] { display: none; }
.empty-icon { width: 44px; height: 44px; margin-bottom: 14px; color: var(--primary); opacity: .85; display: block; }
.empty-title { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 8px; }
.empty-sub { font-size: 12px; color: var(--muted); line-height: 1.6; max-width: 240px; }

/* 结果卡片 → 执行洗图 */
.card-acts { display: flex; align-items: center; gap: 8px; }
.wash-btn {
  border: none; background: var(--primary); color: #fff; padding: 5px 12px;
  border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; box-shadow: 0 2px 6px rgba(37,99,235,.25);
}
.wash-btn:hover { filter: brightness(1.08); }
.wash-btn:disabled { background: #94a3b8; box-shadow: none; cursor: not-allowed; }

/* ═══ 大图预览 lightbox（点击结果缩略图放大查看原图）═══ */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(10, 15, 30, .78); backdrop-filter: blur(3px); }
.lightbox-stage {
  position: relative; max-width: 92vw; max-height: 88vh; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.5); display: flex; flex-direction: column;
}
.lightbox-stage img { display: block; max-width: 92vw; max-height: 80vh; object-fit: contain; }
.lightbox-cap { padding: 10px 14px; font-size: 13px; color: var(--muted); background: #fff; border-top: 1px solid var(--border); }
.lightbox-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff; border: 1px solid rgba(255,255,255,.4);
  font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(4px);
}
.lightbox-close:hover { background: rgba(255,255,255,.4); }

/* 轻量 toast（替代 alert 打断操作） */
.toast {
  position: fixed; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2000;
  background: rgba(15,23,42,.9); color: #fff; padding: 12px 22px; border-radius: 10px;
  font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.25); max-width: 80vw;
}
.toast[hidden] { display: none; }

/* ★2026-09-17：选型弹窗「需要你决策」覆盖模态（出图遇到 LovArt 方案选型时弹出） */
.decision-card { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.decision-card[hidden] { display: none; }
.decision-card .dc-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.decision-card .dc-panel { position: relative; width: min(560px, 92vw); background: #fff; border-radius: 14px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.35); max-height: 84vh; overflow: auto; }
.decision-card .dc-title { font-size: 17px; font-weight: 700; color: #0f172a; }
.decision-card .dc-hint { font-size: 13px; color: #64748b; margin: 8px 0 16px; line-height: 1.5; }
.decision-card .dc-prompt { font-size: 14px; color: #1e293b; background: #f1f5f9; border-radius: 8px; padding: 12px; margin-bottom: 14px; line-height: 1.6; white-space: pre-wrap; }
.decision-card .dc-options { display: grid; gap: 10px; }
.decision-card .dc-opt { width: 100%; padding: 12px 14px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #1e293b; font-size: 14px; text-align: left; cursor: pointer; transition: all .15s; }
.decision-card .dc-opt:hover:not(:disabled) { border-color: #6366f1; background: #eef2ff; }
.decision-card .dc-opt:disabled { opacity: .55; cursor: wait; }
.decision-card .dc-opt.dc-manual { border-style: dashed; color: #64748b; cursor: pointer; }
.decision-card .dc-done { margin-top: 14px; font-size: 13px; color: #059669; }
/* ★2026-09-17：多组问卷（每组=标题+其选项）*/
.decision-card .dc-options { display: flex; flex-direction: column; gap: 12px; }
.decision-card .dc-group-title { font-size: 13px; font-weight: 600; color: #334155; margin-top: 4px; line-height: 1.5; }
.decision-card .dc-group-options { display: grid; gap: 8px; }
.decision-card .dc-opt.dc-selected { border-color: #6366f1; background: #eef2ff; box-shadow: inset 0 0 0 1px #6366f1; }
.decision-card .dc-submit { margin-top: 8px; padding: 12px 18px; background: #6366f1; color: #fff; font-size: 14px; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; }
.decision-card .dc-submit:disabled { background: #c7d2fe; cursor: not-allowed; opacity: .7; }
.decision-card .dc-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border: none; border-radius: 6px; background: #f1f5f9; color: #64748b; font-size: 18px; line-height: 1; cursor: pointer; }
.decision-card .dc-close:hover { background: #e2e8f0; color: #0f172a; }

/* ═══ 文案产线（TAB 3）专属样式 ═══ */
.copy-screen { padding: 16px; }
.copy-layout { display: grid; grid-template-columns: 380px 1fr; gap: 16px; align-items: start; }
.copy-input-card { padding: 16px; }
.copy-results-card { padding: 16px; min-height: 480px; }
.copy-params { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.copy-results-card .field, .copy-input-card .field { margin-bottom: 14px; }
.copy-results-card .empty-state { min-height: 340px; }
.copy-error {
  background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 10px 14px;
  border-radius: 10px; font-size: 13px; margin-bottom: 12px; white-space: pre-wrap;
}
.copy-error[hidden] { display: none; }
.copy-meta {
  font-size: 12px; color: var(--muted); margin-bottom: 14px; padding: 8px 12px;
  background: #f8fafc; border-radius: 8px; border: 1px solid var(--border);
}
.copy-meta.warn { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.copy-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 12px;
  background: #fff;
}
.copy-card-head { font-weight: 600; font-size: 13px; color: var(--primary-strong); margin-bottom: 8px; }
.copy-card-head.warn { color: #b45309; }
.copy-card-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.copy-card-body { font-size: 13px; color: var(--text); line-height: 1.7; }
.copy-card-warn {
  margin-top: 10px; padding: 8px 10px; background: #fff7ed; color: #c2410c;
  border: 1px solid #fed7aa; border-radius: 8px; font-size: 12px;
}
.copy-card-acts { margin-top: 10px; display: flex; gap: 8px; }
.copy-list .ghost-btn { padding: 6px 12px; font-size: 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--primary-strong); cursor: pointer; }
.copy-list .ghost-btn:hover { background: #f1f5f9; }
@media (max-width: 900px) {
  .copy-layout { grid-template-columns: 1fr; }
}

/* ═══ 同义改写（能力3）：风格分段选型 + 结果区 ═══ */
.rewrite-layout { margin-top: 16px; }
.rw-pill-tag { background: #0f766e; font-size: 11px; padding: 3px 9px; vertical-align: 2px; }
.rw-lock { color: #0f766e; font-style: normal; font-size: 11px; font-weight: 600; }

/* 风格分段选型（由 /api/rewrite/styles 动态渲染，新增风格无需改前端） */
.rw-styles { display: flex; flex-wrap: wrap; gap: 8px; }
.rw-styles-loading { font-size: 12px; color: var(--muted); }
.rw-seg {
  padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text);
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.rw-seg:hover { background: #eef2ff; border-color: #c7d2fe; }
.rw-seg:active { transform: translateY(1px); filter: brightness(.96); }
.rw-seg.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.rw-seg.active:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
.rw-seg:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.rw-restore { width: 100%; padding: 9px 14px; font-size: 13px; border-radius: 10px; }
.char-count.over { color: var(--danger); font-weight: 600; }

.rw-result { display: block; }
.rw-warns {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px;
  padding: 10px 12px; font-size: 12px; line-height: 1.7; margin-bottom: 12px;
}
.rw-warns[hidden] { display: none; }
.rw-warn-item + .rw-warn-item { margin-top: 4px; }
.rw-preview {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: #fff;
}
.rw-preview-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.rw-preview-body { font-size: 13px; color: var(--text); line-height: 1.75; white-space: pre-wrap; }
.rw-preview-tags { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: #0f766e; }

/* ═══════════ 缺口A：送发布产线一键闭环（出图结果 → TAB4 投送就绪） ═══════════ */
/* 主行动按钮：解锁后高亮，锁定态明显置灰（红线4：全部完成才解锁） */
.ghost-btn.to-send {
  background: linear-gradient(135deg, var(--primary), var(--primary-strong));
  border-color: var(--primary-strong); color: #fff; font-weight: 700;
}
.ghost-btn.to-send:hover { filter: brightness(1.06); }
.ghost-btn.to-send:disabled {
  background: #e2e8f0; border-color: #cbd5e1; color: #94a3b8; filter: none; opacity: 1;
}
.to-send-hint { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.to-send-hint[hidden] { display: none; }

/* ★2026-09-17【多轮追加】继续对话（同一项目出图） */
.continue-box { margin-top: 16px; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; background: #f8fafc; }
.continue-box[hidden] { display: none; }
.continue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.continue-label { font-size: 13px; font-weight: 600; color: var(--primary-strong); }
.continue-count { font-size: 12px; color: var(--muted); }
.continue-input { width: 100%; box-sizing: border-box; min-height: 48px; resize: vertical; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.5; background: #fff; color: #1e293b; }
.continue-input:focus { outline: none; border-color: var(--primary-strong); box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.continue-box .ghost-btn { margin-top: 10px; }
.continue-box .ghost-btn:disabled { opacity: .55; cursor: not-allowed; }

/* 自动处理分步状态（出图 → 投送 全链路可见，不空等） */
.pipe-status {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
  background: #f8fafc; margin-bottom: 14px;
}
.pipe-status[hidden] { display: none; }
.pipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pipe-title { font-size: 13px; font-weight: 700; color: var(--text); }
.pipe-clock { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pipe-steps { display: flex; flex-direction: column; gap: 6px; }
.pipe-step { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.6; }
.pipe-ico { flex: 0 0 auto; width: 16px; text-align: center; }
.pipe-name { flex: 0 0 auto; font-weight: 600; color: var(--text); min-width: 118px; }
.pipe-detail { flex: 1 1 auto; color: var(--muted); word-break: break-word; }
.pipe-step.running .pipe-name, .pipe-step.running .pipe-detail { color: var(--primary-strong); }
.pipe-step.ok .pipe-detail { color: #0f766e; }
.pipe-step.warn .pipe-detail { color: #92400e; }
.pipe-step.err .pipe-detail { color: var(--danger); font-weight: 600; }

/* 投送图缩略图（红线5：人工把关质量，点开看大图） */
.send-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin-bottom: 8px;
}
.send-images[hidden] { display: none; }
.send-thumb { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; }
.send-thumb img { width: 100%; height: 108px; object-fit: cover; display: block; cursor: zoom-in; }
.send-thumb img:hover { opacity: .9; }
.send-thumb-cap {
  padding: 6px 8px; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════════ 缺口B：目标项目地址预存 ═══════════ */
.tp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tp-presets select {
  flex: 1 1 160px; min-width: 0; padding: 8px 10px; font: inherit; font-size: 12px;
  border: 1px solid var(--border); border-radius: 9px; background: #fff; color: var(--text);
}
.tp-presets select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.tp-presets .ghost-btn { padding: 8px 12px; font-size: 12px; border-radius: 9px; }

/* ═══ 参考图写文案（cap-image-card）═══ */
.cap-image-card { margin-bottom: 18px; }
.cap-image-upload {
  border: 2px dashed var(--border); border-radius: 12px; padding: 24px; text-align: center;
  cursor: pointer; color: #888; transition: border-color .2s, background .2s; margin-bottom: 12px;
}
.cap-image-upload:hover, .cap-image-upload.dragover { border-color: var(--primary); background: rgba(37,99,235,.04); }
.cap-image-upload svg { margin: 0 auto 8px; display: block; }
.cap-drop-title { font-size: 14px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.cap-drop-sub { font-size: 12px; color: #888; }
.cap-preview { margin-top: 10px; display: flex; justify-content: center; }
.cap-preview-img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cap-results { margin-top: 12px; }
.copy-card-comment { color: #888; margin-top: 6px; font-size: 12px; padding-top: 6px; border-top: 1px dashed var(--border); }

/* ═══ 流水线步骤导航重构（Linear 深色侧边条）═══ */
body.layout-pipeline { --pipe-bg:#0f1011; --pipe-panel:#191a1b; --pipe-line:rgba(255,255,255,.08); --pipe-text:#f7f8f8; --pipe-muted:#8a8f98; --pipe-accent:#5e6ad2; }
.pipeline-nav {
  position: fixed; left: 0; top: 0; bottom: 0; width: 200px;
  background: linear-gradient(180deg, #0f1011 0%, #0b0c0d 100%);
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; z-index: 50;
}
.pipeline-title { color: #8a8f98; font-size: 11px; font-weight: 600; letter-spacing: .08em; padding: 0 10px 10px; text-transform: uppercase; }
.pipe-step {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px; padding: 10px 12px; cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s; color: #d0d6e0;
}
.pipe-step:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.pipe-step.active { background: rgba(94,106,210,.14); border-color: #5e6ad2; }
.step-dot { font-size: 15px; color: #8a8f98; min-width: 20px; }
.pipe-step.active .step-dot { color: #7170ff; }
.step-label { font-size: 14px; font-weight: 600; color: #f7f8f8; }
.step-desc { display: block; font-size: 11px; color: #8a8f98; font-weight: 400; margin-top: 1px; }
.pipe-step.active .step-desc { color: #a8b0c0; }
.pipeline-connector { flex: 1; }
/* 主工作区左移给侧边条让位 */
.pipeline-workspace { margin-left: 200px; padding: 20px 24px; min-height: 100vh; }
/* 顶部条适配左移 */
body .topbar { margin-left: 200px; padding-left: 24px; }
body .footer { margin-left: 200px; }
/* 主内容区不再被旧 --app-header-h 挤，重置滚动区 */
.pipeline-workspace .tab-panel { min-height: auto; }
@media (max-width: 768px) {
  .pipeline-nav { width: 64px; }
  .step-desc, .pipeline-title { display: none; }
  .pipe-step { justify-content: center; padding: 10px; }
  .step-label { display: none; }
  .pipeline-workspace, body .topbar, body .footer { margin-left: 64px; }
}