/* ============================================================
   Wan Studio · Graphite Workbench
   深色工作台：明度台阶 + 1px 描边分层，主色只落在关键动作上
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", ui-monospace, Menlo, Consolas, "PingFang SC", monospace;

  /* 主色：薄荷绿 — 只给主入口、进度与开始生成，其余一律靠明度分层 */
  --accent: #5BE3B4;
  --accent-hover: #70EFC3;
  --accent-deep: #46C79B;
  --accent-soft: rgba(91, 227, 180, 0.10);
  --accent-glow: rgba(91, 227, 180, 0.18);

  /* 中性色：冷石墨 — 面板逐级提亮，靠 1px 描边切开 */
  --bg: #0A0B0D;
  --bg-elev: #15181C;
  --card: #111316;
  --card-hover: #191D22;
  --line: #252A31;
  --line-soft: #1E2228;

  /* 文字 */
  --text: #E7EAEF;
  --text-2: #9AA3AF;
  --text-3: #6B7582;
  /* 实心配色块（主按钮/危险按钮）上的文字 */
  --on-accent: #06251C;
  --on-danger: #1A0F0D;

  /* 功能色：只保留状态含义，不和主色抢注意力 */
  --success: #79C98C;
  --success-soft: rgba(121, 201, 140, 0.12);
  --danger: #E0796C;
  --danger-soft: rgba(224, 121, 108, 0.10);
  --warn: #D6AE6A;
  --warn-soft: rgba(214, 174, 106, 0.10);

  /* 圆角与阴影：靠描边与明度分层，不用外投影 */
  --radius-sm: 4px;
  --radius-md: 5px;
  --radius-lg: 5px;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}
/* 浅色：同一套工作台结构，换成白纸台面；主色压深保证白底可读 */
body.light {
  --accent: #0B7A5B;
  --accent-hover: #0A6A4F;
  --accent-deep: #085A43;
  --accent-soft: rgba(11, 122, 91, 0.09);
  --accent-glow: rgba(11, 122, 91, 0.14);
  --bg: #F3F4F6;
  --bg-elev: #FAFBFC;
  --card: #FFFFFF;
  --card-hover: #F4F6F8;
  --line: #D8DCE1;
  --line-soft: #E8EBEF;
  --text: #171A1E;
  --text-2: #55606C;
  --text-3: #6E7986;
  --on-accent: #FFFFFF;
  --on-danger: #FFFFFF;
  --success: #2F7D45;
  --success-soft: rgba(47, 125, 69, 0.10);
  --danger: #B4463A;
  --danger-soft: rgba(180, 70, 58, 0.08);
  --warn: #8A6420;
  --warn-soft: rgba(138, 100, 32, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 26, 34, .20);
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
  /* 顶部一层极淡的主色光 + 44px 工作台网格 */
  background-image:
    radial-gradient(1000px 420px at 50% -200px, var(--accent-soft), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  background-attachment: fixed;
  min-height: 100vh;
}
body.light {
  background-image:
    radial-gradient(900px 400px at 50% -200px, var(--accent-soft), transparent 72%),
    linear-gradient(rgba(20, 26, 34, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 26, 34, .03) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px 26px 84px;
  position: relative;
}

/* ===== Header ===== */
header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 0; }
.brand > div { min-width: 0; }
.brand h1, .brand p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-weight: 500;
  font-size: 13px;
  font-family: var(--font-mono);
  line-height: 1;
  position: relative;
}
.logo::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.brand h1 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: var(--font-sans);
  line-height: 1.2;
}
.brand p {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-3);
  margin-top: 3px;
  letter-spacing: 0.05em;
}
.header-right { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* 状态块不许被压扁：窗口宽度不变但健康提示变长时（比如「已改，待重启生效」列出多个文件），
   模型块会被挤到只剩一个字宽，「模型已加载」竖着排还压住按钮。空间不够就让整块换行。 */
.model-chip, .vram-chip { flex: 0 0 auto; white-space: nowrap; }
/* 整片制作台入口：页面上唯一带主色的动作，让主入口不被状态信息淹没 */
.studio-link {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  padding: 5px 10px; border-radius: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.studio-link:hover { border-color: var(--accent); color: var(--accent); }
.health {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: 4px;
  transition: border-color .15s ease, color .15s ease;
}
.health:hover { border-color: var(--line); color: var(--text-2); }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
  transition: all .3s;
  flex: 0 0 auto;
}
.dot.ok { background: var(--success); }
.dot.bad { background: var(--danger); }
/* 「后端代码改了没重启」：不是故障（正在跑的任务不受影响），但界面上已经可能出现
   「有按钮、点了 404」——用 warn 色把它和真正的故障区分开。 */
.dot.warn { background: var(--warn); }
.vram-chip {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: help;
  transition: border-color .15s ease, color .15s ease;
}
.vram-chip:hover { border-color: var(--line); color: var(--text-2); }
.vram-chip .bar-v { width: 28px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.vram-chip .bar-v i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .5s; }
.model-chip {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 4px 3px 6px;
  border-radius: 4px;
  transition: border-color .15s ease, color .15s ease;
}
.model-chip:hover { border-color: var(--line); color: var(--text-2); }
.model-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.model-btn:hover { border-color: var(--text-3); color: var(--text); background: var(--bg-elev); }
.model-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.model-btn.loading { animation: pulse 1s infinite; }
/* 文生图模式下隐藏视频专属参数 */
body.t2i-mode .video-only,
body.t2i-mode .video-only-row { display: none !important; }

/* ===== 视频/图片 模式切换 Tab ===== */
.mode-tabs {
  display: flex; gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 3px;
  margin: 4px 0 18px;
}
.mode-tab {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 9px 12px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mode-tab:hover { color: var(--text-2); }
.mode-tab.active {
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
  font-weight: 600;
}
body.t2i-mode .quickbar { display: none !important; }
.orient-row { display: none; }
body.t2i-mode .orient-row { display: flex; gap: 6px; margin: 2px 0 10px; }
.orient-btn {
  flex: 1;
  font-size: 13px; padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s ease;
}
.orient-btn:hover { border-color: var(--text-3); color: var(--text); }
.orient-btn.active { border-color: var(--line); color: var(--text); background: var(--card); font-weight: 600; }

/* ===== 任务列表类型筛选 ===== */
.job-filter { display: flex; flex-wrap: wrap; gap: 4px; }
.job-filter .jf-btn {
  font-size: 12px; padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all .15s ease;
}
.job-filter .jf-btn:hover { color: var(--text-2); }
.job-filter .jf-btn.active { border-color: var(--line); color: var(--text); background: var(--card); font-weight: 600; }

/* 随机种子行：输入框和按钮对齐 */
.seed-row { display: flex; gap: 4px; align-items: center; }
.seed-row input { flex: 1; min-width: 0; }
.seed-row .btn-mini { padding: 9px 12px; height: auto; line-height: 1.4; white-space: nowrap; flex-shrink: 0; border-radius: 4px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.preset-row { margin-bottom: 12px; }
.preset-controls { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.preset-btn {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.preset-btn:hover { border-color: var(--text-3); color: var(--text); background: var(--bg-elev); }
.preset-btn.qk-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.preset-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.theme-toggle {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  transition: all .15s ease;
}
.theme-toggle:hover {
  border-color: var(--text-3);
  color: var(--text);
}

/* ===== Grid Layout ===== */
.grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 16px;
  align-items: start;
}

/* ===== Card ===== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  position: relative;
  overflow: hidden;
}
body.light .card { box-shadow: none; }
.card:hover {
  border-color: color-mix(in srgb, var(--line) 60%, var(--text-3) 40%);
}
.card h2 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  line-height: 1.3;
}
/* 标题右侧一条极细的延长线，把标题和右侧信息分开 */
.card h2::after {
  content: '';
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--line);
}
.card h2 .hint { font-family: var(--font-sans); }

/* ===== Form Elements ===== */
label.f {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin: 16px 0 6px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.hint { font-size: 11px; color: var(--text-3); font-weight: 400; }
.hint.bad { color: var(--danger); font-weight: 500; }

textarea, input[type=number], input[type=text], select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 9px 11px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
textarea:hover, input:hover, select:hover {
  border-color: color-mix(in srgb, var(--line) 45%, var(--text-3) 55%);
}
textarea:focus, input:focus, select:focus {
  border-color: var(--text-3);
}
textarea { resize: vertical; font-size: 13px; line-height: 1.65; min-height: 64px; }
textarea::placeholder, input::placeholder { color: var(--text-3); opacity: .7; }

/* ===== 自定义下拉框 ===== */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--bg);
  width: 100%;
  padding-right: 34px;
  cursor: pointer;
  line-height: 1.4;
  /* 防止某些浏览器仍显示原生箭头 */
  text-indent: 0.01px;
  text-overflow: '';
}
/* 去除 IE 默认箭头 */
select::-ms-expand { display: none; }

/* 自定义下拉箭头：用 .select-wrap 容器的伪元素画，100% 跨浏览器一致 */
.select-wrap {
  position: relative;
  display: block;
}
.select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-3);
  transform: translateY(-50%);
  pointer-events: none;
  transition: border-color .2s ease;
}
.select-wrap:hover::after,
.select-wrap:focus-within::after {
  border-top-color: var(--text);
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }

.row { display: flex; gap: 10px; align-items: stretch; }
.row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row label.f {
  flex: 1;
  display: flex;
  align-items: flex-start;
  margin: 0 0 6px 0;
  line-height: 1.4;
  padding-top: 2px;
}
.row .motion-hint-cell {
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  margin: 0 0 6px 0;
  font-size: 12px;
  line-height: 1.4;
}

/* ===== Chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.chip {
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
  letter-spacing: 0.01em;
  font-weight: 500;
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--text-3);
  color: var(--text);
}
.chip.off { color: var(--text-2); }
.chip.off:hover { border-color: var(--text-3); color: var(--text); }
.chip.active {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--text-3);
  font-weight: 600;
}

/* ===== Buttons ===== */
.btn {
  border: none;
  border-radius: 4px;
  padding: 10px 16px;
  font: inherit;
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: all .15s ease;
}
.btn-p {
  width: 100%;
  margin-top: 20px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 14px 24px;
  border-radius: var(--radius-md);
}
.btn-p:hover { background: var(--accent-hover); }
.btn-p:active { background: var(--accent-deep); }
.btn-p:disabled { opacity: .45; cursor: not-allowed; }

.meta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

.detail {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--bg-elev);
  border: 1px dashed var(--line);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-2);
}

/* ===== Right Column ===== */
.right-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.right-top h2 { margin: 0; flex: 1; min-width: 180px; }
.right-top > div:last-child { flex-wrap: wrap; }

/* ===== Jobs ===== */
.jobs { display: flex; flex-direction: column; gap: 10px; }
.job {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
  transition: border-color .15s ease;
  position: relative;
}
.job.running {
  border-color: color-mix(in srgb, var(--line) 55%, var(--accent) 45%);
  box-shadow: inset 2px 0 0 var(--accent);
}
.job:hover { border-color: color-mix(in srgb, var(--line) 55%, var(--text-3) 45%); }
.job.running:hover { border-color: var(--accent); }
.job-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 16px 0;
  gap: 12px;
}
.job-main { min-width: 0; }
.job-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.job-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-top: 5px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
/* 状态：只留状态点 + 等宽小字，不做色块徽标 */
.st {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0;
  border-radius: 0;
  flex-shrink: 0;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--text-3);
}
.st::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.st.pending, .st.running { color: var(--warn); }
.st.running::before {
  animation: statusDotPulse 1.5s ease-in-out infinite;
}
@keyframes statusDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}
.st.done { color: var(--success); }
/* 「最新」标签：保持安静，靠左侧主色细边指出最新一条 */
.st.latest {
  color: var(--accent);
  font-weight: 600;
  text-transform: none;
}
/* 最新任务卡片：左侧主色细边高亮 */
.job.job-latest {
  border-left: 2px solid var(--accent);
}
.st.error { color: var(--danger); }
.st.canceled { color: var(--text-2); }
/* 「已恢复产物」：这张卡是从 output/ 里捡回来的，不是通过本界面提交的任务（记录丢失、
   服务重启后才会出现）。它和真任务长得一样，不标出来根本认不出哪张是自己的。 */
.st.orphan {
  color: var(--text-2);
  border-left: 1px dashed var(--line);
  padding-left: 6px;
}
.st.orphan::before { display: none; }
/* 「疑似废片」：质量门发现整段全黑/纯白/帧数不符。文件是真的、能下载，
   但它不该无声无息地混在一堆成功里 —— 这个系统历史上确实静默产出过全糊的片子。 */
.st.suspect { color: var(--warn); font-weight: 600; }
.st.suspect::before { display: none; }

.guard {
  display: none;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 4px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}
.guard.on { display: block; }
.risk-warn {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 4px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
}

.stop-btn {
  font-size: 11px;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  transition: all .15s;
}
.stop-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}
.stop-btn-stuck {
  color: var(--on-danger);
  background: var(--danger);
  border-color: var(--danger);
  animation: stuck-pulse 1.2s ease-in-out infinite;
}
@keyframes stuck-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px transparent; }
}
.job-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.del-btn {
  font-size: 11px;
  color: var(--text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .15s;
}
.del-btn:hover {
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--danger);
  background: var(--danger-soft);
}
.del-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* 成片收藏：星标开关。状态靠颜色为主信号（--text-3 → --warn），字形只是辅助 ——
   ☆ 和 ⭐ 在不同字体里尺寸差很多，只靠字形看不出状态 */
.job-fav {
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  transition: all .15s;
}
.job-fav:hover { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); }
.job-fav.on { color: var(--warn); background: var(--warn-soft); }

/* 并排对比的选中标记。用 accent 而不是琥珀色：收藏是持久标记、对比选择是这次的临时
   工作区状态，两者同排但要一眼分得开 */
.job-cmp {
  font-size: 13px;
  line-height: 1;
  color: var(--text-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  transition: all .15s;
}
.job-cmp:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.job-cmp.on { color: var(--accent); background: var(--accent-soft); }

.mp4-hit {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}

.bar {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  margin: 12px 16px 4px;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width .8s ease;
}
.bar-loading i {
  animation: barShimmer 1.8s ease-in-out infinite;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-hover), var(--accent-deep));
  background-size: 200% 100%;
}
@keyframes barShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-dot {
  display: inline-block;
  animation: dotBlink 1.2s infinite;
}
@keyframes dotBlink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.job-body { padding: 12px 16px 16px; }
.pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.02em; }
.progress-age { color: var(--success); }
.progress-age.age-warn { color: var(--warn); }
.progress-age.age-stuck { color: var(--danger); font-weight: 600; }

video {
  width: 100%;
  max-height: 400px;
  border-radius: var(--radius-md);
  background: #000;
}
/* 成片操作：只有「下载」是实心按钮，其余退成安静的次级链接。
   原先 8 个同权重橙色描边按钮并排，会把成片本身淹没。 */
.v-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.v-actions a {
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  border: none;
  border-radius: 4px;
  padding: 3px 0;
  transition: color .15s ease;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: none;
  white-space: nowrap;
}
.v-actions a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.v-actions a:first-child {
  background: var(--accent);
  color: var(--on-accent);
  padding: 6px 14px;
  text-decoration: none;
}
.v-actions a:first-child:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
  text-decoration: none;
}

.empty {
  text-align: center;
  color: var(--text-3);
  padding: 56px 20px;
  font-size: 13px;
  letter-spacing: 0.3px;
}

.err-box {
  margin: 12px 16px 4px;
  font-size: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 4px;
  padding: 10px 14px;
  display: none;
  white-space: pre-wrap;
  word-break: break-all;
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}

.jobs-new {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.badge-min {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.3px;
}

/* ===== 一句话成片 ===== */
.idea-row textarea { margin-top: 2px; }
.idea-actions { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.idea-actions .select-wrap { flex: 1; min-width: 0; }
.idea-actions select { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea-actions .help-q { flex: 0 0 16px; align-self: center; }
.btn-expand {
  flex: 0 0 auto;
  min-width: 110px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 14px;
  transition: border-color .15s ease;
}
.btn-expand:hover {
  border-color: var(--accent);
}
.btn-expand:disabled { opacity: .45; cursor: not-allowed; }
.btn-apply {
  flex: 2;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 11px 14px;
  transition: background .15s ease;
}
.btn-apply:hover { background: var(--accent-hover); }
.btn-ghost {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-elev);
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  padding: 11px 14px;
  transition: all .15s;
}
.btn-ghost:hover {
  border-color: var(--text-3);
  color: var(--text);
  background: var(--card-hover);
}
.expand-out {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tag-eng {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-right: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.matched-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--warn-soft);
  color: var(--warn);
  margin-right: 6px;
  letter-spacing: 0.02em;
  font-weight: 500;
}
#expNote { color: var(--text-2); font-size: 12px; }
#expNote.err { color: var(--danger); }

/* ===== 主题分类 ===== */
.topic-cats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.topic-cats .chip { font-size: 11px; padding: 3px 9px; }
.topic-cats .chip.active {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--text-3);
}
#topicChips { margin-top: 10px; }
#topicChips .chip {
  border-color: var(--line);
  background: var(--bg-elev);
}
#topicChips .chip:hover { border-color: var(--text-3); color: var(--text); }
.topic-empty { font-size: 12px; color: var(--text-3); padding: 10px 0; }

/* ===== 风格快捷标签 ===== */
.style-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.style-chips .chip { font-size: 11px; padding: 4px 10px; }
.style-chips .chip.active {
  background: var(--card-hover);
  color: var(--text);
  border-color: var(--text-3);
}

/* ===== 提示词质量评分 ===== */
.prompt-score { margin-top: 12px; }
.ps-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ps-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 2px;
  transition: width .35s ease, background .35s ease;
}
.ps-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  margin-top: 6px;
}
.ps-text #psLabel { font-weight: 500; color: var(--text-2); letter-spacing: 0.3px; }
.ps-text .ps-tip { color: var(--text-3); }
.ps-good .ps-bar i { background: var(--success); }
.ps-good #psLabel { color: var(--success); }
.ps-mid .ps-bar i { background: var(--warn); }

/* 提示词框：自适应高度 —— 长提示词不再挤在 5 行里滚动 */
#prompt { min-height: 96px; max-height: 320px; transition: height .12s ease; }
/* 元信息条：词/字符统计 + 语言徽标 + 清空/复制 */
.prompt-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
}
.pm-badge {
  padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line);
  background: var(--bg-elev); color: var(--text-2); font-size: 11px; line-height: 18px;
}
.pm-badge.cn { border-color: var(--warn); color: var(--warn); }
.pm-badge.long { border-color: var(--danger, #D9534F); color: var(--danger, #D9534F); }
.pm-actions { margin-left: auto; display: flex; gap: 6px; }
.pm-actions button {
  font-size: 11px; padding: 2px 8px; border-radius: 3px; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--text-2);
}
.pm-actions button:hover { background: var(--card-hover); color: var(--text); }
/* 分段可视化：把逗号分隔的描述片段摊开，冲突项（如两套服装）直接高亮 */
.prompt-segs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pseg {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 3px 8px; border-radius: 3px; font-size: 11px; line-height: 1.5;
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-2);
}
.pseg b { font-weight: 500; color: var(--text); }
.pseg.conflict { border-color: var(--danger, #D9534F); color: var(--danger, #D9534F); background: var(--danger-soft); }
.pseg.conflict b { color: var(--danger, #D9534F); }
.pseg-x { cursor: pointer; opacity: .55; font-size: 12px; }
.pseg-x:hover { opacity: 1; }
.pseg-warn {
  margin-top: 6px; font-size: 11px; color: var(--danger, #D9534F);
  background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger, #D9534F) 35%, transparent);
  border-radius: 3px; padding: 5px 8px;
}
.ps-mid #psLabel { color: var(--warn); }
.ps-low .ps-bar i { background: var(--danger); }
.ps-low #psLabel { color: var(--danger); }

/* ===== 负向提示词框 ===== */
#negative { min-height: 52px; max-height: 200px; transition: height .12s ease, opacity .12s ease; }
/* 蒸馏档 CFG=1：负向词不参与采样（comfy/samplers.py cfg≈1 → uncond_=None），整块置灰明说，别让人白填 */
.neg-off #negative { opacity: .45; }
.neg-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11px; line-height: 1.6;
  color: var(--warn); background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 3px; padding: 5px 9px;
}
.neg-note button {
  margin-left: auto; font-size: 11px; padding: 2px 8px; border-radius: 3px; cursor: pointer;
  background: transparent; border: 1px solid color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn);
}
.neg-note button:hover { background: var(--warn-soft); }
.neg-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--text-3); }
/* 针对性负面词快捷包：按常见翻车类型一键插入 */
.neg-packs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.neg-pack {
  padding: 3px 9px; border-radius: 3px; font-size: 11px; line-height: 18px; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--line); color: var(--text-2);
}
.neg-pack:hover { background: var(--card-hover); color: var(--text); }
.neg-pack.on { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.neg-segs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.neg-off .neg-packs, .neg-off .neg-segs { display: none; }

/* ===== 收藏面板 ===== */
.fav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.fav-btn {
  font-size: 11px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
  font-weight: 500;
}
.fav-btn:hover { border-color: var(--text-3); color: var(--text); background: var(--bg-elev); }
.fav-panel {
  display: none;
  position: absolute;
  z-index: 50;
  width: 340px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: var(--shadow-lg);
  padding: 12px;
  backdrop-filter: blur(12px);
}
.fav-panel.show { display: block; animation: panelFadeIn .2s ease; }
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 移动端：收藏面板改为底部抽屉 */
@media (max-width: 640px) {
  .fav-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 75vh;
    border-radius: 6px 6px 0 0;
    padding: 0 16px 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    animation: slideUp .28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 60;
  }
  .fav-grabber { display: block; }
  .fav-head { padding-bottom: 10px; }
  .fav-x { width: 40px; height: 40px; font-size: 19px; }
  .fav-empty { padding: 18px 0 6px; }
  .fav-save { margin-top: 10px; padding-top: 12px; }
  .fav-backdrop.show { display: block; }
  .fav-item {
    padding: 14px 12px;
    min-height: 56px;
  }
  .fav-item .fav-name { font-size: 16px; }
  .fav-item .fav-desc { font-size: 12px; margin-top: 6px; }
  .fav-item .fav-del {
    padding: 8px 12px;
    font-size: 16px;
    min-width: 40px;
    min-height: 40px;
  }
  .fav-save-input { font-size: 16px; min-height: 44px; }
  .fav-save-row button { min-height: 44px; font-size: 14px; }
  @keyframes slideUp {
    from { transform: translateY(100%); opacity: 0.3; }
    to { transform: translateY(0); opacity: 1; }
  }
  @keyframes slideDown {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0.3; }
  }
  .fav-panel.hide {
    animation: slideDown .25s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  }
}
.fav-item {
  padding: 10px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: 1px solid var(--line);
}
.fav-item:last-child { border-bottom: none; }
.fav-item:hover { background: var(--card-hover); }
.fav-item .fav-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fav-item .fav-desc {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-item .fav-del {
  font-size: 11px;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all .15s;
}
.fav-item .fav-del:hover { color: var(--danger); background: var(--danger-soft); }
/* 遮罩层：默认隐藏，移动端抽屉打开时显示 */
.fav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 49;
  opacity: 0;
  transition: opacity .25s ease;
}
.fav-backdrop.show {
  display: block;
  opacity: 1;
}
/* 拖拽手柄：移动端抽屉顶部的指示条 */
.fav-grabber {
  display: none;
  padding: 8px 0 4px;
  text-align: center;
}
.fav-grabber span {
  display: inline-block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--text-3);
}
/* 抽屉标题行：标题 + 右上角关闭，移动端底部抽屉的入口和出口 */
.fav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.fav-head h3 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.fav-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: all .15s;
}
.fav-x:hover { border-color: var(--line); background: var(--bg-elev); color: var(--text); }
.fav-empty {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 24px 0;
}
/* 保存区单独成块，用分隔线和上面的列表/空态切开 */
.fav-save {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.fav-save-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 7px 11px;
  font-size: 12px;
  margin-bottom: 10px;
  background: var(--bg-elev);
  color: var(--text);
}
.fav-save-row { display: flex; gap: 6px; }
.fav-save-row button {
  flex: 1;
  padding: 7px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--text-2);
  transition: all .15s;
}
.fav-save-row button:hover { border-color: var(--text-3); color: var(--text); }
.fav-save-row button.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.fav-save-row button.primary:hover { background: var(--accent-hover); color: var(--on-accent); }

/* ===== 起始图 ===== */
.startimg { display: none; }
.startimg.on { display: block; animation: slideDown .25s ease; }
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.drop {
  border: 1px dashed var(--line);
  border-radius: 5px;
  background: var(--bg);
  padding: 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.drop:hover, .drop.over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop.busy { opacity: .6; cursor: progress; }
.drop strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.drop img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 图片预览容器：固定比例占位，防止加载时布局抖动 */
.drop .preview-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elev);
  border-radius: 4px;
  overflow: hidden;
}
.start-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  min-height: 24px;
}
.start-foot button {
  font-size: 11px;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 12px;
  cursor: pointer;
  transition: all .15s;
}
.start-foot button:hover {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-soft);
}
.start-foot .nm {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 任务卡里「起始图 → 成片」并排 */
.pair { display: flex; gap: 14px; align-items: flex-start; }
.pair > .side { flex: 0 0 140px; }
.pair > .main { flex: 1; min-width: 0; }
.pair .side img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid var(--line);
  display: block;
}
.pair .cap {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* 高级画质行 */
.adv-row { margin-top: 8px; }
.adv-row input[type=number] { padding: 8px 10px; font-size: 13px; }
.adv-row label.f { margin-top: 4px; font-size: 11px; }

/* ===== 响应式 ===== */
@media (max-width: 960px) {
  .wrap { padding: 20px 16px 60px; }
  .grid { grid-template-columns: 1fr; }
  .pair { flex-direction: column; }
  .pair > .side { flex: none; width: 140px; }
  /* iOS 输入框 <16px 会自动缩放页面，移动端统一拉到 16px */
  textarea, input[type=number], input[type=text], select { font-size: 16px; }
}
/* 小屏下多列表单换行，避免横向挤压 */
@media (max-width: 640px) {
  .row { flex-wrap: wrap; }
  .row > div { min-width: 120px; flex: 1 1 45%; }
  .idea-actions { flex-wrap: wrap; }
  .idea-actions .select-wrap,
  .idea-actions .btn-expand { flex: 1 1 100%; }
  .idea-actions .help-q { flex: 0 0 auto; align-self: flex-end; margin-left: auto; }
  /* 触摸目标最小 44px */
  .chip { min-height: 36px; display: inline-flex; align-items: center; }
  .topic-cats .chip, .style-chips .chip { min-height: 32px; padding: 6px 12px; font-size: 12px; }
  .stop-btn, .del-btn, .job-fav, .job-cmp, .fav-btn, .start-foot button, .fav-del { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
  /* 滑块增大触摸区域 */
  input[type=range] { height: 28px; }
  input[type=range]::-webkit-slider-thumb { width: 20px; height: 20px; }
  /* header 右侧换行：品牌独占一行，状态条单行横向滑动，避免标题被挤断 */
  header { flex-wrap: wrap; row-gap: 10px; }
  .brand { flex: 1 1 100%; }
  .brand h1 { white-space: nowrap; }
  .header-right {
    flex: 1 1 0; min-width: 0; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 6px;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .header-right::-webkit-scrollbar { display: none; }
  /* 主入口提到状态条最前，横向滑动时始终可见 */
  .header-right .studio-link { order: -1; }
  .brand h1 { font-size: 16px; }
  .brand p { display: none; }
  /* 视频操作按钮换行 */
  .v-actions { flex-wrap: wrap; gap: 6px; }
  .v-actions a { min-height: 36px; display: inline-flex; align-items: center; }
  /* 移动端基础字号提升，改善可读性 */
  body { font-size: 14px; }
  .card h2 { font-size: 14px; }
  label.f { font-size: 12px; }
  .hint { font-size: 12px; }
  .meta-line { font-size: 12px; }
  .job-title { font-size: 14px; }
  .job-sub { font-size: 12px; }
  .st { font-size: 12px; }
  /* 任务卡：标题占满整行，操作与徽标另起一行换行排列 —— 否则标题列被挤到几十像素、
     徽标和删除键被推出卡片外 */
  .job-head { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 0; }
  .job-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .job-actions { justify-content: flex-start; }
  /* 标题右侧的装饰延长线在窄屏会和 hint 抢宽度，直接去掉；hint 独占一行 */
  .card h2 { flex-wrap: wrap; gap: 4px 10px; }
  .card h2 .hint { flex: 1 1 100%; order: 2; }
  .card h2 .btn.tiny { order: 1; margin-left: auto; }
  .card h2::after { display: none; }
  .btn-p { font-size: 16px; padding: 16px 24px; letter-spacing: 4px; }
}

/* 超小屏（iPhone SE 等 375px 以下） */
@media (max-width: 400px) {
  .row > div { flex: 1 1 100%; }
  .wrap { padding: 16px 12px 48px; }
  /* header 进一步精简 */
  .brand .logo { width: 30px; height: 30px; font-size: 13px; }
  .header-right { gap: 4px; }
  .health span:not(.dot) { display: none; }
  .health { padding: 6px 8px; }
  .vram-chip { padding: 6px 8px; font-size: 11px; }
  .vram-chip span:not(.dot):not(#vramTxt) { display: none; }
  .theme-toggle { width: 32px; height: 32px; font-size: 14px; }
}

/* 触摸优化：iOS 去除点击高亮灰框 */
* { -webkit-tap-highlight-color: transparent; }

/* 安全区适配（刘海屏） */
@supports (padding-top: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
  .wrap { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* 移动端键盘弹出时：生成按钮区域底部占位，防止被键盘遮挡 */
.kb-spacer { display: none; }
@media (max-width: 640px) {
  .kb-spacer {
    display: block;
    height: 0;
    transition: height .2s ease;
  }
}

/* ===== 自定义滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 5px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ===== 选中文本颜色 ===== */
::selection {
  background: var(--accent);
  color: var(--on-accent);
}

/* ===== 入场动画 ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
header { animation: fadeUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.card:nth-child(1) { animation: fadeUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) .08s both; }
.card:nth-child(2) { animation: fadeUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) .16s both; }
.card:nth-child(3) { animation: fadeUp .6s cubic-bezier(0.2, 0.8, 0.2, 1) .24s both; }
.job { animation: fadeUp .5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* 生成按钮区常驻视口底部：设置卡有 1200px 高、按钮在它最末尾，桌面和手机都要滚将近两屏
   才够得到，改一次参数就得滚下去再滚回来。键盘弹出时它也顺带浮在键盘上方。
   它依赖所在卡片「不裁剪、且没有动画残留的 transform」——这两样都会把 sticky 锚定到
   卡片自身，而卡片并不滚动，表现出来就是"写了 sticky 却毫无效果"（手机端此前一直如此）。 */
.card.gen-host { overflow: visible; animation-fill-mode: backwards; }
.gen-area { margin: 0 -18px; padding: 10px 18px 0; }
.submit-pin {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 0%, transparent), var(--bg) 34%);
  margin: 0 -18px -18px;
  padding: 16px 18px 18px;
  border-top: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
}

/* ===== 普通 / 专业 模式分层 ===== */
.lvl-tabs {
  display: flex; gap: 2px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 3px;
  margin: 0 0 16px;
}
.lvl-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 13px; font-weight: 500;
  padding: 8px 12px;
  border: 1px solid transparent; border-radius: 4px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.lvl-tab:hover { color: var(--text-2); }
.lvl-tab.active { background: var(--card); border-color: var(--line); color: var(--text); font-weight: 600; }
.lvl-sub { font-size: 11px; font-weight: 400; color: var(--text-3); }
.lvl-tab.active .lvl-sub { color: var(--text-2); }
/* 普通模式：隐藏所有专业参数，值保留默认，不影响生成 */
body.simple-ui .pro-only { display: none !important; }
/* 普通模式：隐藏扩写引擎下拉（select 运行时被 .select-wrap 包裹，须隐藏容器），固定走 auto */
body.simple-ui .idea-actions .select-wrap { display: none !important; }
.simple-note {
  font-size: 12px; line-height: 1.7;
  color: var(--text-2);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 16px;
}
body:not(.simple-ui) .simple-note { display: none; }

/* ===== 参数白话解释：? 图标 + 气泡 ===== */
.help-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px;
  margin-left: 5px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  font-size: 11px; font-weight: 600; line-height: 1;
  cursor: pointer;
  vertical-align: 2px;
  transition: all .15s;
}
.help-q:hover, .help-q.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.help-tip {
  position: fixed; z-index: 1200;
  max-width: 280px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 5px;
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  font-size: 12px; line-height: 1.7;
  color: var(--text-2);
  animation: fadeUp .18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.help-tip b { display: block; color: var(--text); margin-bottom: 3px; font-size: 13px; }

/* ===== Toast 与确认框（替代原生 alert/confirm） ===== */
#toastWrap {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto; max-width: min(520px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 4px; font-size: 13px; line-height: 1.6;
  color: var(--text); background: var(--bg-elev); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg, 0 8px 28px rgba(0,0,0,.45));
  white-space: pre-line; text-align: center;
  animation: toastIn .22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.toast.success { border-color: color-mix(in srgb, var(--success) 55%, transparent); }
.toast.error { border-color: var(--danger); background: linear-gradient(180deg, var(--bg-elev), var(--danger-soft)); }
.toast.leaving { opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

#modalMask {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0, 0, 0, .58); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: modalIn .15s ease both;
}
.modal-box {
  width: min(430px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px 20px;
  box-shadow: var(--shadow-lg, 0 18px 60px rgba(0,0,0,.5));
  animation: fadeUp .18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 12px; font-family: var(--font-sans); letter-spacing: 0.02em; }
.modal-msg { font-size: 13px; line-height: 1.7; color: var(--text-2); white-space: pre-line; margin-bottom: 18px; }
.modal-input {
  width: 100%; box-sizing: border-box; margin: -8px 0 18px; padding: 9px 12px;
  border-radius: 4px; font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); outline: none; transition: border-color .15s ease;
}
.modal-input:focus { border-color: var(--text-3); }
/* formBox 的字段标签（多字段表单模态）：label 内的 input 不要 promptBox 那个负 margin */
.modal-field { display: block; margin-top: 6px; }
.modal-field span { display: block; font-size: 12px; color: var(--text-2); margin-bottom: 5px; }
.modal-field .modal-input { margin: 0 0 14px; }
.modal-btns {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.modal-btns button {
  min-width: 76px; padding: 8px 16px; border-radius: 4px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-elev); color: var(--text-2);
  transition: all .15s ease;
}
.modal-btns button:hover { border-color: var(--text-3); color: var(--text); }
.modal-btns .modal-ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.modal-btns .modal-ok:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.modal-btns .modal-ok.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.modal-btns .modal-ok.danger:hover { filter: brightness(1.08); }

/* 并排对比选择条：默认不占位，选中任务后才出现（用 .show 切换，避免内联 display 和
   样式表互相覆盖） */
#cmpBar {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 16px 10px;
  padding: 8px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-2);
}
#cmpBar.show { display: flex; }
#cmpCount { flex: 1; }

/* 并排对比窗：要比就得同屏，模态默认的 430px 不够摆 */
.modal-box.compare-box { width: min(1140px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.cmp-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.cmp-head .modal-title { margin-bottom: 0; }
.cmp-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.cmp-lead-sel {
  max-width: 200px; font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; cursor: pointer;
}
.cmp-sync {
  font-size: 13px; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; cursor: pointer;
  transition: border-color .15s, color .15s; white-space: nowrap;
}
.cmp-sync:hover { border-color: var(--text-3); color: var(--text); }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cmp-tile { min-width: 0; }
.cmp-media { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.cmp-media video, .cmp-media img { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: #000; }
.cmp-title { margin-top: 7px; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-meta { margin-top: 3px; font-size: 12px; color: var(--text-2); line-height: 1.5; }
.cmp-suspect { margin-top: 4px; font-size: 12px; color: var(--danger); }
@keyframes modalIn { from { opacity: 0; } }