/* 防止切换模块时因滚动条出现/消失导致 nav 宽度抖动 */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* ── AI Design Tokens ─────────────────────────────────── */
:root {
  /* AI 组件主色 - 统一使用 indigo */
  --ai-primary: #6366f1;
  --ai-primary-light: #818cf8;
  --ai-primary-dark: #4f46e5;
  --ai-primary-bg: #eef2ff;
  --ai-primary-border: #c7d2fe;
  
  /* AI 状态色 */
  --ai-success: #10b981;
  --ai-success-bg: #ecfdf5;
  --ai-success-border: #34d399;
  --ai-warning: #f59e0b;
  --ai-error: #ef4444;
  
  /* AI 动画时间 */
  --ai-duration-spinner: 0.8s;
  --ai-duration-skeleton: 1.5s;
  --ai-duration-transition: 0.2s;
}

/* Base & Utilities */
.view { 
  display: none;
  width: 100%;
}
.view.active { display: block; }

/* Buttons */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #2563eb;
  color: white;
  border-radius: 0.75rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.95rem;
}
.btn-primary:hover { background-color: #1d4ed8; }
.btn-primary:active { background-color: #1e40af; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: white;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.95rem;
}
.btn-secondary:hover { background-color: #f9fafb; }
.btn-secondary:active { background-color: #f3f4f6; }

/* ── 分段切换控件（全站唯一写法）───────────────────────────────
   二选一/多选一的视图、范围、模式切换一律用这个，别再各写各的：
     <div class="seg-toggle"><button class="active">卡片</button><button>表格</button></div>
   变体：.seg-icon 方形图标按钮；.seg-dark 暗底场景（灯箱等）。
   选中态用系统主色蓝，不要另起颜色。 */
.seg-toggle {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.seg-toggle button {
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  background: #fff;
  color: #9ca3af;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.seg-toggle button + button { border-left: 1px solid #e5e7eb; }
.seg-toggle button:hover:not(.active) { background: #f9fafb; color: #374151; }
.seg-toggle button.active { background: #eff6ff; color: #2563eb; font-weight: 500; }
.seg-toggle button:disabled { opacity: .5; cursor: not-allowed; }
.seg-toggle.seg-icon button { width: 30px; padding: 0; }

.seg-toggle.seg-dark { background: transparent; border-color: rgba(255, 255, 255, .25); }
.seg-toggle.seg-dark button { background: transparent; color: rgba(255, 255, 255, .7); }
.seg-toggle.seg-dark button + button { border-left-color: rgba(255, 255, 255, .2); }
.seg-toggle.seg-dark button:hover:not(.active) { background: rgba(255, 255, 255, .1); color: #fff; }
.seg-toggle.seg-dark button.active { background: #fff; color: #111827; }

/* Step indicator */
.step-dot {
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  color: #9ca3af;
  transition: all 0.2s ease;
  cursor: default;
  font-size: 0.875rem;
  user-select: none;
}

/* Clickable steps (future accessible steps) */
.step-dot.clickable {
  cursor: pointer;
  color: #6b7280;
}
.step-dot.clickable:hover {
  background-color: #f3f4f6;
  color: #374151;
  transform: translateY(-1px);
}

/* Current active step */
.step-dot.active {
  background-color: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
  cursor: default;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
}

/* Completed steps - more prominent clickable style */
.step-dot.completed {
  color: #2563eb;
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.step-dot.completed:hover {
  background-color: #eff6ff;
  color: #1d4ed8;
  text-decoration-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}
.step-dot.completed:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Loading spinner */
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: var(--ai-primary);
  border-radius: 50%;
  animation: spin var(--ai-duration-spinner) linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Model Provider Selector ───────────────────────────────── */

.prompt-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all var(--ai-duration-transition);
}

.prompt-btn:hover {
  color: #374151;
  background: rgba(255, 255, 255, 0.6);
}

.prompt-btn.active {
  background: white;
  color: var(--ai-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ── Multi-stage progress loading ── */
.loading-stages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  min-width: 280px;
}

.stage-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  transition: all 0.35s ease;
}

.stage-item .stage-icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage-item .stage-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #d1d5db;
}

.stage-item .stage-spinner {
  width: 1.5rem;
  height: 1.5rem;
  color: #6366f1;
  animation: spin 0.8s linear infinite;
}

.stage-item .stage-check {
  width: 1.5rem;
  height: 1.5rem;
  color: #10b981;
}

.stage-item .stage-info {
  flex: 1;
  text-align: left;
}

.stage-item .stage-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
}

.stage-item .stage-model {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.125rem;
}

.stage-item .stage-status-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  flex-shrink: 0;
}

/* Waiting state */
.stage-waiting {
  background: #f9fafb;
  opacity: 0.65;
}

/* Active state */
.stage-active {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #818cf8;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
  opacity: 1;
}
.stage-active .stage-name { color: #4338ca; }
.stage-active .stage-model { color: #6366f1; }
.stage-active .stage-status-text { color: #6366f1; }

/* Complete state */
.stage-complete {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #34d399;
  opacity: 1;
}
.stage-complete .stage-name { color: #065f46; }
.stage-complete .stage-model { color: #059669; }
.stage-complete .stage-status-text { color: #10b981; }

/* Progress bar */
.loading-progress-track {
  width: 100%;
  height: 0.375rem;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.loading-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ai-primary) 0%, var(--ai-primary-light) 100%);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* Image preview card */
.image-card {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: white;
  aspect-ratio: 1;
}
.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-card .delete-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  background: #ef4444;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: bold;
  border: none;
}
.image-card:hover .delete-btn { opacity: 1; }

/* 过期产品图（临时上传 24h 后被清理）：置灰 + 角标，删除按钮常显 */
.image-card.is-expired { border-color: #fca5a5; }
.image-card.is-expired img { filter: grayscale(1); opacity: 0.45; }
.image-card.is-expired .delete-btn { opacity: 1; }

/* ── Unified AI Result Card Base ──────────────── */
.ai-card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s;
}
.ai-card:hover {
  border-color: #93c5fd;
}
.ai-card.ai-card-core {
  border: 2px solid #3b82f6;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}
.ai-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.ai-card.drag-over {
  border-color: #2563eb;
  background: #eff6ff;
}
.ai-card input,
.ai-card textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: #1f2937;
  font-size: 0.875rem;
}
.ai-card .ai-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 2px 0;
}
.ai-card .ai-card-desc {
  font-size: 0.8rem;
  color: #4b5563;
  margin-top: 2px;
  resize: none;
  line-height: 1.4;
}

/* Selling point card (extends .ai-card) */
.sp-card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  transition: border-color 0.2s;
}
.sp-card:hover {
  border-color: #93c5fd;
}
.sp-card input,
.sp-card textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: #1f2937;
  font-size: 0.875rem;
}
.sp-card .sp-title {
  font-size: 0.95rem;
  font-weight: 600;
  padding: 2px 0;
}
.sp-card .sp-desc {
  font-size: 0.8rem;
  color: #4b5563;
  margin-top: 2px;
  resize: none;
  line-height: 1.4;
}
.sp-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: #2563eb;
  background: #dbeafe;
  padding: 1px 8px;
  border-radius: 4px;
}

/* Core selling point badge */
.sp-core-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dimension badge */
.sp-dimension-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.sp-dim-functional { background: #fef3c7; color: #92400e; }
.sp-dim-comfort { background: #fce7f3; color: #9d174d; }
.sp-dim-quality { background: #e0e7ff; color: #3730a3; }
.sp-dim-craftsmanship { background: #d1fae5; color: #065f46; }
.sp-dim-silhouette { background: #f3e8ff; color: #6b21a8; }
.sp-dim-scenario { background: #ffedd5; color: #9a3412; }
.sp-dim-emotional { background: #fee2e2; color: #991b1b; }
.sp-dim-practical { background: #e5e7eb; color: #374151; }

.sp-card-core {
  border: 2px solid #3b82f6;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

/* ── 卖点策划 · 审核预览（只读长页）───────────────────────────
   审核的人从钉钉群点进来看的就是这页：一条卖点一屏节奏，
   像读详情页一样往下滚，不给任何编辑入口。 */
.spr-bar {
  max-width: 820px; margin: 0 auto 12px; padding: 0 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.spr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 500;
}
.spr-exit {
  font-size: 12px; color: #9ca3af; padding: 4px 8px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.spr-exit:hover { background: #f3f4f6; color: #374151; }

.spr-page {
  max-width: 820px; margin: 0 auto 40px;
  background: #fff; border: 1px solid #f3f4f6; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  padding: 48px 56px 40px;
}
.spr-head { text-align: center; padding-bottom: 32px; border-bottom: 1px solid #f3f4f6; }
.spr-eyebrow {
  font-size: 12px; letter-spacing: .14em; color: #9ca3af;
  text-transform: none; margin-bottom: 12px;
}
.spr-head h1 { font-size: 28px; font-weight: 700; color: #111827; line-height: 1.35; }
.spr-meta { margin-top: 10px; font-size: 13px; color: #9ca3af; }

.spr-item { padding: 36px 0; border-bottom: 1px solid #f9fafb; }
.spr-item:last-of-type { border-bottom: none; }
.spr-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.spr-idx {
  font-size: 13px; font-weight: 700; color: #2563eb;
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.spr-tags { display: flex; align-items: center; gap: 6px; }
.spr-core {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #fef3c7; color: #b45309; font-weight: 500;
}
.spr-title { font-size: 20px; font-weight: 600; color: #111827; line-height: 1.45; }
.spr-desc { margin-top: 8px; font-size: 15px; line-height: 1.75; color: #4b5563; }

.spr-figs { margin-top: 12px; }
.spr-figs-head {
  margin-top: 18px; display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: #9ca3af;
}
.spr-figs-hint { margin-left: auto; font-size: 11px; color: #d1d5db; }
.spr-fig { position: relative; margin: 0; }
/* 单图铺满栏宽，但封顶——偶尔混进来的长图不至于占掉整屏 */
.spr-figs img {
  display: block; width: 100%; height: auto;
  max-height: 720px; object-fit: contain; object-position: center;
  border-radius: 12px; background: #f9fafb; cursor: zoom-in;
}
.spr-figs-multi {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.spr-figs-multi img { aspect-ratio: 3 / 4; object-fit: cover; }
/* 审核页里的图库推荐：跟配图区一样的分隔线语汇，格子比档案卡里略大一档，读图更省眼 */
.spr-ref { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.spr-ref .dp2-refgal { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; margin-top: 9px; }
.spr-fig.is-starred img { outline: 3px solid #f59e0b; outline-offset: -3px; }
.spr-fig .img-star { top: 8px; left: 8px; width: 30px; height: 30px; }
.spr-fig .img-star svg { width: 16px; height: 16px; }

.spr-depth { margin-top: 18px; padding: 14px 16px; background: #fafafa; border-radius: 12px; }
.spr-depth .depth-item { margin-bottom: 8px; }
.spr-depth .depth-item:last-child { margin-bottom: 0; }
.spr-copy {
  margin-top: 16px; padding: 14px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #faf5ff, #eff6ff);
  font-size: 15px; font-weight: 500; color: #4c1d95; line-height: 1.7;
}
.spr-copy::before { content: '文案　'; font-size: 11px; font-weight: 600; color: #a78bfa; letter-spacing: .1em; }
/* 审核页按区分段：段头一条粗线 + 区名 + 数量，区名颜色跟档案页里的区图标一致 */
.spr-section + .spr-section { margin-top: 24px; }
.spr-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 36px; padding-bottom: 10px; border-bottom: 2px solid currentColor;
}
.spr-section:first-child .spr-section-head { margin-top: 28px; }
.spr-section-name { font-size: 16px; font-weight: 700; letter-spacing: .04em; }
.spr-section-count { font-size: 12px; color: #9ca3af; font-weight: 400; }
.spr-section-selling_point { color: #2563eb; }
.spr-section-main_image { color: #d97706; }
.spr-section-sku { color: #059669; }
.spr-empty { padding: 60px 0; text-align: center; color: #9ca3af; font-size: 14px; }
.spr-foot {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid #f3f4f6;
  text-align: center; font-size: 12px; color: #c7cbd1;
}
/* 手机宽度预览：按详情页真实宽度收窄，字号跟着降一档，
   让审核的人看到的就是买家在手机上会看到的样子 */
.spr-mobile .spr-bar { max-width: 420px; }
.spr-mobile .spr-page { max-width: 420px; padding: 28px 20px 24px; border-radius: 14px; }
.spr-mobile .spr-head { padding-bottom: 24px; }
.spr-mobile .spr-head h1 { font-size: 22px; }
.spr-mobile .spr-item { padding: 28px 0; }
.spr-mobile .spr-title { font-size: 17px; }
.spr-mobile .spr-desc { font-size: 14px; line-height: 1.7; }
.spr-mobile .spr-copy { font-size: 14px; padding: 12px 14px; }
.spr-mobile .spr-section-name { font-size: 15px; }
.spr-mobile .spr-depth { padding: 12px 14px; }
.spr-mobile .spr-figs-multi { grid-template-columns: 1fr; }

@media (max-width: 640px) {
  .spr-page { padding: 28px 20px 24px; border-radius: 14px; }
  .spr-head h1 { font-size: 22px; }
  .spr-figs-multi { grid-template-columns: 1fr; }
}

/* ── 视觉策划：卖点 / 主图 / SKU 三个区 ─────────────────────── */
/* 三区纵向排开，区与区之间一条浅线；区头 = 小色块图标 + 标题 + 数量 + 动作 */
.vp-section + .vp-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid #f3f4f6; }
.vp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.vp-section-title { display: flex; align-items: center; gap: 8px; }
.vp-section-title h3 { font-size: 15px; font-weight: 600; color: #111827; line-height: 1; }
.vp-section-icon {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.vp-section-icon svg { width: 14px; height: 14px; }
.vp-icon-sp { background: #eff6ff; color: #2563eb; }
.vp-icon-mi { background: #fffbeb; color: #d97706; }
.vp-icon-sku { background: #ecfdf5; color: #059669; }
.vp-section-count { font-size: 12px; color: #9ca3af; }
/* 区内空态：比整页空态轻，一行说明 + 两个入口 */
.vp-empty {
  background: #fff; border: 1px dashed #e5e7eb; border-radius: 14px;
  padding: 26px 20px; text-align: center;
}
.vp-empty p { font-size: 14px; color: #6b7280; }
.vp-empty .sub { font-size: 12px; color: #9ca3af; margin-top: 4px; margin-bottom: 14px; }
/* 主图区里的 AI 场景分析子块 */
.vp-sub-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font-size: 13px; font-weight: 500; color: #374151;
}
.vp-sub-note { font-size: 11px; color: #9ca3af; font-weight: 400; }
/* 主图 / SKU 卡的序号徽标换色，扫一眼就知道是哪个区的卡 */
.sp-badge.sp-badge-mi { color: #d97706; background: #fef3c7; }
.sp-badge.sp-badge-sku { color: #059669; background: #d1fae5; }

/* ── 策划卡评论 / 回复 ─────────────────────────────────────────── */
/* 已有评论常驻展示；输入框默认藏着，点「写评论」/「回复」才出来，省高度 */
.cmt-thread { margin-top: 8px; }
.cmt-card.has-comments, .cmt-review.has-comments { padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.cmt-list + .cmt-toggle, .cmt-list + .cmt-compose { margin-top: 8px; }
.cmt-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: #9ca3af; padding: 2px 6px; margin-left: -6px; border-radius: 6px;
  transition: color .12s, background .12s;
}
.cmt-toggle:hover, .cmt-toggle.active { color: #4f46e5; background: #eef2ff; }
.cmt-table { margin-top: 0; }
/* 审核页：评论列表铺灰底，「写评论」是一行小字 */
.cmt-review { margin-top: 14px; }
.cmt-review.has-comments { border-top: 0; padding: 12px 14px; background: #fafafa; border-radius: 12px; }
.cmt-review .cmt-toggle { font-size: 13px; }
.cmt-list { display: flex; flex-direction: column; gap: 10px; }
.cmt-item { font-size: 13px; }
.cmt-head { display: flex; align-items: baseline; gap: 8px; }
.cmt-name { font-size: 12px; font-weight: 600; color: #374151; }
.cmt-time { font-size: 11px; color: #c7cbd1; }
.cmt-act { font-size: 11px; color: #c7cbd1; transition: color .12s; }
.cmt-act:hover { color: #4f46e5; }
.cmt-act-del:hover { color: #ef4444; }
.cmt-text { margin-top: 2px; color: #374151; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cmt-replies {
  margin: 8px 0 0 10px; padding-left: 12px; border-left: 2px solid #e0e7ff;
  display: flex; flex-direction: column; gap: 8px;
}
.cmt-empty { font-size: 12px; color: #c7cbd1; }
.cmt-compose { margin-top: 4px; }
.cmt-cancel { align-self: center; padding: 0 2px; }
.cmt-replying { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; color: #6366f1; }
.cmt-compose-row { display: flex; align-items: flex-end; gap: 6px; }
.cmt-input {
  flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; padding: 6px 10px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; resize: none; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.cmt-input:focus { border-color: #a5b4fc; box-shadow: 0 0 0 2px #e0e7ff; }
.cmt-input:disabled { opacity: .6; }
.cmt-send {
  flex-shrink: 0; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 8px;
  background: #4f46e5; color: #fff; transition: background .12s;
}
.cmt-send:hover { background: #4338ca; }
/* 表格：评论行整行浅底，缩进到「序」列之后 */
.arc-sp-table tr.cmt-row td { background: #fafafa; padding: 10px 16px 12px 64px; }
.arc-sp-table tbody tr.cmt-row:hover { background: transparent; }
.sp-row-btn.cmt-row-btn { width: auto; padding: 0 6px; gap: 3px; font-size: 11px; }
.sp-row-btn.cmt-row-btn.active { color: #4f46e5; background: #eef2ff; }
.spr-mobile .cmt-review.has-comments { padding: 10px 12px; }

/* ── 卖点卡文案就地编辑 ───────────────────────────────────────── */
/* 平时看不出是输入框，鼠标移上去才浮出底色，点进去给个焦点框 */
.sp-editable {
  border-radius: 6px; padding: 1px 4px; margin: 0 -4px;
  outline: none; transition: background .12s, box-shadow .12s;
  white-space: pre-wrap; word-break: break-word; cursor: text;
}
.sp-editable:hover { background: rgba(17, 24, 39, .04); }
.sp-editable:focus { background: #fff; box-shadow: 0 0 0 2px #c7d2fe; }
.sp-editable:empty::before {
  content: attr(data-placeholder);
  color: #d1d5db; pointer-events: none;
}
/* 表格里的两行文案窄，超长省略；聚焦时展开看全 */
.arc-sp-table .sp-editable { display: block; max-width: 42rem; }
.arc-sp-table .sp-editable:not(:focus) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── 卖点排序 / 视图切换 ─────────────────────────────────────── */
/* 拖拽手柄：只有按住它才会起拖，卡片里选文字、点图不受影响 */
.sp-drag {
  color: #d1d5db; font-size: 13px; line-height: 1; cursor: grab;
  user-select: none; padding: 0 2px;
}
.sp-drag:hover { color: #9ca3af; }
.sp-drag:active { cursor: grabbing; }
.sp-dragging { opacity: .4; }
.sp-drop-target { outline: 2px dashed #6366f1; outline-offset: 2px; }
tr.sp-drop-target { outline-offset: -2px; }

.arc-sp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.arc-sp-table th {
  padding: 10px 12px; text-align: left; font-weight: 500; font-size: 12px;
  color: #9ca3af; background: #fafafa; border-bottom: 1px solid #f3f4f6;
}
.arc-sp-table td { padding: 10px 12px; border-bottom: 1px solid #f9fafb; vertical-align: middle; }
.arc-sp-table tr:last-child td { border-bottom: none; }
.arc-sp-table tbody tr:not(.arc-sp-thead):hover { background: #fafafa; }
/* 表格里的配图：3:4 小图，跟卡片里看到的比例一致 */
.sp-row-thumbs { display: flex; align-items: center; gap: 6px; }
.sp-row-thumbs img {
  width: 36px; height: 48px; object-fit: cover;
  border-radius: 5px; background: #f3f4f6; border: 1px solid #f3f4f6;
  cursor: zoom-in; transition: border-color .15s;
}
.sp-row-thumbs img:hover { border-color: #c7d2fe; }
.sp-row-more { font-size: 11px; color: #9ca3af; }

.sp-row-btn {
  width: 24px; height: 24px; border-radius: 6px; color: #9ca3af;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; transition: background .15s, color .15s;
}
.sp-row-btn:hover:not(:disabled) { background: #f3f4f6; color: #374151; }
.sp-row-btn:disabled { opacity: .3; cursor: not-allowed; }
.sp-row-del:hover:not(:disabled) { background: #fef2f2; color: #ef4444; }

/* Depth analysis section */

.depth-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.depth-item:last-child {
  margin-bottom: 0;
}

.depth-label {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  min-width: 32px;
  text-align: center;
}

.depth-observation {
  color: #0369a1;
  background: #e0f2fe;
}

.depth-painpoint {
  color: #be123c;
  background: #fce7f3;
}

.depth-persuasion {
  color: #166534;
  background: #dcfce7;
}

.depth-content {
  font-size: 0.8rem;
  color: #374151;
  line-height: 1.5;
}

/* Copy suggestion section - redesigned */

.copy-pattern {
  font-size: 0.6rem;
  font-weight: 500;
  color: #fff;
  background: #22c55e;
  padding: 2px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Drag handle and sortable styles */
.sp-card {
  user-select: auto;
}

.sp-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.sp-card.drag-over {
  border-color: #2563eb;
  background: #eff6ff;
}

/* AI button content and loading states */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Toast animation */
.toast-show {
  animation: toast-in 0.3s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keyword tags */
.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #eff6ff;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid #bfdbfe;
}
.keyword-reason {
  font-size: 0.7rem;
  color: #60a5fa;
  font-weight: 400;
}

/* Image match card */
.image-match-card {
  background: white;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}
.image-match-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.image-match-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

.image-match-thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: #f3f4f6;
  overflow: hidden;
}
.image-match-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.image-match-card:hover .image-match-thumb img {
  transform: scale(1.05);
}

.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #9ca3af;
  font-size: 0.8rem;
  background: #f9fafb;
}

.relevance-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.image-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid white;
  background: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: transparent;
}
.image-check.checked {
  background: #2563eb;
  border-color: #2563eb;
  color: white;
}

.image-match-info {
  padding: 0.5rem 0.75rem;
}
.image-match-title {
  font-size: 0.75rem;
  color: #374151;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-match-source {
  font-size: 0.7rem;
  color: #3b82f6;
  text-decoration: none;
}
.image-match-source:hover {
  text-decoration: underline;
}

/* Detail image card */
.detail-image-card {
  transition: box-shadow 0.2s;
}
.detail-image-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Main Image Planner ─────────────────────────────────── */

/* Scenario card (extends .ai-card) */
.mi-scenario-card {
  /* inherits .ai-card base styles via HTML class */
}
.mi-scenario-card .depth-label.depth-audience {
  color: #0369a1;
  background: #e0f2fe;
}
.mi-scenario-card .depth-label.depth-context {
  color: #9a3412;
  background: #ffedd5;
}
.mi-scenario-card .depth-label.depth-appeal {
  color: #166534;
  background: #dcfce7;
}

/* Ratio selector */
.ratio-option {
  padding: 0.375rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ratio-option:hover {
  color: #374151;
  background: rgba(255,255,255,0.6);
}
.ratio-option.active {
  color: #1d4ed8;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── SPA Navigation Tabs ─────────────────────────────────── */

/* Module views */
.module-view {
  display: none;
  width: 100%;
  position: relative;
  min-height: 400px;
}
.module-view:not(.hidden) {
  display: block;
}

/* Navigation tabs — 方案 C:浅紫圆角 active */
.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-tab:hover {
  color: #374151;
  background-color: #f9fafb;
}

.nav-tab.active {
  color: #4f46e5;
  background-color: #eef2ff;
}

.nav-tab svg {
  width: 1rem;
  height: 1rem;
}

/* 一级入口的 Beta 角标：浅色小胶囊，入口选中时反色 */
.nav-beta {
  display: inline-block; margin-left: -0.1rem; padding: 1px 5px; border-radius: 999px;
  font-size: 9.5px; font-weight: 600; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase;
  color: #6366f1; background: #eef2ff; border: 1px solid #c7d2fe; vertical-align: middle;
}
.nav-tab.active .nav-beta { color: #fff; background: #6366f1; border-color: #6366f1; }

/* ── 顶部二级下拉菜单：各模块页内的二级标签条隐藏，统一由这里进入 ── */
.nav-tab { padding-left: 0.625rem; padding-right: 0.625rem; gap: 0.35rem; }   /* 多了工作流入口和角标，收紧一点避免横向滚动 */
#app-nav { gap: 2px; }
.nav-tab .nav-caret { width: 11px; height: 11px; margin-left: -3px; color: #9ca3af; transition: transform .15s; }
.nav-tab.nav-open .nav-caret, .nav-tab.active .nav-caret { color: currentColor; }
.nav-tab.nav-open .nav-caret { transform: rotate(180deg); }
.nav-tab.nav-open { color: #374151; background-color: #f9fafb; }
.nav-tab.active.nav-open { color: #4f46e5; background-color: #eef2ff; }
.nav-dd {
  position: absolute; z-index: 60; min-width: 168px; padding: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.12); animation: navDdIn .12s ease-out;
}
@keyframes navDdIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav-dd-item {
  display: flex; align-items: center; width: 100%; height: 36px; padding: 0 12px; border: none; border-radius: 8px; background: transparent;
  font-size: 13.5px; font-weight: 500; color: #374151; cursor: pointer; text-align: left; white-space: nowrap;
}
.nav-dd-item:hover { background: #f3f4f6; color: #111827; }
.nav-dd-item.active { background: #eef2ff; color: #4f46e5; }
.nav-dd-item > svg { width: 15px; height: 15px; margin-right: 8px; color: #9ca3af; flex: none; }
.nav-dd-item.active > svg, .nav-dd-item:hover > svg { color: currentColor; }
.nav-dd-item > span + span, .nav-dd-item > span + .vpl-new-badge, .nav-dd-item > span + .subtab-badge-pro { margin-left: 6px; }
.creative-subtab-bar, .materials-subtab-bar, .ai-tools-subtabs, .vs-subtabs, .ps-mode-tabs { display: none !important; }
/* 二级标签条隐藏后，视频指令库自带的 1.5rem 上留白会让它比其他页低一截，统一从视图的 32px 起 */
#module-video-studio .vpl-container { padding-top: 0; }

/* Secondary nav bar for 创意策划 — 复用系统 sub-tab 规范 (.vs-subtab / .ds-subtab / .ps-mode-tab) */
.creative-subtab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}
.creative-subtab-bar.hidden {
  display: none;
}
.creative-subtab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.creative-subtab:hover {
  color: #374151;
}
.creative-subtab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}
.creative-subtab svg {
  width: 1rem;
  height: 1rem;
}

/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── Unified AI Option Button (统一 AI 选项按钮) ──────────────── */

.ai-option-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ai-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  background: white;
  cursor: pointer;
  transition: all var(--ai-duration-transition);
  min-width: 4.5rem;
}

.ai-option-btn:hover {
  border-color: var(--ai-primary-border);
  background: var(--ai-primary-bg);
}

.ai-option-btn.active {
  border-color: var(--ai-primary);
  background: var(--ai-primary-bg);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.ai-option-btn.winner {
  border-color: var(--ai-success);
}

.ai-option-btn.winner.active {
  border-color: var(--ai-success);
  background: var(--ai-success-bg);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}

.ai-option-btn .opt-letter {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
}

.ai-option-btn.winner .opt-letter {
  color: #059669;
}

.ai-option-btn .opt-label {
  font-size: 0.65rem;
  color: #6b7280;
  line-height: 1;
}

.ai-option-btn .opt-score {
  font-size: 0.6rem;
  color: var(--ai-primary);
  font-weight: 600;
  line-height: 1;
}

.ai-option-btn.winner .opt-score {
  color: var(--ai-success);
}

@media (max-width: 640px) {
  .ai-option-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Visual Plan Card (extends .ai-card) ──────────────── */
.visual-plan-card {
  /* inherits .ai-card base styles via HTML class */
}
.visual-plan-error {
  border-color: #fecaca;
}

/* Skeleton loading */
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Prompt box with copy button */
.visual-prompt-wrapper {
  position: relative;
}
.visual-prompt-wrapper .copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.7rem;
  color: #6b7280;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0;
  pointer-events: none;
}
.visual-prompt-wrapper:hover .copy-btn {
  opacity: 1;
  pointer-events: auto;
}
.visual-prompt-wrapper .copy-btn:hover {
  color: #2563eb;
  border-color: #93c5fd;
  background: #f0f9ff;
}

/* ── Inline Image Generation ─────────────────────────────── */

.inline-gen-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: inlineGenSpin 0.8s linear infinite;
}
@keyframes inlineGenSpin {
  to { transform: rotate(360deg); }
}
.inline-gen-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
}
@keyframes inlineGenPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.inline-gen-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  margin-top: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.inline-gen-gallery::-webkit-scrollbar {
  height: 4px;
}
.inline-gen-gallery::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}
.inline-gen-gallery-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 200px;
  position: relative;
}
.inline-gen-gallery-item .inline-gen-image {
  width: 100%;
  max-width: none;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.inline-gen-gallery-item .inline-gen-image:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.inline-gen-gallery-img-wrap {
  position: relative;
}
/* 配图星标：星 = 认可这张图。没打星时悬浮才出现，打了星常驻金色 */
.img-star {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .45); color: #fff;
  opacity: 0; transition: opacity .15s, background .15s, color .15s, transform .15s;
}
.inline-gen-gallery-img-wrap:hover .img-star, .spr-fig:hover .img-star { opacity: 1; }
.img-star:hover { background: rgba(0, 0, 0, .65); color: #fcd34d; }
.img-star.on { opacity: 1; background: #f59e0b; color: #fff; }
.img-star.on:hover { background: #d97706; color: #fff; transform: scale(1.06); }
.inline-gen-gallery-item.is-starred .inline-gen-image { outline: 2px solid #f59e0b; outline-offset: -2px; }
.img-star-count { color: #d97706; font-weight: 500; }
/* 表格缩略图右上角一颗小星 */
.sp-row-thumb { position: relative; display: inline-block; line-height: 0; }
.sp-row-thumb.is-starred img { border-color: #f59e0b; }
.sp-row-star {
  position: absolute; top: -4px; right: -4px; font-style: normal; font-size: 10px; line-height: 14px;
  width: 14px; height: 14px; border-radius: 50%; background: #f59e0b; color: #fff; text-align: center;
}

/* 悬浮操作按钮组 */
.inline-gen-hover-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.inline-gen-gallery-img-wrap:hover .inline-gen-hover-actions {
  opacity: 1;
}
.inline-gen-action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}
.inline-gen-action-btn:hover {
  background: rgba(99,102,241,0.85);
}
.inline-gen-action-btn.inline-gen-action-delete:hover {
  background: rgba(239,68,68,0.85);
}
/* 导入下拉菜单 */
.inline-import-menu {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  overflow: hidden;
  min-width: 140px;
}
.inline-import-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.8rem;
  color: #374151;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.inline-import-menu-item:hover {
  background: #f3f4f6;
}
.inline-import-menu-item + .inline-import-menu-item {
  border-top: 1px solid #f3f4f6;
}
/* 产品档案库卖点卡片按钮 */
.arc-sp-prompt-btn,
.arc-sp-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #6b7280;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.arc-sp-prompt-btn:hover {
  color: #4f46e5;
  border-color: #c7d2fe;
  background: #eef2ff;
}
.arc-sp-import-btn:hover {
  color: #0891b2;
  border-color: #a5f3fc;
  background: #ecfeff;
}
.inline-gen-image-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.375rem;
  flex-wrap: wrap;
}
.inline-gen-candidate-tag {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.1rem 0.3rem;
  background: #fef3c7;
  color: #b45309;
  border-radius: 0.25rem;
  white-space: nowrap;
  letter-spacing: 0.025em;
}

/* ── Person Image Library Panel ──────────────────────────── */
.person-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
}
.person-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.person-panel-header:hover {
  background: #f9fafb;
}
.person-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #6366f1;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
}
.person-panel-body {
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.625rem;
}
.person-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.person-upload-btn {
  width: 72px;
  height: 100px;
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: #9ca3af;
  transition: border-color 0.15s, color 0.15s;
}
.person-upload-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
}

/* ── Person Library Page ─────────────────────────────────── */
.pl-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.pl-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.pl-card-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f3f4f6;
}
.pl-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.pl-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239,68,68,0.75);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}
.pl-card:hover .pl-card-delete {
  opacity: 1;
}
.pl-card-delete:hover {
  background: rgba(239,68,68,0.95);
}
.pl-card-body {
  padding: 0.5rem 0.625rem 0.625rem;
}
.pl-card-name {
  width: 100%;
  border: none;
  border-bottom: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  padding: 2px 0;
  background: transparent;
  outline: none;
  transition: border-color 0.15s;
}
.pl-card-name:focus {
  border-bottom-color: #6366f1;
}
.pl-card-meta {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.375rem;
}
.pl-meta-select {
  flex: 1;
  font-size: 0.6875rem;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 2px 4px;
  background: #f9fafb;
  outline: none;
  cursor: pointer;
}
.pl-meta-select:focus {
  border-color: #6366f1;
}

/* ── Person Library: Layout ────────────────────────────────── */
.pl-layout { display: flex; gap: 1.5rem; }
.pl-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 1rem; max-height: calc(100vh - 200px); overflow-y: auto; }
.pl-main { flex: 1; min-width: 0; }
.pl-sidebar-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid #e5e7eb; margin-bottom: 0.5rem; }
.pl-sidebar-title { font-size: 0.875rem; font-weight: 600; color: #374151; }
.pl-clear-all-btn { font-size: 0.75rem; color: #6366f1; background: none; border: none; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.pl-clear-all-btn:hover { background: #eef2ff; }

/* ── Person Library: Search Bar ───────────────────────────── */
.pl-search-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.pl-search-input-wrap { flex: 1; position: relative; display: flex; align-items: center; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; padding: 0 0.75rem; }
.pl-search-icon { width: 1rem; height: 1rem; color: #9ca3af; flex-shrink: 0; }
.pl-search-input-wrap input { flex: 1; border: none; outline: none; font-size: 0.875rem; padding: 0.5rem 0.5rem; background: transparent; }
.pl-search-clear { position: absolute; right: 8px; background: none; border: none; font-size: 1.1rem; color: #9ca3af; cursor: pointer; padding: 2px 4px; }
.pl-search-clear:hover { color: #374151; }
.pl-search-btn { background: #6366f1; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; white-space: nowrap; }
.pl-search-btn:hover { background: #4f46e5; }
.pl-search-indicator { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: #eef2ff; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.8125rem; color: #4338ca; }
.pl-search-clear-link { margin-left: auto; color: #6366f1; background: none; border: none; cursor: pointer; font-size: 0.75rem; text-decoration: underline; }

/* ── Person Library: Filter Groups ────────────────────────── */
.pl-filter-group { border-bottom: 1px solid #f3f4f6; }
.pl-filter-group-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; padding: 0.625rem 0; cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: #374151; }
.pl-filter-group-toggle span:first-child { flex: 1; text-align: left; }
.pl-filter-group-count { font-size: 0.6875rem; background: #6366f1; color: #fff; padding: 1px 6px; border-radius: 9px; min-width: 18px; text-align: center; }
.pl-filter-chevron { width: 1rem; height: 1rem; color: #9ca3af; transition: transform 0.2s; }
.pl-filter-group.collapsed .pl-filter-chevron { transform: rotate(-90deg); }
.pl-filter-group.collapsed .pl-filter-group-body { display: none; }
.pl-filter-group-body { padding: 0.25rem 0 0.5rem; }
.pl-filter-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; cursor: pointer; font-size: 0.8125rem; color: #4b5563; }
.pl-filter-item:hover { color: #111827; }
.pl-filter-item input[type="checkbox"] { accent-color: #6366f1; width: 14px; height: 14px; }
.pl-filter-item-name { flex: 1; }
.pl-filter-item-count { font-size: 0.6875rem; color: #9ca3af; }
.pl-filter-expand-btn { font-size: 0.75rem; color: #6366f1; background: none; border: none; cursor: pointer; padding: 0.25rem 0; }
.pl-filter-expand-btn:hover { text-decoration: underline; }

/* ── Person Library: Active Filters (chips) ───────────────── */
.pl-active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; background: #f9fafb; border-radius: 0.5rem; }
.pl-active-filters-label { font-size: 0.75rem; color: #6b7280; margin-right: 0.25rem; }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; padding: 3px 8px; border-radius: 12px; background: #e0e7ff; color: #3730a3; }
.pl-chip-genders { background: #dbeafe; color: #1e40af; }
.pl-chip-age_groups { background: #fef3c7; color: #92400e; }
.pl-chip-body_types { background: #d1fae5; color: #065f46; }
.pl-chip-manual_tags { background: #fce7f3; color: #9d174d; }
.pl-chip-remove { background: none; border: none; cursor: pointer; font-size: 0.875rem; line-height: 1; color: inherit; opacity: 0.6; padding: 0; }
.pl-chip-remove:hover { opacity: 1; }

/* ── Person Library: Card ─────────────────────────────────── */
.pl-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; transition: box-shadow 0.15s; position: relative; }
.pl-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.pl-card.pl-card-selected { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.3); }
.pl-card-img-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #f3f4f6; }
.pl-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.pl-card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.pl-card:hover .pl-card-actions { opacity: 1; }
.pl-card-actions button { width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.pl-card-actions button:hover { background: rgba(0,0,0,0.8); }
.pl-card-checkbox { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 4px; border: 2px solid #d1d5db; background: rgba(255,255,255,0.9); cursor: pointer; display: none; accent-color: #6366f1; }
.pl-batch-mode .pl-card-checkbox { display: block; }
.pl-card-info { padding: 0.5rem 0.625rem 0.625rem; }
.pl-card-title { font-size: 0.8125rem; font-weight: 500; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-card-meta { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.pl-badge { font-size: 0.625rem; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.pl-badge-gender { background: #dbeafe; color: #1e40af; }
.pl-badge-age { background: #fef3c7; color: #92400e; }
.pl-badge-body { background: #d1fae5; color: #065f46; }
.pl-badge-pending { background: #f3f4f6; color: #9ca3af; font-style: italic; }
.pl-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }
.pl-tag { font-size: 0.625rem; padding: 1px 5px; border-radius: 3px; background: #fce7f3; color: #9d174d; cursor: pointer; }
.pl-tag:hover { background: #fbcfe8; }
.pl-card-add-tag-btn { width: 100%; margin-top: 0.375rem; padding: 3px; font-size: 0.6875rem; border: 1px dashed #d1d5db; background: transparent; cursor: pointer; border-radius: 4px; color: #6b7280; }
.pl-card-add-tag-btn:hover { border-color: #6366f1; color: #6366f1; }

/* ── Person Library: Image Missing ────────────────────────── */
.pl-img-missing { display: flex; align-items: center; justify-content: center; background: #f3f4f6; }
.pl-img-missing::after { content: '\u56FE\u7247\u5DF2\u6E05\u7406'; font-size: 0.625rem; color: #9ca3af; }

/* ── Person Library: Batch Bar ────────────────────────────── */
.pl-batch-toggle-btn { height: 32px; padding: 0 12px; font-size: 0.8125rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; cursor: pointer; color: #374151; }
.pl-batch-toggle-btn:hover { background: #f9fafb; }
.pl-batch-toggle-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.pl-refresh-btn { height: 32px; width: 32px; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; cursor: pointer; color: #374151; display: flex; align-items: center; justify-content: center; }
.pl-refresh-btn:hover { background: #f9fafb; }
.pl-batch-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; pointer-events: none; }
.pl-batch-bar-inner { max-width: 900px; margin: 0 auto 1rem; background: #1f2937; color: #fff; border-radius: 1rem; padding: 0.75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: auto; box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.pl-batch-info { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; }
.pl-batch-count { color: #d1d5db; }
.pl-batch-select-all, .pl-batch-clear { background: none; border: none; color: #a5b4fc; cursor: pointer; font-size: 0.8125rem; }
.pl-batch-select-all:hover, .pl-batch-clear:hover { color: #fff; }
.pl-batch-actions { display: flex; gap: 0.5rem; }
.pl-batch-tag-btn { background: #f59e0b; color: #fff; border: none; padding: 6px 14px; border-radius: 0.5rem; cursor: pointer; font-size: 0.8125rem; }
.pl-batch-tag-btn:hover { background: #d97706; }
.pl-batch-delete-btn { background: #ef4444; color: #fff; border: none; padding: 6px 14px; border-radius: 0.5rem; cursor: pointer; font-size: 0.8125rem; }
.pl-batch-delete-btn:hover { background: #dc2626; }

/* ── Person Library: Pagination ───────────────────────────── */
#pl-pagination { display: flex; justify-content: center; align-items: center; gap: 0.25rem; }
.pl-page-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid #e5e7eb; border-radius: 0.375rem; background: #fff; cursor: pointer; font-size: 0.8125rem; color: #374151; display: flex; align-items: center; justify-content: center; }
.pl-page-btn:hover { background: #f3f4f6; }
.pl-page-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.pl-page-btn:disabled { opacity: 0.4; cursor: default; }

/* ── Materials Sub-tab Bar ────────────────────────────────── */
.materials-subtab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}
.materials-subtab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.materials-subtab:hover {
  color: #374151;
}
.materials-subtab.active {
  color: #4f46e5;
  border-bottom-color: #4f46e5;
}

/* ── AI Gallery Cards ─────────────────────────────────────── */
.aig-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.aig-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.aig-card-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f3f4f6;
}
.aig-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
/* Card action toolbar */
.aig-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  opacity: 0;
  transition: opacity 0.15s;
}
.aig-card:hover .aig-card-actions {
  opacity: 1;
}
.aig-card-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.aig-card-actions button:hover {
  background: rgba(255,255,255,0.3);
}
.aig-card-actions .aig-action-delete:hover {
  background: rgba(239,68,68,0.8);
}
.aig-card-actions .aig-action-fav.active {
  color: #fbbf24;
}
.aig-card-actions .aig-action-fav:hover {
  background: rgba(251,191,36,0.35);
}
/* ── Prompt Favorites (指令收藏夹) ── */
/* 视图/范围切换统一走 .seg-toggle（见「分段切换控件」一节） */
.pfav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.pfav-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s;
}
.pfav-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.pfav-card-img-wrap {
  aspect-ratio: 3 / 4;
  background: #f3f4f6;
  overflow: hidden;
}
.pfav-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
/* 横图完整显示不裁切，灰底留白（展示框默认 3:4 竖屏） */
.pfav-card-img-wrap img.pfav-img-contain,
.pfav-row-thumb.pfav-img-contain {
  object-fit: contain;
}
.pfav-card-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.pfav-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pfav-card-prompt {
  font-size: 11px;
  line-height: 1.5;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 6px;
  padding: 5px 7px;
}
/* clamp 放内层：line-clamp 在带 padding 的元素上会把溢出行画进 padding 区 */
.pfav-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 列表视图：一行两列 */
.pfav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 900px) {
  .pfav-list {
    grid-template-columns: 1fr;
  }
}
.pfav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: box-shadow 0.15s;
}
.pfav-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pfav-row-thumb {
  width: 54px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  cursor: zoom-in;
  background: #f3f4f6;
  flex-shrink: 0;
}
.pfav-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pfav-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pfav-row-head .pfav-card-meta {
  flex-shrink: 0;
}
.pfav-row-prompt {
  font-size: 11px;
  line-height: 1.5;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pfav-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.pfav-row-actions .pfav-btn-remove {
  margin-left: 0;
}
@media (max-width: 768px) {
  .pfav-row {
    flex-wrap: wrap;
  }
  .pfav-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
.pfav-card-prompt-empty {
  color: #9ca3af;
  font-style: italic;
}
.pfav-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #9ca3af;
}
.pfav-card-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 2px;
}
.pfav-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #6b7280;
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s;
}
.pfav-btn:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
}
.pfav-btn.copied {
  border-color: #10b981;
  color: #10b981;
}
.pfav-btn-remove {
  margin-left: auto;
  color: #f59e0b;
  border-color: #fcd34d;
}
.pfav-btn-remove:hover {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #d97706;
}
/* Refresh button */
.aig-refresh-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #d1d5db;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  flex-shrink: 0;
}
.aig-refresh-btn:hover {
  color: var(--ai-primary);
  border-color: var(--ai-primary);
  background: var(--ai-primary-bg);
}
.aig-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.aig-refresh-btn.spinning .aig-refresh-icon {
  animation: aig-spin 0.6s linear infinite;
}
@keyframes aig-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Import button */
.aig-import-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #d1d5db;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  flex-shrink: 0;
}
.aig-import-btn:hover {
  color: var(--ai-primary);
  border-color: var(--ai-primary);
  background: var(--ai-primary-bg);
}
.aig-card-info {
  padding: 0.5rem 0.625rem 0.625rem;
}
.aig-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aig-model-tag {
  font-size: 0.6rem;
  color: #818cf8;
  background: rgba(79,70,229,0.12);
  padding: 0 0.3rem;
  border-radius: 3px;
}
.aig-card-meta {
  font-size: 0.625rem;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.aig-card-date {
  font-size: 0.625rem;
  color: #d1d5db;
  margin-top: 0.125rem;
}
/* AI Gallery Tags */
.aig-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.aig-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  font-weight: 500;
  line-height: 1.3;
}
.aig-tag-category {
  background: #dbeafe;
  color: #1e40af;
}
.aig-tag-color {
  background: #fed7aa;
  color: #9a3412;
}
.aig-tag-content {
  background: #d1fae5;
  color: #065f46;
}
.aig-tag-manual {
  background: #fef3c7;
  color: #92400e;
  cursor: pointer;
  transition: background 0.15s;
}
.aig-tag-manual:hover {
  background: #fde68a;
}

.aig-tag-detail-part {
  background: #ddd6fe;
  color: #5b21b6;
  cursor: pointer;
  transition: background 0.15s;
}

.aig-tag-detail-part:hover {
  background: #c4b5fd;
}

/* Active filter chip for manual tags */
.aig-chip-manual_tag {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

/* Card "add tag" shortcut button */
.aig-card-add-tag-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  font-size: 0.6rem;
  color: #9ca3af;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
}
.aig-card-add-tag-btn:hover {
  color: #92400e;
  border-color: #fbbf24;
  background: #fffbeb;
}

/* Batch tag button in batch bar */
.aig-batch-tag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: #d97706;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.aig-batch-tag-btn:hover:not(:disabled) {
  background: #b45309;
}
.aig-batch-tag-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Manual Tag Modal ─────────────────────────────────── */
.manual-tag-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.manual-tag-modal-content {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 100%;
  max-width: 480px;
  margin: 1rem;
  overflow: hidden;
}
.manual-tag-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}
.manual-tag-modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}
.manual-tag-modal-hint {
  font-size: 0.75rem;
  color: #9ca3af;
}
.manual-tag-modal-close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #9ca3af;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.manual-tag-modal-close:hover {
  background: #f3f4f6;
  color: #374151;
}
.manual-tag-modal-body {
  padding: 1.25rem;
}
.manual-tag-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}
.manual-tag-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.manual-tag-input:focus {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217,119,6,0.1);
}
.manual-tag-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f3f4f6;
  background: #f9fafb;
}
.manual-tag-btn-cancel {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.manual-tag-btn-cancel:hover { background: #f3f4f6; }
.manual-tag-btn-confirm {
  padding: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: #d97706;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.manual-tag-btn-confirm:hover:not(:disabled) { background: #b45309; }
.manual-tag-btn-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* Chip editor in edit modal */
.manual-tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
  margin-bottom: 0.75rem;
}
.manual-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
}
.manual-tag-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 0.875rem;
  line-height: 1;
  color: #b45309;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.manual-tag-chip-remove:hover {
  background: rgba(180,83,9,0.15);
  color: #92400e;
}
.manual-tag-add-row {
  display: flex;
  gap: 0.5rem;
}
.manual-tag-add-row .manual-tag-input {
  flex: 1;
}
.manual-tag-btn-add {
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.manual-tag-btn-add:hover {
  background: #fef3c7;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Sidebar Faceted Filter ──────────────────────────── */
.aig-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.aig-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.75rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.aig-sidebar::-webkit-scrollbar { width: 4px; }
.aig-sidebar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.aig-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.25rem 0.5rem;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
}
.aig-sidebar-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}
.aig-clear-all-btn {
  font-size: 0.75rem;
  color: #6366f1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.aig-clear-all-btn:hover { background: #eef2ff; }
.aig-main { flex: 1; min-width: 0; }

/* Filter group */
.aig-filter-group {
  margin-bottom: 0.375rem;
}
.aig-filter-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  border-radius: 6px;
  transition: background 0.15s;
}
.aig-filter-group-toggle:hover { background: #f3f4f6; }
.aig-filter-group-toggle > span:first-child { flex: 1; text-align: left; }
.aig-filter-group-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: #fff;
  background: #6366f1;
  border-radius: 9999px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.aig-filter-arrow {
  transition: transform 0.2s;
  color: #9ca3af;
}
.aig-filter-group.collapsed .aig-filter-arrow {
  transform: rotate(-90deg);
}
.aig-filter-group.collapsed .aig-filter-group-body {
  display: none;
}

/* Filter items */
.aig-filter-group-body {
  padding: 0.125rem 0;
}
.aig-filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
  font-size: 0.8125rem;
  color: #4b5563;
}
.aig-filter-item:hover { background: #f3f4f6; }
.aig-filter-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
}
.aig-filter-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aig-filter-item-count {
  font-size: 0.6875rem;
  color: #9ca3af;
  flex-shrink: 0;
}
.aig-filter-item.hidden-item { display: none; }

.aig-filter-expand-btn {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: #6366f1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem;
  border-radius: 4px;
  margin-top: 0.125rem;
}
.aig-filter-expand-btn:hover { background: #eef2ff; }

/* Filter group search */
.aig-filter-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0 0.25rem 0.375rem;
  padding: 0.375rem 0.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  transition: border-color 0.15s;
}
.aig-filter-search:focus-within { border-color: #a5b4fc; }
.aig-filter-search-icon { flex-shrink: 0; color: #9ca3af; }
.aig-filter-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.75rem;
  background: transparent;
  color: #374151;
  min-width: 0;
}
.aig-filter-search input::placeholder { color: #c0c4cc; }
.aig-filter-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: #e5e7eb;
  color: #6b7280;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.625rem;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}
.aig-filter-search-clear.visible { display: inline-flex; }

/* Active filter chips */
.aig-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.625rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #f3f4f6;
}
.aig-active-filters.hidden { display: none; }
.aig-active-filters-label {
  font-size: 0.75rem;
  color: #9ca3af;
  flex-shrink: 0;
}
.aig-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: default;
  border: 1px solid;
}
.aig-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.1s;
}
.aig-chip-remove:hover { opacity: 1; }
.aig-chip-category { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.aig-chip-category .aig-chip-remove { color: #1d4ed8; }
.aig-chip-color { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.aig-chip-color .aig-chip-remove { color: #059669; }
.aig-chip-content_type { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.aig-chip-content_type .aig-chip-remove { color: #7c3aed; }
.aig-chip-model { background: #fefce8; color: #a16207; border-color: #fde68a; }
.aig-chip-model .aig-chip-remove { color: #a16207; }
.aig-chip-creator { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.aig-chip-creator .aig-chip-remove { color: #be123c; }
.aig-filter-empty { font-size: 0.75rem; color: #9ca3af; padding: 0.375rem 0.25rem; }
.aig-chip-clear-all {
  font-size: 0.75rem;
  color: #6366f1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}
.aig-chip-clear-all:hover { text-decoration: underline; }

/* Mobile filter toggle */
.aig-filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.8125rem;
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
}
.aig-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 99;
}

@media (max-width: 768px) {
  .aig-filter-toggle-btn { display: inline-flex; }
  .aig-sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    z-index: 100;
    border-radius: 0;
    border: none;
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
    transition: left 0.25s ease;
  }
  .aig-sidebar.open { left: 0; }
  .aig-sidebar-overlay.open { display: block; }
  .aig-layout { display: block; }
}
.aig-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
}
.aig-img-missing::after {
  content: '图片已清理';
  font-size: 0.625rem;
  color: #9ca3af;
}
.aig-img-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
}
.aig-img-missing::after {
  content: 'image unavailable';
  font-size: 0.625rem;
  color: #9ca3af;
}

/* ── Batch Mode (批量选择) ──────────────────────────────── */
.aig-batch-toggle-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #d1d5db;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.15s;
  flex-shrink: 0;
}
.aig-batch-toggle-btn:hover {
  color: var(--ai-primary);
  border-color: var(--ai-primary);
  background: var(--ai-primary-bg);
}
.aig-batch-toggle-btn.active {
  color: #fff;
  background: var(--ai-primary);
  border-color: var(--ai-primary);
}

/* Card checkbox */
.aig-card-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.aig-card-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.aig-card-checkmark {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.aig-card-checkbox:hover .aig-card-checkmark {
  border-color: #fff;
  background: rgba(99,102,241,0.4);
}
.aig-card-checkbox input:checked + .aig-card-checkmark {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
}
.aig-card-checkbox input:checked + .aig-card-checkmark::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}

/* Card selected state */
.aig-card.aig-card-selected {
  box-shadow: 0 0 0 2px var(--ai-primary), 0 4px 12px rgba(99,102,241,0.15);
}
.aig-card.aig-card-selected .aig-card-img-wrap img {
  cursor: pointer;
}

/* Batch action bar */
.aig-batch-bar {
  position: sticky;
  bottom: 0;
  z-index: 50;
  margin-top: 1rem;
}
.aig-batch-bar.hidden { display: none; }
.aig-batch-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: #1f2937;
  border-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  color: #fff;
}
.aig-batch-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
}
.aig-batch-count {
  color: #d1d5db;
}
.aig-batch-count strong {
  color: #818cf8;
  font-size: 1rem;
}
.aig-batch-select-all,
.aig-batch-clear {
  background: none;
  border: none;
  color: #818cf8;
  cursor: pointer;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s;
}
.aig-batch-select-all:hover,
.aig-batch-clear:hover {
  background: rgba(129,140,248,0.15);
  color: #a5b4fc;
}
.aig-batch-actions {
  display: flex;
  gap: 0.5rem;
}
.aig-batch-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--ai-primary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.aig-batch-download-btn:hover:not(:disabled) {
  background: var(--ai-primary-dark);
}
.aig-batch-download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.aig-batch-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: #dc2626;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.aig-batch-delete-btn:hover:not(:disabled) {
  background: #b91c1c;
}
.aig-batch-delete-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.aig-batch-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Pagination */
.aig-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.aig-page-btn:hover:not(:disabled) {
  color: #4f46e5;
  border-color: #4f46e5;
  background: #f5f3ff;
}
.aig-page-btn.active {
  color: #fff;
  background: #4f46e5;
  border-color: #4f46e5;
}
.aig-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Prompt detail modal */
.aig-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  padding: 1rem;
}
.aig-prompt-modal-content {
  background: #1f2937;
  border-radius: 0.75rem;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.aig-prompt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #374151;
}
.aig-prompt-modal-header h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #f3f4f6;
  margin: 0;
}
.aig-prompt-modal-close {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 0.25rem;
}
.aig-prompt-modal-close:hover {
  color: #f3f4f6;
}
.aig-prompt-modal-body {
  padding: 1.25rem;
}
.aig-prompt-section {
  margin-bottom: 1rem;
}
.aig-prompt-section:last-child {
  margin-bottom: 0;
}
.aig-prompt-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}
.aig-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #9ca3af;
  background: rgba(156,163,175,0.1);
  border: 1px solid #374151;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: none;
  letter-spacing: normal;
}
.aig-copy-btn:hover {
  color: #e5e7eb;
  background: rgba(156,163,175,0.2);
  border-color: #4b5563;
}
.aig-copy-btn.copied {
  color: #34d399;
  border-color: #34d399;
}
.aig-prompt-value {
  font-size: 0.8125rem;
  color: #e5e7eb;
  line-height: 1.6;
}
.aig-prompt-text {
  background: #111827;
  border: 1px solid #374151;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  max-height: 300px;
  overflow-y: auto;
}
.aig-prompt-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #374151;
}
.aig-prompt-type-tag,
.aig-prompt-size-tag {
  font-size: 0.6rem;
  color: #9ca3af;
  background: rgba(156,163,175,0.12);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
}
.aig-prompt-note {
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
  margin-top: 0.75rem;
}

/* ── AI Recycle Bin ─────────────────────────────────────────── */
.arb-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.arb-empty-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
}
.arb-card {
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.15s;
}
.arb-card:hover {
  border-color: #f87171;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}
.arb-card-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #fef2f2;
}
.arb-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}
.arb-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}
.arb-card:hover .arb-card-overlay {
  opacity: 1;
}
.arb-card-overlay button {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.arb-btn-restore {
  background: #10b981;
  color: #fff;
}
.arb-btn-restore:hover {
  background: #059669;
}
.arb-btn-delete {
  background: #ef4444;
  color: #fff;
}
.arb-btn-delete:hover {
  background: #dc2626;
}
.arb-card-info {
  padding: 0.5rem 0.75rem 0.75rem;
}
.arb-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.arb-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: #9ca3af;
  flex-wrap: wrap;
}
.arb-remaining-days {
  font-size: 0.7rem;
  color: #dc2626;
  font-weight: 500;
  margin-top: 2px;
}
.arb-source-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: white;
}
.arb-source-generated {
  background-color: #3b82f6;
}
.arb-source-person {
  background-color: #a855f7;
}
.arb-source-video {
  background-color: #f59e0b;
}

/* ── AI Video Gallery Styles ─────────────────────────────── */

.aigv-card {
  border-radius: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
}
.aigv-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #d1d5db;
}
.aigv-card-selected {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}
.aigv-card-video-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #f3f4f6;
  overflow: hidden;
}
.aigv-card-video-wrap video,
.aigv-card-video-wrap .aigv-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.aigv-card-video-wrap .aigv-card-thumb-empty,
.aigv-card-video-wrap .aigv-card-thumb-failed {
  background: repeating-linear-gradient(45deg, #f3f4f6, #f3f4f6 10px, #e5e7eb 10px, #e5e7eb 20px);
}
.aigv-card-video-wrap .aig-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  opacity: 0;
  transition: opacity 0.2s;
}
.aigv-card:hover .aig-card-actions {
  opacity: 1;
}
.aigv-card-video-wrap .aig-card-actions button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.aigv-card-video-wrap .aig-card-actions button:hover {
  background: rgba(255,255,255,0.3);
}
.aigv-card-video-wrap .aig-card-actions .aig-action-delete:hover {
  background: rgba(239,68,68,0.7);
}
.aigv-duration {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
}
.aigv-resolution {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(59,130,246,0.85);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  z-index: 5;
  pointer-events: none;
}
.aigv-card-info {
  padding: 0.5rem 0.75rem 0.625rem;
}
.aigv-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.aigv-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* ── Video Preview Modal ─────────────────────────────────── */

.aigv-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aigv-preview-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aigv-preview-close {
  position: absolute;
  top: -40px;
  right: -10px;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
}
.aigv-preview-close:hover {
  color: #f87171;
}
.aigv-preview-video {
  max-width: 90vw;
  max-height: 80vh;
  border-radius: 8px;
}
.aigv-preview-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}

.aigv-preview-prompt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
}
.aigv-preview-prompt-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aigv-preview-prompt-detail {
  flex-shrink: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  color: #a5b4fc;
  background: none;
  border: 1px solid rgba(165,180,252,0.3);
  border-radius: 0.25rem;
  cursor: pointer;
  white-space: nowrap;
}
.aigv-preview-prompt-detail:hover {
  color: #c7d2fe;
  border-color: rgba(199,210,254,0.5);
}

/* ── UI Pagination 通用分页器 ─────────────────────────────── */

.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
}

.ui-pagination-size {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: #6b7280;
}

.ui-pagination-size-select {
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: #374151;
  background: white;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ui-pagination-size-select:hover {
  border-color: #d1d5db;
}

.ui-pagination-size-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.ui-pagination-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ui-pagination-btn {
  height: 30px;
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  color: #374151;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}

.ui-pagination-btn:hover:not(:disabled) {
  background: #f9fafb;
  border-color: #d1d5db;
}

.ui-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-pagination-btn-icon {
  width: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-pagination-info {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  color: #6b7280;
  white-space: nowrap;
}

.ui-pagination-jump {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.ui-pagination-jump-input {
  width: 3rem;
  height: 30px;
  padding: 0 0.375rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: #374151;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;
}

.ui-pagination-jump-input::-webkit-outer-spin-button,
.ui-pagination-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#vs-script-duration::-webkit-outer-spin-button,
#vs-script-duration::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ui-pagination-jump-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.ui-pagination-jump-sep {
  color: #9ca3af;
  font-size: 0.8125rem;
}

.ui-pagination-jump-total {
  color: #6b7280;
  font-size: 0.8125rem;
  min-width: 1.5rem;
}

.ui-pagination-btn-go {
  margin-left: 0.25rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
}

/* ── Archive Detail View ─────────────────────────────────── */

#arc-list-view,
#arc-create-view,
#arc-detail-view {
  width: 100%;
}

/* ── Archive Table Styles ─────────────────────────────────── */

.arc-table {
  border-collapse: collapse;
  table-layout: fixed;
}

.arc-table thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 1;
}

.arc-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
}

.arc-table tbody tr:last-child {
  border-bottom: none;
}

.arc-table tbody tr:hover {
  background-color: #f9fafb;
}

/* ── Archive Edit Form Styles ─────────────────────────────────── */

.arc-edit-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.arc-edit-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.arc-edit-textarea {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #1f2937;
  background: white;
  resize: vertical;
  min-height: 4rem;
  line-height: 1.5;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.arc-edit-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.arc-edit-input::placeholder,
.arc-edit-textarea::placeholder {
  color: #9ca3af;
}

/* ── Archive Detail Tabs ─────────────────────────────────── */

.arc-tab {
  position: relative;
  transition: all 0.2s ease;
}

.arc-tab:hover {
  color: #4f46e5;
}

.arc-tab-panel {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Archive Select Modal ─────────────────────────────────── */

#archive-select-modal .archive-select-item {
  transition: all 0.15s ease;
}

#archive-select-modal .archive-select-item:hover {
  transform: translateX(4px);
}

#archive-select-modal #archive-select-list {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

#archive-select-modal #archive-select-list::-webkit-scrollbar {
  width: 6px;
}

#archive-select-modal #archive-select-list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* Modal animation */
@keyframes animate-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-modal-in {
  animation: animate-modal-in 0.2s ease-out;
}

/* ── Standard AI Spinner (统一 AI 加载动画) ─────────────────── */

.ai-spinner {
  border: 3px solid #e5e7eb;
  border-top-color: var(--ai-primary);
  border-radius: 50%;
  animation: spin var(--ai-duration-spinner) linear infinite;
}

.ai-spinner-sm {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.ai-spinner-md {
  width: 24px;
  height: 24px;
  border-width: 3px;
}

.ai-spinner-lg {
  width: 48px;
  height: 48px;
  border-width: 4px;
}

/* ── Standard AI Skeleton (统一 AI 骨架屏) ─────────────────── */

.ai-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse var(--ai-duration-skeleton) ease-in-out infinite;
  border-radius: 0.25rem;
}

.ai-skeleton-line {
  height: 0.75rem;
}

.ai-skeleton-text {
  height: 1rem;
}

.ai-skeleton-card {
  height: 4rem;
  border-radius: 0.5rem;
}

/* AI Skeleton widths */
.ai-skeleton-w-1\/4 { width: 25%; }
.ai-skeleton-w-1\/3 { width: 33.333%; }
.ai-skeleton-w-1\/2 { width: 50%; }
.ai-skeleton-w-2\/3 { width: 66.666%; }
.ai-skeleton-w-3\/4 { width: 75%; }
.ai-skeleton-w-full { width: 100%; }

/* ── Card Reference Images Section (卡片内参考图区域) ─────────────── */

.card-ref-thumb {
  width: 48px;
  height: 64px;
  border-radius: 0.375rem;
  cursor: pointer;
  border: 1px solid #e5e7eb;
  transition: all 0.15s ease;
  position: relative;
}

.card-ref-thumb:hover {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.card-ref-del {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.card-ref-thumb:hover .card-ref-del {
  display: flex;
}

.card-ref-del:hover {
  background: #ef4444;
}

.card-ref-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.375rem;
}

.card-ref-thumb.ref-expired {
  border-color: #fca5a5;
  cursor: not-allowed;
  box-shadow: none;
}
.card-ref-thumb.ref-expired img { filter: grayscale(1); opacity: 0.4; }
.card-ref-expired-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(239, 68, 68, 0.9);
  color: #fff;
  font-size: 0.6rem;
  line-height: 1.5;
  text-align: center;
  border-radius: 0 0 0.375rem 0.375rem;
  pointer-events: none;
}

.card-ref-empty {
  font-size: 0.7rem;
  color: #d1d5db;
}

.card-ref-thumb-person {
  border-color: #fbbf24;
}

.card-ref-thumb-person:hover {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

/* ── Per-Card Image Selection States ─────────────────────────────── */

.card-ref-thumb.ref-selected {
  border-color: #6366f1;
  border-width: 2px;
  opacity: 1;
}

.card-ref-thumb.ref-unselected {
  opacity: 0.4;
  border-color: #d1d5db;
}

.card-ref-thumb.ref-unselected:hover {
  opacity: 0.7;
  border-color: #9ca3af;
}

.card-ref-thumb.ref-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  border-color: #e5e7eb;
}

.card-ref-thumb.ref-disabled:hover {
  border-color: #e5e7eb;
  box-shadow: none;
}

/* 场景参考：第三类参考图，用青色区别于产品（靛蓝）与人物（琥珀） */
.card-ref-thumb-scene { border-color: #5eead4; }
.card-ref-thumb-scene:hover { border-color: #14b8a6; box-shadow: 0 0 0 2px rgba(20, 184, 166, .15); }
.card-ref-thumb.card-ref-thumb-scene.ref-selected { border-color: #14b8a6; border-width: 2px; opacity: 1; }
.card-ref-add-scene { border-color: #99f6e4; color: #0d9488; }
.card-ref-add-scene:hover { border-color: #14b8a6; color: #0f766e; background: #f0fdfa; }
.card-ref-thumb.card-ref-thumb-person.ref-selected {
  border-color: #f59e0b;
  border-width: 2px;
  opacity: 1;
}

/* ── Person Selector Modal (人物选择弹窗) ─────────────────────────── */

.person-select-tip {
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.person-select-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.person-select-item {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}

.person-select-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-select-item:hover {
  border-color: var(--primary-300);
}

.person-select-item.selected {
  border-color: var(--primary-500);
}

.person-select-check {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--primary-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s ease;
}

.person-select-item.selected .person-select-check {
  opacity: 1;
  transform: scale(1);
}

.person-select-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.25rem 0.375rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: #fff;
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.person-select-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: #9ca3af;
  font-size: 0.85rem;
}

/* ── AI 小工具模块 (AI Tools Module) ───────────────────────────────── */

.ai-tools-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

.ai-tools-subtab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-tools-subtab:hover {
  color: #374151;
}

.ai-tools-subtab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}

.subtab-badge-pro {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  vertical-align: middle;
  margin-left: 2px;
  letter-spacing: 0.5px;
  position: relative;
  top: -1px;
}

/* ── Dress Swap (模特换装) ─────────────────────────────────────── */

.ds-main-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
  min-height: 600px;
}

@media (max-width: 900px) {
  .ds-main-layout {
    grid-template-columns: 1fr;
  }
}

/* 左侧面板 */
.ds-left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 右侧面板 */
.ds-right-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ds-upload-section,
.ds-person-section {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.ds-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.75rem;
}

.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ds-selected-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.ds-selected-count:empty {
  display: none;
}

/* Upload dropzone */
.ds-upload-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 0.75rem;
  padding: 2rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.ds-upload-dropzone:hover,
.ds-upload-dropzone.dragover {
  border-color: #6366f1;
  background: #f5f3ff;
}

.ds-upload-icon {
  margin-bottom: 0.75rem;
}

.ds-upload-icon svg {
  margin: 0 auto;
}

.ds-upload-text {
  font-size: 0.9rem;
  color: #4b5563;
  margin-bottom: 0.25rem;
}

.ds-upload-link {
  color: #6366f1;
  font-weight: 500;
  cursor: pointer;
}

.ds-upload-link:hover {
  text-decoration: underline;
}

.ds-upload-hint {
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Product image grid */
.ds-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.ds-image-card {
  position: relative;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  cursor: pointer;
  transition: all 0.15s;
}

.ds-image-card:hover {
  border-color: #c7d2fe;
}

.ds-image-card.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.ds-image-card-check {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.9);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.15s;
  z-index: 1;
}

.ds-image-card.selected .ds-image-card-check {
  opacity: 1;
  transform: scale(1);
}

.ds-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-image-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.ds-image-card:hover .ds-image-del {
  opacity: 1;
}

/* Person filters */
.ds-person-filters {
  display: flex;
  gap: 0.5rem;
}

.ds-filter-select {
  font-size: 0.75rem;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: #f9fafb;
  outline: none;
  cursor: pointer;
}

.ds-filter-select:focus {
  border-color: #6366f1;
}

/* Person grid */
.ds-person-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.ds-person-grid::-webkit-scrollbar {
  width: 4px;
}

.ds-person-grid::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.ds-person-card {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  background: #f9fafb;
}

.ds-person-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.ds-person-card.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.ds-person-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

.ds-person-card-check {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.ds-person-card.selected .ds-person-card-check {
  opacity: 1;
}

.ds-person-name {
  font-size: 0.625rem;
  color: #6b7280;
  text-align: center;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ds-person-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
}

/* ====== Person Picker Modal ====== */
.pp-card {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #f9fafb;
  contain: layout paint;
}
.pp-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}
.pp-card.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pp-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: #fff;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  color: white;
  transition: background-color 0.15s, border-color 0.15s;
}
.pp-card.selected .pp-check {
  background: #6366f1;
  border-color: #6366f1;
}
.pp-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f3f4f6;
}
.pp-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-zoom {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: pointer;
}
.pp-card:hover .pp-zoom { opacity: 1; }
.pp-info {
  padding: 8px 10px;
}
.pp-name {
  font-size: 13px;
  font-weight: 500;
  color: #1f2937;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}
.pp-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 3px;
  white-space: nowrap;
}
.pp-page-btn {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.pp-page-btn:hover:not(:disabled) { background: #f9fafb; }
.pp-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Person thumbs strip (used by DressSwap / PromptGen / DetailPlanner after selection) */
.pp-thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pp-thumb-item {
  position: relative;
  width: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
}
.pp-thumb-item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.pp-thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.pp-thumb-item:hover .pp-thumb-remove { opacity: 1; }
.pp-thumb-name {
  font-size: 9px;
  color: #6b7280;
  text-align: center;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Config bar */
.ds-config-bar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
}

.ds-config-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.ds-config-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.ds-config-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ds-config-label {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}

.ds-config-select {
  font-size: 0.8rem;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: #fff;
  outline: none;
  cursor: pointer;
}

.ds-config-select:focus {
  border-color: #6366f1;
}

.ds-task-summary {
  flex: 1;
  text-align: center;
}

.ds-task-count {
  font-size: 0.85rem;
  color: #6b7280;
}

.ds-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: #6366f1;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.ds-start-btn:hover:not(:disabled) {
  background: #4f46e5;
}

.ds-start-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Progress bar */
.ds-progress-wrapper {
  padding: 1rem;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
}

.ds-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ds-progress-label {
  font-size: 0.85rem;
  color: #374151;
  font-weight: 500;
}

.ds-progress-text {
  font-size: 0.85rem;
  color: #6366f1;
  font-weight: 600;
}

.ds-progress-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.ds-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Results section */
.ds-results-wrapper {
  flex: 1;
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}

.ds-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ds-results-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #9ca3af;
}

.ds-download-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.ds-download-all-btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

/* Result grid */
.ds-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.ds-result-card {
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #fff;
  transition: box-shadow 0.15s;
}

.ds-result-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ds-result-card.failed {
  border-color: #fecaca;
}

.ds-result-card.loading {
  aspect-ratio: 3/4;
}

.ds-result-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  background: #f3f4f6;
  overflow: hidden;
}

.ds-result-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}

.ds-result-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.ds-result-placeholder.loading {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.ds-result-placeholder.pending {
  color: #9ca3af;
  font-size: 0.75rem;
}

.ds-result-placeholder.error {
  color: #ef4444;
  font-size: 0.75rem;
  padding: 1rem;
  text-align: center;
}

.ds-result-meta {
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  overflow: hidden;
}

.ds-result-label {
  font-size: 0.7rem;
  color: #6b7280;
  min-width: 0;
  overflow: hidden;
}

.ds-meta-tags {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  overflow: hidden;
}

.ds-meta-tag {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.ds-meta-tag.model {
  background: #ede9fe;
  color: #7c3aed;
}

.ds-meta-tag.size {
  background: #e0f2fe;
  color: #0369a1;
}

.ds-meta-tag.res {
  background: #fef3c7;
  color: #d97706;
}

.ds-result-actions {
  display: flex;
  gap: 0.25rem;
}

.ds-result-btn {
  width: 24px;
  height: 24px;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.ds-result-btn:hover {
  background: #f3f4f6;
  color: #6366f1;
}

.ds-result-btn.retry {
  color: #f59e0b;
}

.ds-result-btn.retry:hover {
  background: #fef3c7;
  color: #d97706;
}

/* ── Text Overlay Modal (旧版样式已迁移至下方专业布局) ─────────────── */

/* 位置选择网格 */
.text-position-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
}

.text-position-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.text-position-option:hover {
  border-color: #c7d2fe;
  background: #f5f3ff;
}

.text-position-option input[type="radio"] {
  display: none;
}

.text-position-option.selected {
  border-color: #6366f1;
  background: #eef2ff;
}

.text-position-option.selected span {
  color: #6366f1;
  font-weight: 600;
}

.text-position-option span {
  font-size: 0.75rem;
  color: #6b7280;
}

/* ── Prompt Gen (指令生图) ─────────────────────────────────────────── */

.pg-prompt-section {
  background: #fff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 1rem;
}

.pg-prompt-textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-size: 0.9rem;
  color: #374151;
  resize: vertical;
  min-height: 80px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  line-height: 1.5;
}

.pg-prompt-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.pg-prompt-textarea::placeholder {
  color: #9ca3af;
}

/* === PromptGen 快速插入按钮 === */
.pg-prompt-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pg-prompt-control-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.pg-prompt-actions-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}
.pg-prompt-actions-hint {
  font-size: 0.75rem;
  color: #9ca3af;
}
.pg-insert-btn {
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s;
}
.pg-insert-btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

/* === PromptGen 已选素材条 === */
.pg-selected-materials {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}
.pg-materials-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.pg-materials-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
}
.pg-materials-hint {
  font-size: 0.65rem;
  color: #9ca3af;
}
.pg-materials-strip {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.pg-materials-strip::-webkit-scrollbar { height: 3px; }
.pg-materials-strip::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

.pg-material-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.pg-material-item:hover { transform: translateY(-1px); }
.pg-material-thumb {
  width: 48px;
  height: 48px;
  border-radius: 0.375rem;
  object-fit: cover;
  border: 2px solid transparent;
}
.pg-material-item[data-type="product"] .pg-material-thumb {
  border-color: #7dd3fc;
}
.pg-material-item[data-type="person"] .pg-material-thumb {
  border-color: #d8b4fe;
}
.pg-material-item[data-type="scene"] .pg-material-thumb {
  border-color: #fcd34d;
}
.pg-material-tag {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1rem 0.375rem;
  border-radius: 9999px;
  white-space: nowrap;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-material-item[data-type="product"] .pg-material-tag {
  color: #0284c7;
  background: #e0f2fe;
}
.pg-material-item[data-type="person"] .pg-material-tag {
  color: #9333ea;
  background: #f3e8ff;
}
.pg-material-item[data-type="scene"] .pg-material-tag {
  color: #d97706;
  background: #fef3c7;
}
.pg-material-tag.loading {
  color: #9ca3af;
  background: #f3f4f6;
  animation: pg-tag-pulse 1.5s ease-in-out infinite;
}
.pg-person-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 600;
  color: #fff;
  background: #a855f7;
  padding: 0 0.25rem;
  border-radius: 3px;
  margin-left: 2px;
  vertical-align: middle;
}
@keyframes pg-tag-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
}
.pg-materials-divider {
  width: 1px;
  align-self: stretch;
  background: #e5e7eb;
  flex-shrink: 0;
  margin: 0 0.125rem;
}

/* === PromptGen AI创意区域 === */
.pg-creative-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.pg-creative-gen-btn:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
.pg-creative-gen-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pg-creative-gen-btn svg { width: 1rem; height: 1rem; }

/* === 多指令输入框容器 === */
.pg-prompts-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pg-prompt-item {
  position: relative;
}
.pg-prompt-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.pg-prompt-index {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6366f1;
}
.pg-prompt-clear-btn {
  font-size: 0.7rem;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.1rem 0.25rem;
}
.pg-prompt-clear-btn:hover { color: #ef4444; }

/* === 产品补充描述 === */
.pg-product-desc-section { margin-top: 0.5rem; }
.pg-product-desc-input {
  width: 100%;
  padding: 0.375rem 0.625rem;
  font-size: 0.8rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  outline: none;
  box-sizing: border-box;
}
.pg-product-desc-input:focus {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

.pg-results-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #9ca3af;
}

/* ── Clothing Color Change (服装换色) ────────────────────────────────── */

.cc-color-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cc-color-tab {
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}

.cc-color-tab:hover {
  background: #e5e7eb;
}

.cc-color-tab.active {
  color: #fff;
  background: #6366f1;
  border-color: #6366f1;
}

.cc-color-panel {
  padding: 1rem 0;
}

.cc-color-picker-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cc-wheel-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 1rem;
}

#cc-color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  cursor: crosshair;
}

.cc-wheel-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.3);
  pointer-events: none;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.cc-lightness-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cc-lightness-label,
.cc-history-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  min-width: 3em;
}

.cc-lightness-slider {
  flex: 1;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
  background: linear-gradient(to right, #000, #808080, #fff);
  outline: none;
  cursor: pointer;
}

.cc-lightness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

.cc-lightness-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d1d5db;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}

.cc-color-result-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.cc-color-hex-input {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;
  font-size: 0.95rem;
  font-weight: 600;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.4rem 0.6rem;
  width: 90px;
  text-transform: uppercase;
}

.cc-color-hex-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
}

.cc-history-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cc-history-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cc-history-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.cc-history-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.cc-color-input {
  width: 60px;
  height: 60px;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  padding: 0;
  background: none;
}

.cc-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.cc-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 0.375rem;
}

.cc-color-preview {
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  border: 2px solid #e5e7eb;
}

.cc-color-hex {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, monospace;
  font-size: 1rem;
  font-weight: 600;
  color: #374151;
}

.cc-image-dropzone {
  padding: 1.5rem !important;
}

.cc-extracted-color {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

.cc-clear-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #fee2e2;
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: all 0.15s;
}

.cc-clear-btn:hover {
  background: #fecaca;
}

.cc-results-empty,
.fs-results-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #9ca3af;
}

/* Result loading state */
.ds-result-loading {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
}

.ds-result-error {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fef2f2;
  padding: 1rem;
  text-align: center;
}

/* ==================== AI Gallery Import Button ==================== */

.ds-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.ds-section-header-row .ds-section-title {
  margin-bottom: 0;
}

.ai-gallery-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-gallery-import-btn:hover {
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.ai-gallery-import-btn:active {
  background: #c7d2fe;
}

.ai-gallery-import-btn svg {
  flex-shrink: 0;
}

/* ==================== AI Gallery Modal ==================== */

.ai-gallery-dialog {
  animation: ai-gallery-slide-up 0.2s ease-out;
}

@keyframes ai-gallery-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#ai-gallery-grid {
  min-height: 300px;
}

.ai-gallery-item {
  position: relative;
  border-radius: 0.5rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  background: #f3f4f6;
  contain: layout paint;
}

.ai-gallery-item:hover {
  border-color: #a5b4fc;
}

.ai-gallery-item.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.ai-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-gallery-item .ai-gallery-check {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #6366f1;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
}

.ai-gallery-item.selected .ai-gallery-check {
  display: flex;
}

.ai-gallery-item .ai-gallery-check svg {
  width: 0.75rem;
  height: 0.75rem;
  color: white;
}

.ai-gallery-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #9ca3af;
}

.ai-gallery-empty svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

/* AI Gallery 左侧筛选面板 */
.ai-gallery-sidebar {
  background: #fafafa;
}

.ai-gallery-checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #374151;
}

.ai-gallery-checkbox-list label:hover {
  color: #6366f1;
}

.ai-gallery-checkbox-list input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #6366f1;
  flex-shrink: 0;
}

.ai-gallery-checkbox-list .count {
  font-size: 0.7rem;
  color: #9ca3af;
  margin-left: auto;
}

/* AI Gallery 图片卡片增强 */
.ai-gallery-item .ai-gallery-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #f3f4f6;
  border-radius: 0.375rem;
}

.ai-gallery-item .ai-gallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-gallery-item .ai-gallery-zoom {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.85);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.ai-gallery-item:hover .ai-gallery-zoom {
  opacity: 1;
}

.ai-gallery-item .ai-gallery-zoom:hover {
  background: rgba(99, 102, 241, 1);
}

.ai-gallery-item .ai-gallery-zoom svg {
  width: 12px;
  height: 12px;
}

.ai-gallery-item .ai-gallery-meta {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
}

.ai-gallery-item:hover .ai-gallery-meta {
  opacity: 1;
}

.ai-gallery-item .ai-gallery-meta span {
  font-size: 0.6rem;
  padding: 2px 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  white-space: nowrap;
}

/* ── AI Gallery 双来源 Tab 切换 ─────────────────────────────────── */

/* AI 图库弹窗的来源切换：样式统一走 .seg-toggle，这里不再单独定义 */

/* ── 产品档案列表项 ─────────────────────────────────────────────── */

.archive-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.archive-item:hover {
  border-color: #c7d2fe;
  background: #fafaff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.08);
}

.archive-item:hover .archive-item-arrow {
  color: #6366f1;
  transform: translateX(2px);
}

.archive-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
}

.archive-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.archive-item-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
}

.archive-item-info {
  flex: 1;
  min-width: 0;
}

.archive-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.25rem;
}

.archive-item-sn {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.025em;
}

.archive-item-arrow {
  color: #d1d5db;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* 选中状态 */
.archive-item.active {
  border-color: #6366f1;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}

.archive-item.active .archive-item-arrow {
  color: #6366f1;
}

/* ── 档案侧边栏 ─────────────────────────────────────────────── */

.archive-sidebar {
  background: #fafbfc;
  border-right: 1px solid #e5e7eb;
}

.archive-sidebar .archive-item {
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.archive-sidebar .archive-item:last-child {
  margin-bottom: 0;
}

/* ── 档案详情头部 ─────────────────────────────────────────────── */

.archive-detail-header {
  background: rgba(249, 250, 251, 0.5);
}

#archive-back-btn {
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: background 0.15s ease;
}

#archive-back-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ── 图片卡片放大按钮 ─────────────────────────────────────────── */

.ds-image-zoom {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.85);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
}

.ds-image-card:hover .ds-image-zoom,
.ds-person-card:hover .ds-image-zoom {
  opacity: 1;
}

.ds-image-zoom:hover {
  background: rgba(99, 102, 241, 1);
}

/* ── Text Overlay Dialog (添加文案 - 专业布局) ─────────────────────────── */

.text-overlay-dialog {
  display: flex;
  gap: 1.5rem;
  min-height: 480px;
  padding: 0;
}

.text-overlay-left {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.text-overlay-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.text-overlay-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-overlay-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 0.75rem;
  padding: 0.75rem;
  min-height: 320px;
}

.text-overlay-preview img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  object-fit: contain;
}

.text-overlay-preview-tips {
  text-align: center;
  padding: 0.5rem 0;
}

/* Sections */
.text-overlay-section {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.text-overlay-section-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.text-overlay-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.375rem 0;
  margin: -0.375rem 0;
  border-radius: 0.375rem;
  transition: background 0.15s;
}

.text-overlay-section-header:hover {
  background: rgba(0, 0, 0, 0.03);
}

.text-overlay-section-header .text-overlay-section-title {
  margin-bottom: 0;
}

/* Input groups */
.text-overlay-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.text-overlay-input-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4b5563;
}

.text-overlay-required {
  color: #ef4444;
  margin-left: 2px;
}

.text-overlay-input-group input[type="text"] {
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.text-overlay-input-group input[type="text"]:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.text-overlay-input-group select {
  padding: 0.625rem 0.875rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  outline: none;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}

.text-overlay-input-group select:focus {
  border-color: #6366f1;
}

.text-overlay-char-count {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Row layout */
.text-overlay-row {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

.text-overlay-row .flex-1 {
  flex: 1;
  min-width: 0;
}

/* Position grid - symbol style */
.text-position-grid {
  display: flex;
  gap: 0.5rem;
}

.text-position-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
}

.text-position-option:hover {
  border-color: #c7d2fe;
  background: #f5f3ff;
}

.text-position-option input[type="radio"] {
  display: none;
}

.text-position-option span {
  font-size: 1.125rem;
  color: #6b7280;
  line-height: 1;
}

.text-position-option.selected {
  border-color: #6366f1;
  background: #eef2ff;
}

.text-position-option.selected span {
  color: #6366f1;
}

/* Custom prompt area */
.text-overlay-custom-prompt {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed #e5e7eb;
}

.text-overlay-custom-prompt.hidden {
  display: none;
}

.text-overlay-custom-prompt textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.875rem;
  font-size: 0.875rem;
  color: #374151;
  resize: vertical;
  min-height: 140px;
  outline: none;
  font-family: inherit;
  line-height: 1.6;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.text-overlay-custom-prompt textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.text-overlay-custom-prompt textarea::placeholder {
  color: #9ca3af;
}

.text-overlay-prompt-tips {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.625rem;
}

.text-overlay-prompt-tips button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.text-overlay-prompt-tips button:hover {
  text-decoration: underline;
}

/* Arrow rotation animation */
#custom-prompt-arrow {
  transition: transform 0.2s ease;
}

/* Responsive */
@media (max-width: 768px) {
  .text-overlay-dialog {
    flex-direction: column;
    gap: 1rem;
  }
  
  .text-overlay-left {
    flex: none;
  }
  
  .text-overlay-preview {
    min-height: 200px;
  }
  
  .text-overlay-right {
    min-width: 0;
  }
  
  .text-overlay-row {
    flex-direction: column;
    gap: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════
   Virtual Model (虚拟模特生成) Styles
   ══════════════════════════════════════════════════════════════ */

/* 主布局 */
.vm-main-layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 1.5rem;
  min-height: 500px;
}

@media (max-width: 900px) {
  .vm-main-layout {
    grid-template-columns: 1fr;
  }
}

/* 左侧面板 */
.vm-left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 右侧面板 */
.vm-right-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 区块 */
.vm-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.vm-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
}

/* 单选按钮组 */
.vm-radio-group {
  display: flex;
  gap: 1.5rem;
}

/* 国家/种族选择组（支持换行） */
.vm-ethnicity-group {
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.vm-radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: #4b5563;
}

.vm-radio {
  width: 1rem;
  height: 1rem;
  accent-color: #6366f1;
}

/* 参数网格 */
.vm-params-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vm-param-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.vm-param-label {
  font-size: 0.75rem;
  color: #6b7280;
}

.vm-select,
.vm-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.15s;
}

.vm-select:focus,
.vm-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.vm-input {
  width: 100%;
}

/* 着装预设网格 */
.vm-clothing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.vm-clothing-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #4b5563;
  transition: all 0.15s;
}

.vm-clothing-option:hover {
  border-color: #c7d2fe;
  background: #f5f3ff;
}

.vm-clothing-option:has(input:checked) {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
}

.vm-clothing-custom {
  grid-column: 1 / -1;
}

.vm-custom-input-wrapper {
  margin-top: 0.75rem;
}

.vm-custom-input {
  width: 100%;
}

/* 脸部干预区域 */
.vm-optional-tag {
  font-size: 0.625rem;
  font-weight: 400;
  color: #9ca3af;
  margin-left: 0.375rem;
}

.vm-section-hint {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.vm-face-ref-area {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.vm-face-ref-preview {
  position: relative;
  width: 80px;
  height: 80px;
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
  background: #f9fafb;
}

.vm-face-ref-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9ca3af;
  font-size: 0.625rem;
  gap: 0.25rem;
}

.vm-face-ref-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vm-face-ref-clear {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.vm-face-ref-clear:hover {
  background: rgba(0, 0, 0, 0.8);
}

.vm-face-ref-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vm-face-ref-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}

.vm-face-ref-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.vm-face-desc-wrapper {
  position: relative;
}

.vm-textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.8125rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
}

.vm-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.vm-char-count {
  position: absolute;
  right: 0.5rem;
  bottom: 0.375rem;
  font-size: 0.625rem;
  color: #9ca3af;
}

/* 视图选择 */
.vm-views-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vm-views-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vm-views-label {
  font-size: 0.8125rem;
  color: #6b7280;
  min-width: 3rem;
}

.vm-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #4b5563;
}

.vm-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: #6366f1;
}

/* 配置栏 */
.vm-config-bar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.vm-config-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.vm-config-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.vm-config-label {
  font-size: 0.75rem;
  color: #6b7280;
}

.vm-config-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
}

.vm-config-select:focus {
  border-color: #6366f1;
}

.vm-config-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.vm-task-info {
  font-size: 0.8125rem;
  color: #6b7280;
}

.vm-task-info span {
  font-weight: 600;
  color: #6366f1;
}

.vm-generate-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.vm-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.vm-generate-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 进度条 */
.vm-progress-wrapper {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.vm-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.vm-progress-label {
  font-size: 0.8125rem;
  color: #374151;
  font-weight: 500;
}

.vm-progress-text {
  font-size: 0.8125rem;
  color: #6b7280;
}

.vm-progress-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.vm-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* 结果区域 */
.vm-results-wrapper {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  flex: 1;
}

.vm-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.vm-results-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vm-sync-hint {
  font-size: 0.75rem;
  color: #10b981;
}

.vm-download-all-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.vm-download-all-btn:hover {
  background: #e5e7eb;
}

/* 结果网格 */
.vm-result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 1200px) {
  .vm-result-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .vm-result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 结果卡片 */
.vm-result-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  transition: all 0.2s;
}

.vm-result-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.vm-result-card.success {
  border-color: #10b981;
}

.vm-result-card.failed {
  border-color: #ef4444;
}

.vm-result-img-wrap {
  aspect-ratio: 3 / 4;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vm-result-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.vm-result-img-wrap img:hover {
  transform: scale(1.02);
}

/* 占位符状态 */
.vm-result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #9ca3af;
  font-size: 0.8125rem;
}

.vm-result-placeholder.pending {
  color: #9ca3af;
  gap: 0.5rem;
}

.vm-pending-icon {
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
}

.vm-result-placeholder.loading {
  position: relative;
  gap: 0.75rem;
}

.vm-loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: vm-spin 0.8s linear infinite;
}

.vm-loading-text {
  color: #6366f1;
  font-size: 0.875rem;
  font-weight: 500;
  animation: vm-pulse 1.5s ease-in-out infinite;
}

@keyframes vm-spin {
  to { transform: rotate(360deg); }
}

@keyframes vm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.vm-result-placeholder.error {
  color: #ef4444;
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
}

/* 元信息区 */
.vm-result-meta {
  padding: 0.75rem;
  border-top: 1px solid #f3f4f6;
}

.vm-result-label {
  font-size: 0.8125rem;
  color: #374151;
  font-weight: 500;
}

.vm-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.vm-meta-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: #f3f4f6;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  color: #6b7280;
}

.vm-meta-tag.type {
  background: #eef2ff;
  color: #4f46e5;
}

.vm-meta-tag.model {
  background: #f0fdf4;
  color: #16a34a;
}

.vm-meta-tag.synced {
  background: #ecfdf5;
  color: #059669;
}

.vm-result-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f3f4f6;
}

.vm-result-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: #f3f4f6;
  border: none;
  border-radius: 0.375rem;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.vm-result-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

.vm-result-btn.retry {
  background: #fef2f2;
  color: #dc2626;
}

.vm-result-btn.retry:hover {
  background: #fee2e2;
  color: #b91c1c;
}

/* 基准图按钮 */
.vm-result-btn.active {
  background: #fef3c7;
  color: #d97706;
}

.vm-result-btn.active:hover {
  background: #fde68a;
  color: #b45309;
}

/* 基准图标签 */
.vm-meta-tag.reference {
  background: #fef3c7;
  color: #d97706;
}

/* 基准图指示器 */
.vm-reference-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}

.vm-reference-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #92400e;
}

.vm-reference-preview img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 0.25rem;
  cursor: pointer;
}

.vm-ref-clear-btn {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: none;
  background: #fcd34d;
  color: #92400e;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vm-ref-clear-btn:hover {
  background: #fbbf24;
}

/* 空状态 */
.vm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════════
   Video Studio (视频工作室) Styles
   ══════════════════════════════════════════════════════════════ */

/* 二级标签栏 */
.vs-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

.vs-subtab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.vs-subtab:hover:not(:disabled) {
  color: #374151;
}

.vs-subtab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}

.vs-subtab:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

/* 主布局：左侧固定340px，右侧自适应 */
.vs-main-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
  min-height: 600px;
}

@media (max-width: 900px) {
  .vs-main-layout {
    grid-template-columns: 1fr;
  }
}

/* 左侧面板 */
.vs-left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 右侧面板 */
.vs-right-panel {
  display: flex;
  flex-direction: column;
}

/* 模式面板（内部区块容器） */
.vs-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 区块样式 */
.vs-section {
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e5e7eb;
}

.vs-section-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

/* 选择框 */
.vs-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 0.875rem;
  color: #374151;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vs-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.vs-select-sm {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 0.8125rem;
  color: #374151;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vs-select-sm:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 文本域 */
.vs-textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 0.875rem;
  color: #374151;
  resize: none;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.vs-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 素材模式 tab（复用 ps-garment-tab 风格） */
.vs-media-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.75rem;
}
.vs-media-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.vs-media-tab:hover { color: #374151; }
.vs-media-tab.active {
  color: #6366f1;
  font-weight: 600;
}
.vs-media-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #6366f1;
}
.vs-media-tab-content { min-height: 60px; }

/* 自定义下拉菜单 */
.vs-custom-dropdown { position: relative; }
.vs-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 40;
  padding: 0.25rem 0;
  max-height: 240px;
  overflow-y: auto;
}
.vs-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.vs-dropdown-item:hover { background: #f3f4f6; }
.vs-dropdown-item.active { color: #6366f1; font-weight: 500; }
.vs-dropdown-item.manage { color: #6b7280; border-top: 1px solid #f3f4f6; }
.vs-dropdown-item .vs-fw-badge {
  font-size: 0.6rem;
  color: #9ca3af;
  background: #f3f4f6;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  margin-left: 0.5rem;
}

/* AI 脚本卡片 */
.vs-script-card {
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.vs-script-card:hover {
  border-color: #a5b4fc;
  background: rgba(99, 102, 241, 0.02);
}
.vs-script-card.selected {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.04);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.vs-script-textarea.vs-textarea {
  resize: vertical;
}

/* 上传区域 */
.vs-upload-zone {
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  padding: 1.5rem;
  text-center;
  cursor: pointer;
  transition: all 0.15s;
}

.vs-upload-zone:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.02);
}

/* 生成按钮 */
.vs-mode-panel > .vs-generate-btn {
  margin-top: 0.25rem;
}

.vs-generate-btn {
  width: 100%;
  padding: 0.875rem 1rem;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.vs-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.vs-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 多镜头双按钮组 */
.vs-multi-btn-group {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.vs-multi-btn-group .vs-generate-btn {
  flex: 1;
  padding: 0.75rem 0.5rem;
  font-size: 0.875rem;
}

.vs-btn-merged {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.vs-btn-merged:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.vs-btn-independent {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.vs-btn-independent:hover:not(:disabled) {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 卡片链（Chain Cards）· 单镜头接龙模式                              */
/* 一张卡 = 一次生成；源视频自动串联到上一张的产物                      */
/* ═══════════════════════════════════════════════════════════════ */

.vs-chain-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 脚本大容器 · 每条脚本一个 frame */
.vs-script-frame {
  border: 1.5px solid #d1d5db;
  border-radius: 0.875rem;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem;
  transition: border-color 0.15s;
}
.vs-script-frame:hover { border-color: #a5b4fc; }

.vs-script-frame-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed #e5e7eb;
}
.vs-script-frame-tag {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: #4f46e5;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
}
.vs-script-frame-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: #1f2937;
}
.vs-script-frame-meta {
  font-size: 0.6875rem;
  color: #6b7280;
}
.vs-script-frame-spacer { flex: 1; }

.vs-script-frame-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vs-script-frame-footer {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px dashed #e5e7eb;
  flex-wrap: wrap;
}
.vs-script-frame-selectall {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: #6b7280;
  font-weight: 500;
  cursor: pointer;
}
.vs-script-frame-selectall input[type="checkbox"] {
  width: 0.8125rem;
  height: 0.8125rem;
  accent-color: #4f46e5;
}

/* 全局工具行（全选 / 新增分支 / 跑选中） */
.vs-chain-toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.vs-chain-toolbar-spacer { flex: 1; min-width: 10px; }
.vs-chain-selectall {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #374151;
  cursor: pointer;
  font-weight: 500;
}
.vs-chain-selectall input[type="checkbox"] {
  width: 0.9375rem;
  height: 0.9375rem;
  accent-color: #4f46e5;
}
.vs-chain-selected-count {
  font-size: 0.6875rem;
  color: #6b7280;
  font-weight: 500;
}

/* 段级复选框 · 嵌在 head 行里，和段号 tag 同一行 */
.vs-chain-card-checkbox {
  width: 0.9375rem;
  height: 0.9375rem;
  accent-color: #4f46e5;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.vs-chain-card {
  display: flex;
  gap: 0.875rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  transition: border-color 0.15s, background 0.15s;
}

/* 选中态的卡片：加淡淡的强调边 */
.vs-chain-card:has(.vs-chain-card-checkbox:checked) {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.vs-chain-card:hover { border-color: #c7d2fe; }
.vs-chain-card.ready { border-color: #bfdbfe; }
.vs-chain-card.blocked { background: #eff6ff; border-color: #60a5fa; }
.vs-chain-card.generating { background: #fffbeb; border-color: #fcd34d; }
.vs-chain-card.failed { background: #fef2f2; border-color: #fca5a5; }

/* 缩略位 · 9:16 默认，inline style 覆盖为真实 aspect_ratio */
.vs-chain-thumb {
  flex-shrink: 0;
  align-self: center;
  width: 72px;
  aspect-ratio: 9 / 16;
  border-radius: 0.5rem;
  background: #111827;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: #fff;
}

.vs-chain-thumb video,
.vs-chain-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vs-chain-thumb-label {
  font-size: 9px;
  font-weight: 600;
}

.vs-chain-thumb.empty {
  background: #fff;
  color: #9ca3af;
  border: 1.5px dashed #d1d5db;
}
.vs-chain-thumb.generating { background: #fde68a; color: #b45309; }
.vs-chain-thumb.queued { background: #e5e7eb; color: #4b5563; }
.vs-chain-thumb.ready { background: #dbeafe; color: #2563eb; }
.vs-chain-thumb.blocked { background: #bfdbfe; color: #1e40af; }
.vs-chain-thumb.failed { background: #fee2e2; color: #dc2626; }

.vs-chain-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vs-chain-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vs-chain-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.6875rem;
  font-weight: 700;
}

.vs-chain-meta {
  font-size: 0.6875rem;
  color: #6b7280;
  flex: 1;
}

.vs-chain-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
}

.vs-chain-status.done { background: #d1fae5; color: #047857; }
.vs-chain-status.generating { background: #fbbf24; color: #78350f; }
.vs-chain-status.queued { background: #e5e7eb; color: #374151; }
.vs-chain-status.ready { background: #bfdbfe; color: #1e40af; }
.vs-chain-status.blocked { background: #bfdbfe; color: #1e40af; }
.vs-chain-status.failed { background: #fecaca; color: #991b1b; }
.vs-chain-status.empty { background: #f3f4f6; color: #6b7280; }

.vs-chain-prompt {
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #f9fafb;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #374151;
  resize: none;
  min-height: 52px;
  overflow-y: hidden;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.vs-chain-prompt:focus {
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

.vs-chain-prompt::placeholder { color: #9ca3af; }

.vs-chain-actions {
  display: flex;
  gap: 0.375rem;
  align-items: center;
  flex-wrap: wrap;
}

/* 对齐项目既有 .vs-btn-sm / .vs-btn-danger / .vs-btn-outline 规范 */
.vs-chain-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.vs-chain-btn:hover:not(:disabled):not(.primary):not(.danger) {
  background: #e5e7eb;
}

.vs-chain-btn.primary {
  color: #6366f1;
  background: transparent;
  border-color: #c7d2fe;
}

.vs-chain-btn.primary:hover:not(:disabled) {
  background: #eef2ff;
}

.vs-chain-btn.danger {
  color: #dc2626;
}

.vs-chain-btn.danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fca5a5;
}

.vs-chain-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vs-chain-hint {
  font-size: 0.625rem;
  color: #6b7280;
}

.vs-chain-arrow {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding-left: 3.75rem;
  font-size: 0.6875rem;
  color: #9ca3af;
  font-weight: 500;
}

.vs-chain-add-card {
  padding: 0.875rem;
  border: 1.5px dashed #d1d5db;
  background: #fff;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.vs-chain-add-card:hover {
  border-color: #a5b4fc;
  color: #6366f1;
  background: #eef2ff;
}

.vs-chain-run-btn {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.vs-chain-run-btn-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.vs-chain-run-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #4338ca);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.38);
  transform: translateY(-1px);
}

.vs-chain-run-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.28);
}

.vs-chain-run-btn:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}

.vs-chain-run-sub {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.85;
  padding-left: 0.875rem;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.vs-chain-run-btn:disabled .vs-chain-run-sub {
  border-left-color: rgba(156, 163, 175, 0.4);
  opacity: 0.7;
}

/* 视频列表容器 */
.vs-video-list-container {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}

.vs-video-list-header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.vs-video-list {
  padding: 1rem;
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-content: start;
}

/* 视频卡片 */
.vs-video-card {
  background: #f9fafb;
  border-radius: 10px;
  overflow: hidden;
}

/* 生成视频 · 批量下载复选框（卡片左上角） */
.vs-video-checkbox-wrap {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0.375rem;
  cursor: pointer;
  z-index: 2;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background 0.15s;
}
.vs-video-checkbox-wrap:hover { background: rgba(0, 0, 0, 0.65); }
.vs-video-checkbox {
  width: 0.95rem;
  height: 0.95rem;
  accent-color: #6366f1;
  cursor: pointer;
  margin: 0;
}

/* ── Fine Mode: 首尾帧并排 ─────────────────────────────────── */
.vs-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.vs-upload-zone-sm {
  border: 2px dashed #e5e7eb;
  border-radius: 8px;
  min-height: 100px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.vs-upload-zone-sm:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.02);
}

/* ── Fine Mode: 预设管理 ───────────────────────────────────── */
.vs-preset-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.vs-btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.vs-btn-sm:hover {
  background: #e5e7eb;
}

.vs-btn-danger {
  color: #dc2626;
}

.vs-btn-danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

.vs-btn-outline {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6366f1;
  background: transparent;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.vs-btn-outline:hover {
  background: #eef2ff;
}

/* ── Multi-Shot: 分镜时间轴 ────────────────────────────────── */
.vs-timeline-section {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 1rem;
  margin-bottom: 1rem;
}

.vs-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.vs-shot-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  padding: 0.25rem 0 0.5rem;
}

.vs-shot-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.75rem;
  transition: all 0.15s;
  min-width: 0; /* 防止内容溢出 */
}

.vs-shot-card:hover {
  border-color: #c7d2fe;
}

.vs-shot-card.dragging {
  opacity: 0.4;
}

.vs-shot-card.drag-over {
  border-left: 3px solid #6366f1;
}

.vs-shot-card-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.vs-shot-card-header .vs-shot-delete {
  margin-left: auto;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 4px;
  transition: all 0.15s;
}

.vs-shot-card-header .vs-shot-delete:hover {
  color: #dc2626;
  background: #fef2f2;
}

.vs-drag-handle {
  display: inline-flex;
  align-items: center;
  cursor: grab;
  color: #9ca3af;
  user-select: none;
}
.vs-drag-handle svg { width: 16px; height: 16px; }
.vs-drag-handle:hover { color: #6b7280; }

.vs-drag-handle:active {
  cursor: grabbing;
}

.vs-shot-image-zone {
  width: 100%;
  aspect-ratio: 9 / 16; /* 默认竖屏，JS 会动态覆盖 */
  border: 2px dashed #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s, aspect-ratio 0.2s;
}

.vs-shot-image-zone:hover {
  border-color: #c7d2fe;
}

.vs-shot-image-zone.has-image {
  border-style: solid;
  border-color: #e5e7eb;
}

.vs-shot-image-zone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vs-shot-image-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vs-shot-prompt {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #374151;
  resize: none;
  outline: none;
  margin-top: 0.5rem;
  transition: border-color 0.15s;
}

.vs-shot-prompt:focus {
  border-color: #6366f1;
}

.vs-shot-duration {
  width: 50px;
  padding: 0.25rem 0.375rem;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #374151;
  text-align: center;
  outline: none;
}

.vs-shot-duration:focus {
  border-color: #6366f1;
}

.vs-shot-add-btn {
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  border: 2px dashed #e5e7eb;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 1rem;
}

.vs-shot-add-btn:hover {
  border-color: #c7d2fe;
  background: rgba(99, 102, 241, 0.02);
}

/* ── Multi-Shot: 角色资产网格 ──────────────────────────────── */
.vs-character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
}

.vs-character-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.15s;
}

.vs-character-card:hover {
  border-color: #c7d2fe;
}

.vs-character-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: #f3f4f6;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vs-character-info {
  padding: 0.375rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vs-character-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-character-actions {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.375rem;
}

.vs-character-actions button {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.vs-character-actions button:hover {
  background: #e5e7eb;
  color: #374151;
}

.vs-character-actions .vs-char-delete:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fca5a5;
}

/* ── Multi-Shot: 人物素材选择器 ────────────────────────────── */
.vs-person-item {
  cursor: pointer;
  transition: transform 0.15s;
}

.vs-person-item:hover {
  transform: scale(1.02);
}

.vs-person-item.selected {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   Video Planner (短视频策划) Styles
   ══════════════════════════════════════════════════════════════ */

/* Step indicator */
#vp-step-indicator .step-dot {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 0.875rem;
  cursor: default;
  transition: all 0.2s;
}

#vp-step-indicator .step-dot.active {
  background: #6366f1;
  color: #fff;
}

#vp-step-indicator .step-dot.completed {
  background: #dcfce7;
  color: #16a34a;
}

#vp-step-indicator .step-dot.clickable:hover {
  transform: scale(1.05);
}

/* View sections */
.vp-view {
  display: none;
}

.vp-view.active {
  display: block;
}

/* Script card */
.vp-script-card {
  transition: all 0.2s;
}

.vp-script-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Keyframe timeline */
.vp-keyframe-timeline {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.vp-keyframe-timeline::-webkit-scrollbar {
  height: 6px;
}

.vp-keyframe-timeline::-webkit-scrollbar-track {
  background: transparent;
}

.vp-keyframe-timeline::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.vp-keyframe-card {
  transition: all 0.2s;
}

.vp-keyframe-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── AI Gallery Search Bar ──────────────────────────────────── */
.aig-search-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.aig-search-input-wrap {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}
.aig-search-icon {
  position: absolute;
  left: 0.75rem;
  color: #9ca3af;
  pointer-events: none;
  flex-shrink: 0;
}
.aig-search-input-wrap input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 2.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.aig-search-input-wrap input::placeholder {
  color: #b0b5bf;
}
.aig-search-input-wrap input:focus {
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.aig-search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  transition: color 0.15s;
}
.aig-search-clear:hover {
  color: #374151;
}
.aig-search-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background: var(--ai-primary);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.aig-search-btn:hover {
  background: var(--ai-primary-dark);
}
.aig-search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Search indicator bar */
.aig-search-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  color: #4338ca;
}
.aig-search-indicator.hidden {
  display: none;
}
.aig-search-indicator-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.aig-search-indicator-left svg {
  flex-shrink: 0;
  color: #6366f1;
}
.aig-search-result-count {
  font-size: 0.75rem;
  color: #6366f1;
  font-weight: 500;
}
.aig-search-clear-link {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  transition: background 0.15s;
}
.aig-search-clear-link:hover {
  background: #e0e7ff;
}

/* ── 新建角色 Modal - 预览区样式 ─────────────────────────── */
.vs-char-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 0.5rem;
}
.vs-char-preview-item {
  position: relative;
  aspect-ratio: 1;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.15s;
}
.vs-char-preview-item:hover {
  border-color: var(--ai-primary-border);
}
.vs-char-preview-item.is-frontal {
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 2px var(--ai-primary-bg);
}
.vs-frontal-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--ai-primary);
  color: white;
  font-size: 0.625rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 500;
}
.vs-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.vs-char-preview-item:hover .vs-preview-remove {
  opacity: 1;
}
.vs-preview-remove:hover {
  background: var(--ai-error);
}

/* ── 折叠面板 ────────────────────────────────────── */
.vs-collapse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.vs-collapse-arrow {
  transition: transform 0.2s;
  font-size: 12px;
  color: #9ca3af;
}
.vs-collapse-arrow.open {
  transform: rotate(90deg);
}
.vs-collapse-body {
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.vs-collapse-body.collapsed {
  max-height: 0 !important;
  margin-top: 0;
  overflow: hidden;
}
.vs-collapse-body:not(.collapsed) {
  max-height: 600px;
}

/* ══════════════════════════════════════════════════════════════
   Photo Studio (影像工作室) Styles
   ══════════════════════════════════════════════════════════════ */

/* 二级 Tab */
.ps-mode-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e5e7eb;
}
.ps-mode-tab {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.ps-mode-tab:hover { color: #374151; }
.ps-mode-tab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}

/* ══════════════════════════════════════════════════════════════
   Photo Studio - 左右布局
   设计规范：圆角0.75rem、过渡0.2s、主色 #6366f1
   ══════════════════════════════════════════════════════════════ */

/* ── 主布局容器 ────────────────────────────────── */
.ps-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 1.5rem;
}
@media (max-width: 960px) {
  .ps-layout { grid-template-columns: 1fr; }
}

/* ── 左右面板 ──────────────────────────────────── */
.ps-left-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ps-right-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ps-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}
.ps-section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 0.75rem 0;
}

/* 通用输入 */
.ps-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ps-input:focus { border-color: #6366f1; }
textarea.ps-input { resize: vertical; }
select.ps-input { cursor: pointer; }

/* 缩略图网格 */
.ps-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.ps-thumb {
  aspect-ratio: 3 / 4;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  transition: all 0.2s;
}
.ps-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-thumb.selected { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15); }
.ps-thumb:hover { border-color: #a5b4fc; }
.ps-thumb-add {
  font-size: 0.6875rem;
  color: #9ca3af;
  text-align: center;
  line-height: 1.3;
  border-style: dashed;
  background: none;
}
.ps-thumb-remove,
.ps-thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
}
.ps-thumb:hover .ps-thumb-remove,
.ps-thumb:hover .ps-thumb-del { display: block; }

.ps-product-meta { margin-top: 0.5rem; }

/* ── 服装槽位 ────────────────────────────────── */
.ps-garments-section { gap: 0.75rem; display: flex; flex-direction: column; }

.ps-garment-slot {
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #fff;
  transition: opacity 0.2s;
}
.ps-garment-slot.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.ps-garment-slot-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.ps-garment-label {
  font-weight: 600;
  font-size: 0.8125rem;
  color: #374151;
}
.ps-garment-hint {
  font-size: 0.6875rem;
  color: #9ca3af;
}
.ps-garment-thumbs.ps-thumb-grid {
  margin-bottom: 0;
}
.ps-thumb-sm {
  min-height: 48px;
  font-size: 0.625rem;
}

/* Tab 切换 */
.ps-garment-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 0.5rem;
}
.ps-garment-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.ps-garment-tab:hover { color: #374151; }
.ps-garment-tab.active {
  color: #6366f1;
  font-weight: 600;
}
.ps-garment-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #6366f1;
}
.ps-garment-tab-content { margin-bottom: 0.75rem; }
.ps-tab-panel { display: none; }
.ps-tab-panel.active { display: block; }
.ps-garment-always-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  border-top: 1px dashed #e5e7eb;
  padding-top: 0.75rem;
}

.ps-separate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Radio 选项 */
.ps-option-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
}
.ps-option-row > label {
  flex-shrink: 0;
  color: #6b7280;
  width: 3rem;
}
.ps-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ps-radio {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: #374151;
}
.ps-radio input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: #6366f1;
}

.ps-person-options { margin-top: 0.75rem; }

/* 动作预设面板 */
.ps-pose-panel {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: #f9fafb;
  margin-top: 0.75rem;
}
.ps-pose-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem;
}
.ps-pose-actions { display: flex; gap: 0.75rem; }
.ps-pose-actions a {
  font-size: 0.75rem;
  color: #6366f1;
  text-decoration: none;
}
.ps-pose-actions a:hover { text-decoration: underline; }
.ps-pose-count {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.ps-pose-category { margin-bottom: 0.375rem; }
.ps-pose-cat-header {
  cursor: pointer;
  font-size: 0.8125rem;
  color: #374151;
  padding: 0.25rem 0;
  user-select: none;
}
.ps-pose-cat-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.25rem 0 0.25rem 0.75rem;
}

/* Chip 复选框 */
.ps-chip-check {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: #374151;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background: #fff;
  transition: all 0.2s;
}
.ps-chip-check:has(input:checked) {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
}
.ps-chip-check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  accent-color: #6366f1;
}

/* ── 设置 2×2 网格 ─────────────────────────────── */
.ps-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 560px) {
  .ps-settings-grid { grid-template-columns: 1fr; }
}

.ps-settings-cell {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}

.ps-cell-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 0.5rem;
}
.ps-cell-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ps-cell-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
  margin-top: 0.25rem;
}
.ps-cell-input:focus { border-color: #6366f1; }

/* Pill 单选按钮（展示方式/背景/布光） */
.ps-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.625rem;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.75rem;
  color: #374151;
  background: #fff;
  transition: all 0.2s;
}
.ps-pill:hover { border-color: #c7d2fe; }
.ps-pill.active {
  border-color: #6366f1;
  background: #eef2ff;
  color: #4338ca;
}
.ps-pill input[type="radio"] { display: none; }

/* Pill 按钮（道具快选） */
.ps-pill-btn {
  display: inline-block;
  padding: 0.3rem 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #374151;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}
.ps-pill-btn:hover:not(:disabled) {
  border-color: #6366f1;
  color: #4338ca;
}
.ps-pill-btn:disabled, .ps-pill-btn.added {
  opacity: 0.5;
  cursor: default;
}

/* 道具已选标签 */
.ps-props-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.25rem;
}
.ps-prop-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: #f3f4f6;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: #374151;
}
.ps-prop-interaction {
  padding: 0.125rem 0.25rem;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  cursor: pointer;
  background: #fff;
}
.ps-prop-remove {
  border: none;
  background: none;
  color: #9ca3af;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.ps-prop-remove:hover { color: #ef4444; }

/* ── AI 控制行 ─────────────────────────────────── */
.ps-ai-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
}
@media (max-width: 640px) {
  .ps-ai-row { flex-wrap: wrap; }
}

.ps-ai-item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.ps-ai-item-model { flex: 1; min-width: 160px; }

.ps-ai-label {
  font-size: 0.75rem;
  color: #6b7280;
}
.ps-ai-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.ps-ai-select:focus { border-color: #6366f1; }

/* ── 补充说明 + 生成按钮 ──────────────────────── */
.ps-action-area {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}
.ps-extra-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  background: #fff;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
  box-sizing: border-box;
  margin-bottom: 0.75rem;
}
.ps-extra-input:focus { border-color: #6366f1; }

.ps-generate-btn {
  width: 100%;
  padding: 0.75rem;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.ps-generate-btn:hover { background: #4f46e5; }
.ps-generate-btn:disabled {
  background: #a5b4fc;
  cursor: not-allowed;
}

/* 文本按钮 */
.ps-btn-text {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.ps-btn-text:hover { text-decoration: underline; }

/* ── 结果区 ────────────────────────────────────── */
.ps-results-area {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
  flex: 1;
}
.ps-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.75rem;
}
.ps-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}

.ps-result-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s;
}
.ps-result-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}
.ps-result-card.completed { border-color: #86efac; }
.ps-result-card.failed { border-color: #fca5a5; }
.ps-result-card.generating { border-color: #fde68a; }

.ps-result-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.8125rem;
}
.ps-result-error { color: #ef4444; font-weight: 500; }
.ps-retry-btn { color: #ef4444; }
.ps-retry-btn:hover { color: #dc2626; }

.ps-result-info {
  padding: 0.5rem 0.625rem;
  font-size: 0.75rem;
  color: #6b7280;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ps-empty-hint {
  text-align: center;
  color: #9ca3af;
  font-size: 0.875rem;
  padding: 3rem 0;
}

/* Spinner */
.ps-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: ps-spin 0.7s linear infinite;
}
@keyframes ps-spin {
  to { transform: rotate(360deg); }
}

/* ── Script Assistant (AI 脚本助手) ─────────────────────────── */

.sa-modal-container {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
  width: 95vw;
  max-width: 1100px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sa-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.sa-main-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.25rem;
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

@media (max-width: 800px) {
  .sa-main-layout {
    grid-template-columns: 1fr;
  }
}

.sa-left-panel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.sa-right-panel {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
}

/* 配置区 */
.sa-config-section {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.sa-config-row {
  display: flex;
  gap: 0.75rem;
  align-items: end;
}

.sa-config-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

/* 生成配置行（模型+分镜数+生成按钮） */
.sa-generate-section {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.sa-generate-row {
  display: flex;
  gap: 0.75rem;
  align-items: end;
}

.sa-generate-row .sa-config-item {
  flex: 0 0 auto;
}

.sa-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  margin-left: auto;
}

.sa-generate-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.sa-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 风格预置 */
.sa-style-section {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.sa-style-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sa-style-hint {
  font-size: 0.7rem;
  color: #9ca3af;
}

.sa-style-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.sa-style-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.sa-style-chip:hover {
  border-color: #818cf8;
  color: #4f46e5;
}

.sa-style-chip.active {
  background: #eef2ff;
  border-color: #818cf8;
  color: #4338ca;
  font-weight: 500;
}

.sa-style-chip .sa-chip-icon {
  font-size: 0.875rem;
}

/* 描述区 */
.sa-desc-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 分镜预览 */
.sa-preview-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sa-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sa-preview-actions {
  display: flex;
  gap: 0.5rem;
}

.sa-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  background: #4f46e5;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.sa-apply-btn:hover {
  background: #4338ca;
}

.sa-shot-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
}

/* 单个分镜卡片 */
.sa-shot-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  gap: 0.75rem;
}

.sa-shot-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding-top: 0.125rem;
}

.sa-shot-num {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sa-shot-dur {
  font-size: 0.65rem;
  color: #9ca3af;
  white-space: nowrap;
}

.sa-shot-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.sa-shot-label {
  font-size: 0.65rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sa-shot-script {
  font-size: 0.8125rem;
  color: #1f2937;
  line-height: 1.5;
}

.sa-shot-image-prompt {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.4;
  padding-left: 0.5rem;
  border-left: 2px solid #c7d2fe;
}

/* 关键帧缩略图区 */
.sa-shot-keyframe {
  margin-top: 0.25rem;
  width: 80px;
  background: #f3f4f6;
  border-radius: 0.375rem;
  overflow: hidden;
}

.sa-shot-keyframe-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  transition: transform 0.2s;
}

.sa-shot-keyframe-img:hover {
  transform: scale(1.05);
}

.sa-shot-keyframe-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0.375rem;
  border: 1px dashed #d1d5db;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: #9ca3af;
  background: #f3f4f6;
  gap: 0.15rem;
  position: relative;
}

.sa-shot-keyframe-placeholder.retrying {
  border-color: #818cf8;
  background: #eef2ff;
}

.sa-shot-retry-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}
.sa-shot-retry-btn:hover {
  background: #4f46e5;
}

.sa-shot-retrying-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #c7d2fe;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: sa-spin 0.8s linear infinite;
}
@keyframes sa-spin {
  to { transform: rotate(360deg); }
}

/* 批量生图区 */
.sa-batch-section {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.sa-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.sa-batch-config {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.sa-batch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  background: #7c3aed;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.sa-batch-btn:hover:not(:disabled) {
  background: #6d28d9;
}

.sa-batch-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Brand VI (品牌VI) 样式 ──────────────────────────────────────────────────────── */

/* ── 设计工作室 二级Tab ─────────────────────── */
.ds-tab-bar {
  display: flex;
  gap: 0;
}

.ds-subtab {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.ds-subtab:hover {
  color: #374151;
}

.ds-subtab.active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}

.ds-tab-content {
  /* default visible for first tab */
}

.ds-tab-content.hidden {
  display: none;
}

/* ── Figma 模版管理 ── */

.ft-tpl-card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ft-tpl-card:hover {
  border-color: #c7d2fe;
}

.ft-slot-badge {
  white-space: nowrap;
}

#ft-fields-tbody tr:first-child {
  border-top: none;
}

.ft-mapping-select {
  min-width: 180px;
}

/* ── 资料包 ── */

.ap-slot-card {
  transition: box-shadow 0.15s ease;
}
.ap-slot-card:hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ap-image-zone {
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ap-image-zone:hover {
  border-color: #a5b4fc;
  background: #f5f3ff;
}

#ap-table-body tr {
  transition: background 0.1s ease;
}

/* 模态弹窗 */
.modal {
  z-index: 100;
}

.modal-content {
  max-height: 90vh;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-body {
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ============ Workflow Module (工作流) ============ */

/* CSS Variables (对应 JSX 的 V 设计令牌) */
:root {
  --wf-bg: #FAFAF8;
  --wf-surface: #fff;
  --wf-surface-alt: #F5F4F1;
  --wf-border: #E8E5DF;
  --wf-border-light: #F0EDE8;
  --wf-border-hover: #D4D0C8;
  --wf-text: #1C1B19;
  --wf-text-sec: #6B6860;
  --wf-text-ter: #A09D95;
  --wf-text-quat: #C8C5BD;
  --wf-accent: #2C2C2C;
  --wf-accent-soft: #F0F0F0;
  --wf-radius: 8px;
  --wf-radius-lg: 10px;
  --wf-radius-sm: 5px;
}

/* 工具栏 */
.wf-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--wf-surface-alt);
  border-radius: var(--wf-radius);
  border: 0.5px solid var(--wf-border-light);
}

.wf-view-tabs {
  display: flex;
  align-items: center;
  border-bottom: 0.5px solid var(--wf-border);
  margin-bottom: 0.75rem;
}

.wf-view-tab {
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  background: transparent;
  font-size: 0.75rem;
  color: var(--wf-text-ter);
  font-weight: 400;
  border-bottom: 2px solid transparent;
  letter-spacing: -0.01em;
  transition: all 0.15s;
}

.wf-view-tab:hover {
  color: var(--wf-text-sec);
}

.wf-view-tab.active {
  color: var(--wf-text);
  font-weight: 600;
  border-bottom-color: var(--wf-accent);
}

.wf-search-input {
  width: 140px;
  padding: 0.3rem 0.6rem;
  border-radius: var(--wf-radius-sm);
  border: 0.5px solid var(--wf-border);
  font-size: 0.6875rem;
  color: var(--wf-text);
  outline: none;
  background: var(--wf-surface);
}

.wf-search-input:focus {
  border-color: var(--wf-border-hover);
}

.wf-actions {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}

/* 产品列表 */
.wf-product-list {
  border-radius: var(--wf-radius-lg);
  border: 0.5px solid var(--wf-border);
  overflow: hidden;
  background: var(--wf-surface);
}

.wf-product-row {
  border-bottom: 0.5px solid var(--wf-border-light);
  transition: background 0.15s;
}

.wf-product-row:last-child {
  border-bottom: none;
}

.wf-product-row:hover {
  background: var(--wf-surface-alt);
}

.wf-product-row.expanded {
  background: var(--wf-bg);
}

/* 折叠行 */
.wf-collapsed-row {
  display: flex;
  align-items: center;
  padding: 0.625rem 0;
  cursor: pointer;
}

.wf-product-check {
  width: 1.875rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.wf-product-check input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--wf-accent);
}

.wf-product-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.wf-product-cat {
  font-size: 0.625rem;
  color: var(--wf-text-ter);
}

.wf-thumb-strip {
  flex: 1;
  display: flex;
  gap: 0.1875rem;
  align-items: center;
  overflow: hidden;
}

.wf-thumb-strip img {
  width: 2.25rem;
  height: 3rem;
  border-radius: var(--wf-radius-sm);
  object-fit: cover;
  flex-shrink: 0;
}

/* 进度条 */
.wf-progress-bar {
  display: flex;
  height: 3px;
  border-radius: 99px;
  background: var(--wf-border-light);
  overflow: hidden;
}

.wf-progress-segment {
  height: 100%;
  transition: flex-grow 0.4s ease;
}

.wf-status-summary {
  display: flex;
  gap: 0.125rem;
}

.wf-status-summary span {
  font-size: 0.5rem;
  font-weight: 600;
  padding: 0.125rem 0.3125rem;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
}

.wf-deadline-badge {
  font-size: 0.5625rem;
  font-weight: 500;
  padding: 0.125rem 0.4375rem;
  border-radius: 99px;
  margin: 0 0.25rem;
  flex-shrink: 0;
}

.wf-expand-btn {
  width: 1rem;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  color: var(--wf-text-ter);
  transition: transform 0.2s;
}

.wf-expand-btn.expanded {
  transform: rotate(90deg);
}

/* 展开行 - 卡片横向滚动 */
.wf-expanded-row {
  background: var(--wf-bg);
  padding: 0.875rem 0.875rem 1rem 3rem;
}

.wf-card-scroll {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--wf-border-light) transparent;
  padding-bottom: 0.25rem;
  align-items: flex-start;
}

.wf-card-scroll::-webkit-scrollbar {
  height: 6px;
}

.wf-card-scroll::-webkit-scrollbar-thumb {
  background: var(--wf-border-light);
  border-radius: 3px;
}

.wf-add-card-btn {
  width: 3.25rem;
  min-height: 11.25rem;
  border: 1px dashed var(--wf-border-hover);
  border-radius: var(--wf-radius-lg);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  color: var(--wf-text-quat);
  flex-shrink: 0;
  transition: all 0.15s;
}

.wf-add-card-btn:hover {
  border-color: var(--wf-text-ter);
  background: var(--wf-surface-alt);
}

.wf-add-card-btn span {
  font-size: 0.5625rem;
}

/* 超级卡片 */
.wf-card {
  width: 10.75rem;
  flex-shrink: 0;
  border-radius: var(--wf-radius-lg);
  background: var(--wf-surface);
  border: 0.5px solid var(--wf-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: grab;
  transition: all 0.2s;
  scroll-snap-align: start;
}

.wf-card:hover {
  box-shadow: 0 4px 16px rgba(28, 27, 25, 0.06);
}

.wf-card.dragging {
  opacity: 0.5;
}

.wf-card.drag-over {
  border-color: #4D98C5;
  box-shadow: 0 0 0 2px rgba(77, 152, 197, 0.15);
  transform: translateY(-2px);
}

.wf-card-header {
  padding: 0.5rem 0.625rem 0.375rem;
  transition: background 0.2s;
}

.wf-card-header-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3125rem;
}

.wf-card-header-title span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.wf-card-header-meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5625rem;
  color: var(--wf-text-ter);
  font-variant-numeric: tabular-nums;
}

.wf-card-status {
  height: 4px;
  border-radius: 99px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.wf-card-body {
  padding: 0.125rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wf-card-footer {
  padding: 0.1875rem 0.5rem;
  position: relative;
}

/* 字段编辑 */
.wf-field {
  padding: 0.3125rem 0.5625rem;
  border-bottom: 0.5px solid var(--wf-border-light);
}

.wf-field:last-child {
  border-bottom: none;
}

.wf-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.1875rem;
}

.wf-field-label {
  font-size: 0.5625rem;
  color: var(--wf-text-ter);
  font-weight: 500;
}

.wf-field-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.wf-field:hover .wf-field-actions {
  opacity: 1;
}

.wf-field-actions button {
  color: var(--wf-text-quat);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
}

.wf-field-actions button:hover {
  color: var(--wf-text-sec);
}

.wf-field-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: var(--wf-surface-alt);
  position: relative;
}

.wf-field-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wf-field-image .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-text-quat);
}

.wf-field-title {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wf-text);
}

.wf-field-copy {
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wf-text);
  min-height: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.wf-field-tag {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.wf-field-note {
  font-size: 0.6875rem;
  color: var(--wf-text-sec);
  line-height: 1.5;
}

.wf-field-input {
  width: 100%;
  padding: 0.1875rem 0.25rem;
  border: 0.5px solid var(--wf-border);
  border-radius: 4px;
  font-size: 0.6875rem;
  line-height: 1.5;
  background: var(--wf-surface);
  color: var(--wf-text);
  outline: none;
  resize: vertical;
  font-family: inherit;
  min-height: 1.375rem;
}

.wf-field-input:focus {
  border-color: var(--wf-border-hover);
}

/* 状态色点 */
.wf-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.wf-status-dot.active {
  width: 24px;
}

.wf-status-dot.mini {
  width: 4px;
  height: 4px;
}

.wf-status-dot.mini.active {
  width: 14px;
}

.wf-status-bar {
  display: flex;
  gap: 1.5px;
  align-items: center;
}

/* 配置抽屉 */
.wf-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.06);
}

.wf-drawer-overlay.hidden {
  display: none;
}

.wf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  z-index: 401;
  background: var(--wf-surface);
  border-left: 0.5px solid var(--wf-border);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.05);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.wf-drawer.hidden {
  display: none;
}

.wf-drawer.visible {
  transform: translateX(0);
}

.wf-drawer-header {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 0.5px solid var(--wf-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wf-drawer-header h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--wf-text);
  letter-spacing: -0.01em;
}

.wf-drawer-header p {
  font-size: 0.6875rem;
  color: var(--wf-text-ter);
  margin-top: 0.1875rem;
}

.wf-drawer-close {
  width: 1.75rem;
  height: 1.75rem;
  border: 0.5px solid var(--wf-border-light);
  background: var(--wf-surface-alt);
  border-radius: var(--wf-radius-sm);
  cursor: pointer;
  color: var(--wf-text-ter);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.5rem;
}

/* 右键菜单 */
.wf-ctx-menu {
  position: fixed;
  z-index: 1000;
  background: var(--wf-surface);
  border: 0.5px solid var(--wf-border);
  border-radius: var(--wf-radius);
  padding: 0.25rem;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.wf-ctx-menu.hidden {
  display: none;
}

.wf-ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  width: 100%;
  padding: 0.4375rem 0.625rem;
  border: none;
  background: transparent;
  border-radius: var(--wf-radius-sm);
  font-size: 0.6875rem;
  color: var(--wf-text-sec);
  cursor: pointer;
  transition: background 0.1s;
}

.wf-ctx-menu-item:hover {
  background: var(--wf-surface-alt);
}

.wf-ctx-menu-item.danger {
  color: #C25555;
}

.wf-ctx-menu-divider {
  height: 0.5px;
  background: var(--wf-border-light);
  margin: 0.125rem 0.5rem;
}

/* 分页 */
.wf-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.wf-pagination button {
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  border: 0.5px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-surface);
  color: var(--wf-text-sec);
  cursor: pointer;
  transition: all 0.15s;
}

.wf-pagination button:hover:not(:disabled) {
  background: var(--wf-surface-alt);
}

.wf-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wf-pagination span {
  font-size: 0.6875rem;
  color: var(--wf-text-ter);
}

/* 批量操作栏 */
.wf-batch-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  margin-bottom: 0.625rem;
  background: #E4F0F8;
  border-radius: var(--wf-radius);
  border: 0.5px solid #B5D4E8;
  font-size: 0.6875rem;
}

.wf-batch-bar.hidden {
  display: none;
}

.wf-batch-bar strong {
  font-weight: 600;
  color: #2D6F9F;
}

.wf-batch-bar a {
  font-size: 0.625rem;
  color: #4D98C5;
  cursor: pointer;
  text-decoration: underline;
}

.wf-batch-bar .divider {
  width: 0.5px;
  height: 0.875rem;
  background: rgba(181, 212, 232, 0.33);
}

/* 通用辅助 */
.wf-btn {
  padding: 0.3125rem 0.625rem;
  border: 0.5px solid var(--wf-border);
  border-radius: var(--wf-radius-sm);
  background: var(--wf-surface);
  font-size: 0.6875rem;
  cursor: pointer;
  color: var(--wf-text-sec);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s;
  white-space: nowrap;
}

.wf-btn:hover {
  background: var(--wf-surface-alt);
}

.wf-btn-primary {
  background: var(--wf-accent);
  color: #fff;
  border: none;
}

.wf-btn-primary:hover {
  opacity: 0.9;
}

.wf-btn-ghost {
  border: none;
  background: transparent;
}

.wf-btn-ghost:hover {
  background: var(--wf-surface-alt);
}

.wf-btn-danger {
  background: #F9F0F0;
  color: #B54444;
  border: none;
}

.wf-btn-danger:hover {
  background: #F6E3E3;
}

.wf-tag {
  font-size: 0.5625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 99px;
  background: var(--wf-surface-alt);
  color: var(--wf-text-sec);
  border: 0.5px solid var(--wf-border-light);
}

.wf-empty-state {
  padding: 2rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--wf-text-ter);
}

/* 指派人选择器 */
.wf-assignee-picker {
  position: relative;
}

.wf-assignee-btn {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
  padding: 0.0625rem 0.375rem 0.0625rem 0.0625rem;
  border: 0.5px solid var(--wf-border-light);
  border-radius: 99px;
  background: transparent;
  cursor: pointer;
  font-size: 0.5625rem;
}

.wf-assignee-avatar {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 99px;
  color: #fff;
  font-size: 0.5rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf-assignee-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.1875rem;
  z-index: 301;
  background: var(--wf-surface);
  border: 0.5px solid var(--wf-border);
  border-radius: var(--wf-radius);
  padding: 0.25rem;
  min-width: 100px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.wf-assignee-option {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.3125rem 0.5rem;
  border: none;
  background: transparent;
  border-radius: var(--wf-radius-sm);
  font-size: 0.6875rem;
  color: var(--wf-text);
  cursor: pointer;
}

.wf-assignee-option:hover {
  background: var(--wf-surface-alt);
}

.wf-assignee-option.selected {
  background: var(--wf-surface-alt);
}

/* 模板选择器 */
.wf-template-picker {
  position: absolute;
  top: 0.25rem;
  left: 0;
  z-index: 301;
  background: var(--wf-surface);
  border: 0.5px solid var(--wf-border);
  border-radius: var(--wf-radius-lg);
  padding: 0.75rem 0.625rem;
  width: 18.75rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.wf-template-picker h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wf-text);
  padding: 0 0.25rem 0.5rem;
}

.wf-template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
}

.wf-template-item {
  padding: 0.625rem 0.375rem;
  border: 1.5px solid var(--wf-border-light);
  border-radius: var(--wf-radius);
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.15s;
}

.wf-template-item:hover {
  border-color: var(--wf-border-hover);
}

.wf-template-item.selected {
  border-color: #4D98C5;
  background: #E4F0F8;
}

.wf-template-item span {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--wf-text);
}

.wf-template-item.selected span {
  color: #2D7AAF;
}

.wf-template-item small {
  font-size: 0.5625rem;
  color: var(--wf-text-ter);
}

.wf-template-confirm {
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.5rem 0;
  border: none;
  border-radius: var(--wf-radius);
  background: var(--wf-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
}

.wf-template-confirm:hover {
  opacity: 0.9;
}

/* =====================================================================
 * Video Prompt Library (VPL) · 视频工作室 · 指令库二级 tab
 * 命名空间: .vpl-*
 * ===================================================================== */
.vpl-container {
  width: 100%;
  padding: 1.5rem 0 3rem; /* 父级 #module-video-studio 已管左右内边距,这里只给上下 */
  box-sizing: border-box;
}

/* ── Toolbar ── */
.vpl-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.vpl-title h2 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}
.vpl-title p {
  margin: 0;
  font-size: 0.8125rem;
  color: #6b7280;
}
.vpl-title p b { color: #111827; }

.vpl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  background: #fff;
  color: #374151;
  border-color: #e5e7eb;
}
.vpl-btn:hover { background: #f9fafb; border-color: #d1d5db; }
.vpl-btn.primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.vpl-btn.primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.vpl-btn.ghost {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #4b5563;
}
.vpl-btn.ghost:hover { background: #f9fafb; }

/* ── AIG layout: sidebar 240 + main ── */
.vpl-aig-layout {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.vpl-aig-sidebar {
  width: 15rem;
  flex-shrink: 0;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
}
.vpl-aig-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.vpl-sidebar-section {
  padding: 0.5rem 0 0.75rem;
  border-bottom: 1px solid #eef2f7;
}
.vpl-sidebar-section:last-child { border-bottom: none; }
.vpl-filter-title {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin: 0 0 0.375rem;
  padding: 0 0.5rem;
}
.vpl-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.15s;
}
.vpl-check:hover { background: #ffffff; }
.vpl-check input[type=checkbox] {
  width: 0.875rem;
  height: 0.875rem;
  accent-color: #2563eb;
  margin: 0;
}
.vpl-check-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vpl-check-ct {
  font-size: 0.6875rem;
  color: #9ca3af;
  padding-left: 0.25rem;
}
.vpl-check-empty {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  color: #c8cad0;
}
@media (max-width: 900px) {
  .vpl-aig-layout { flex-direction: column; }
  .vpl-aig-sidebar { width: 100%; position: static; max-height: none; }
}

/* ── Filter bar ── */
.vpl-filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.vpl-search {
  flex: 1;
  min-width: 14rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  background: #fff;
}
.vpl-search:focus { outline: none; border-color: #2563eb; }
.vpl-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

/* ── Grid · 5 列 / 3:4 ── */
.vpl-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1280px) { .vpl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .vpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .vpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vpl-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
}
.vpl-card.clickable { cursor: pointer; }
.vpl-card.clickable:hover {
  box-shadow: 0 6px 16px -8px rgba(15, 23, 42, 0.16);
  border-color: #c7d2fe;
  transform: translateY(-2px);
}
.vpl-card.disabled { opacity: 0.7; }

.vpl-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  overflow: hidden;
}
.vpl-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.vpl-ov {
  position: absolute; inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8125rem; font-weight: 600;
}

.vpl-body {
  padding: 0.625rem 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 4.5rem;
}
.vpl-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vpl-kpis {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
  min-width: 0;
}
.vpl-k {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.vpl-k.green { background: #ecfdf5; color: #047857; }
.vpl-tier {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: #fef3c7;
  color: #b45309;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.vpl-status {
  padding: 0.0625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 0.25rem;
}
.vpl-status.status-pending,
.vpl-status.status-running { background: #eef2ff; color: #4338ca; }
.vpl-status.status-failed  { background: #fee2e2; color: #b91c1c; }
.vpl-status.status-partial { background: #fef3c7; color: #b45309; }
.vpl-status.status-done    { background: #ecfdf5; color: #047857; }

.vpl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: #6b7280;
}

/* ── Empty / loading / error ── */
.vpl-empty, .vpl-loading, .vpl-err {
  grid-column: 1 / -1;
  padding: 3rem 2rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
  background: #fff;
  border: 1px dashed #e5e7eb;
  border-radius: 0.75rem;
}
.vpl-err { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }

.vpl-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .vpl-detail-grid { grid-template-columns: 1fr; }
}

.vpl-left {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  position: sticky;
  top: 1rem;
}
.vpl-player {
  aspect-ratio: 9 / 16;
  background: #0f172a;
  border-radius: 0.625rem;
  overflow: hidden;
  position: relative;
}
.vpl-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vpl-player-ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 0.875rem;
}

.vpl-meta-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 0.5rem;
}
.vpl-cell { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.vpl-cell .k { font-size: 0.6875rem; color: #9ca3af; }
.vpl-cell .v {
  font-size: 0.8125rem; color: #374151; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Right column ── */
.vpl-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.vpl-right h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.35;
}

/* ── Score panel ── */
.vpl-score-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
}
.vpl-score-panel:has(details[open]) { align-items: start; }
.vpl-score {
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.vpl-score.video {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #fde68a;
}
.vpl-score.prompt {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #a7f3d0;
}
.vpl-score-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
}
.vpl-score-head .tier {
  background: rgba(255, 255, 255, 0.6);
  color: #374151;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
}
.vpl-score-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}
.vpl-score-num small {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9ca3af;
  margin-left: 0.25rem;
}
.vpl-score-cap {
  font-size: 0.6875rem;
  color: #6b7280;
  line-height: 1.4;
}

/* ── Prompt Hero ── */
.vpl-prompt-hero {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0.625rem;
  overflow: hidden;
}
.vpl-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.75rem;
  font-weight: 600;
  color: #cbd5e1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vpl-prompt-actions { display: flex; gap: 0.375rem; }
.vpl-prompt-actions button {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border: none;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.vpl-prompt-actions button:hover { background: rgba(255, 255, 255, 0.16); }
.vpl-prompt-body {
  margin: 0;
  padding: 0.875rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e2e8f0;
  max-height: 22rem;
  overflow-y: auto;
}

/* ── Shot list ── */
.vpl-shot-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.vpl-shot {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
}
.vpl-shot > summary {
  display: grid;
  grid-template-columns: 4rem 5rem 1fr 1.25rem;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  list-style: none;
  align-items: center;
  font-size: 0.75rem;
}
.vpl-shot > summary::-webkit-details-marker { display: none; }
.vpl-shot-time { color: #6366f1; font-weight: 600; }
.vpl-shot-role { color: #6b7280; }
.vpl-shot-desc {
  color: #374151;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vpl-shot-expand {
  color: #9ca3af; text-align: right;
  transition: transform 0.15s;
}
.vpl-shot[open] .vpl-shot-expand { transform: rotate(180deg); }
.vpl-shot-detail {
  padding: 0.5rem 0.75rem 0.75rem;
  border-top: 1px solid #f1f5f9;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #4b5563;
  line-height: 1.55;
}
.vpl-shot-detail b { color: #111827; margin-right: 0.375rem; }

#vpl-rate-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.vpl-modal-card {
  width: 22rem;
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 0.625rem;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.3);
}
.vpl-modal-title {
  font-size: 1rem; font-weight: 700; color: #111827;
}
.vpl-modal-sub {
  font-size: 0.75rem; color: #6b7280;
}
.vpl-modal-actions {
  display: flex; gap: 0.5rem; justify-content: flex-end;
  margin-top: 0.25rem;
}
.vpl-modal-actions button {
  padding: 0.4375rem 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
  font-size: 0.8125rem;
  cursor: pointer;
}
.vpl-modal-actions button:hover { background: #f9fafb; }
.vpl-modal-actions button.primary {
  background: #2563eb; color: #fff; border-color: #2563eb;
}
.vpl-modal-actions button.primary:hover { background: #1d4ed8; }
.vpl-modal-actions button:disabled {
  opacity: 0.5; cursor: not-allowed;
}

/* ── "新" badge in subtab ── */
.vpl-new-badge {
  display: inline-block;
  margin-left: 0.3125rem;
  padding: 0.0625rem 0.25rem;
  border-radius: 0.1875rem;
  background: #ef4444;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.15;
  vertical-align: middle;
}

/* =====================================================================
 * VPL · P0/P1/P2 一比一对齐原型补全样式
 * ===================================================================== */

/* Stats pill(顶部五彩) */
.vpl-stats { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.625rem; }
.vpl-pill {
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: #eef2ff; color: #4338ca;
  font-size: 0.6875rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.vpl-pill b { font-weight: 700; }
.vpl-pill.green { background: #ecfdf5; color: #065f46; }
.vpl-pill.blue  { background: #eff6ff; color: #1e40af; }
.vpl-pill.amber { background: #fef3c7; color: #92400e; }
.vpl-pill.red   { background: #fee2e2; color: #991b1b; }

/* Filter bar(横向) */
.vpl-filter-bar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.vpl-search-wrap {
  flex: 1; min-width: 14rem; position: relative;
  display: flex; align-items: center;
}
.vpl-search-wrap svg {
  position: absolute; left: 0.625rem; color: #9ca3af; pointer-events: none;
}
.vpl-search {
  flex: 1;
  padding: 0.5rem 0.75rem 0.5rem 2rem;
  border: 1px solid #e5e7eb; border-radius: 0.5rem;
  font-size: 0.8125rem; background: #fff;
}
.vpl-search:focus { outline: none; border-color: #2563eb; }
.vpl-select { padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; font-size: 0.8125rem; background: #fff; color: #374151; cursor: pointer; }
.vpl-sort { margin-left: auto; }

/* 已筛选 chip */
.vpl-chips {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; color: #6b7280; flex-wrap: wrap;
}
.vpl-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1875rem 0.5rem; border-radius: 999px;
  background: #eff6ff; color: #1d4ed8;
  font-size: 0.6875rem; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vpl-chip:hover { background: #fee2e2; color: #dc2626; }
.vpl-chip .x { font-weight: 600; }
.vpl-chip-clear {
  background: transparent; border: none;
  font-size: 0.6875rem; color: #6b7280; cursor: pointer;
  padding: 0.125rem 0.375rem;
}
.vpl-chip-clear:hover { color: #111827; text-decoration: underline; }

/* Grid head(总数 + 视图切换) */
.vpl-grid-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: #6b7280;
}
.vpl-grid-count b { color: #111827; }
.vpl-view-toggle { display: flex; gap: 0.25rem; }
.vpl-vbtn {
  padding: 0.25rem 0.625rem; font-size: 0.75rem;
  border: 1px solid #e5e7eb; background: #fff;
  border-radius: 0.5rem; cursor: pointer; color: #6b7280;
}
.vpl-vbtn.on { color: #2563eb; border-color: #dbeafe; background: #eff6ff; }

/* 卡片列表视图 */
.vpl-grid.listmode { grid-template-columns: 1fr; }
.vpl-grid.listmode .vpl-card { flex-direction: row; }
.vpl-grid.listmode .vpl-thumb { width: 8rem; aspect-ratio: 3/4; flex-shrink: 0; }
.vpl-grid.listmode .vpl-body { flex: 1; }

.vpl-platform {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  background: rgba(0, 0, 0, 0.55); color: #fff;
  border-radius: 0.375rem;
  font-size: 0.625rem; font-weight: 500;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.vpl-platform .dot { width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #fff; }
.vpl-platform.douyin .dot { background: #000; }
.vpl-platform.xiaohongshu .dot { background: #ff2e4d; }
.vpl-platform.shipinhao .dot { background: #00ba3c; }
.vpl-platform.bilibili .dot { background: #fb7299; }

/* 卡片状态 overlay(分析中/失败) */
.vpl-ov {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff; gap: 0.5rem; padding: 1rem; text-align: center;
}
.vpl-ov.failed { background: rgba(127, 29, 29, 0.85); }
.vpl-ov-text { font-size: 0.75rem; font-weight: 600; }
.vpl-ov-sub  { font-size: 0.6875rem; opacity: 0.85; }
.vpl-ov-x { font-size: 1.5rem; font-weight: 700; }
.vpl-ov-retry {
  padding: 0.25rem 0.625rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff; border: none; border-radius: 0.375rem;
  font-size: 0.6875rem; cursor: pointer;
  margin-top: 0.25rem;
}
.vpl-ov-retry:hover { background: rgba(255, 255, 255, 0.28); }
.vpl-spin {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff; animation: vpl-spin 1s linear infinite;
}
@keyframes vpl-spin { to { transform: rotate(360deg); } }

/* 卡片 body 细节 */
.vpl-k .d { width: 0.375rem; height: 0.375rem; border-radius: 50%; margin-right: 0.25rem; display: inline-block; }
.vpl-k .d.video  { background: #f59e0b; }
.vpl-k .d.prompt { background: #10b981; }
.vpl-tier.t-S { background: #fef3c7; color: #92400e; }
.vpl-tier.t-A { background: #fef3c7; color: #b45309; }
.vpl-tier.t-B { background: #e0f2fe; color: #0369a1; }
.vpl-tier.t-C { background: #f3f4f6; color: #6b7280; }

/* body 内的元数据行(平台 · 比例 · 时长 · 账号) · 原先叠在封面上,现集中到卡片下方 */
.vpl-card-meta {
  display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem;
  align-items: center;
  font-size: 0.6875rem; color: #64748b;
  margin-top: 0.125rem;
}
.vpl-card-meta > span {
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.vpl-meta-ar,
.vpl-meta-dur {
  padding: 0.0625rem 0.3125rem;
  background: #f1f5f9; color: #475569;
  border-radius: 0.25rem;
  font-size: 0.625rem; font-weight: 500;
  letter-spacing: 0.01em;
}
.vpl-meta-import {
  padding: 0.0625rem 0.3125rem;
  background: rgba(99, 102, 241, 0.12); color: #4338ca;
  border-radius: 0.25rem;
  font-size: 0.625rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.vpl-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.25rem;
  font-size: 0.625rem; color: #9ca3af;
}
.vpl-uploader { display: inline-flex; align-items: center; gap: 0.25rem; }
.vpl-avatar {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: #ddd6fe; color: #4338ca;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
  flex-shrink: 0;
}
.vpl-fdate { color: #c8cad0; }

/* 播放器上叠加的平台/账号 */
.vpl-player { position: relative; }
.vpl-player-overlay {
  position: absolute; top: 0.5rem; left: 0.5rem;
  display: flex; gap: 0.375rem; pointer-events: none;
}

/* 详情 · 部分成功警示条(可折叠) */
.vpl-partial-banner {
  margin-bottom: 1rem;
  background: linear-gradient(90deg, #fff7ed 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 0.625rem;
  color: #b45309;
  overflow: hidden;
}
.vpl-partial-banner > summary {
  display: flex; align-items: flex-start; gap: 0.625rem;
  padding: 0.75rem 1rem;
  cursor: pointer; list-style: none;
}
.vpl-partial-banner > summary::-webkit-details-marker { display: none; }
.vpl-partial-banner > summary:hover { background: rgba(253, 186, 116, 0.12); }
.vpl-partial-ic { flex-shrink: 0; margin-top: 0.125rem; color: #d97706; }
.vpl-partial-body { flex: 1; min-width: 0; }
.vpl-partial-chev {
  flex-shrink: 0; margin-top: 0.25rem; color: #b45309;
  transition: transform 0.2s;
}
.vpl-partial-banner[open] > summary .vpl-partial-chev { transform: rotate(180deg); }
.vpl-partial-t { font-size: 0.8125rem; font-weight: 700; color: #92400e; }
.vpl-partial-s { font-size: 0.75rem; color: #b45309; line-height: 1.55; margin-top: 0.125rem; }
.vpl-partial-list {
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px dashed #fde68a;
  background: rgba(255, 255, 255, 0.45);
}
.vpl-partial-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; line-height: 1.5; color: #78350f;
  padding: 4px 0;
}
.vpl-partial-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; flex-shrink: 0;
}
.vpl-partial-empty {
  font-size: 12.5px; color: #b45309; font-style: italic;
  text-align: center; padding: 6px 0;
}

/* 详情 · 样片质量 Top3 + 10 维展开 */
.vpl-top3-label {
  font-size: 0.625rem; font-weight: 600;
  color: #b45309; background: #fef3c7;
  padding: 0.125rem 0.375rem; border-radius: 0.25rem;
  display: inline-block; margin-top: 0.5rem;
}
/* 旧版 .vpl-kpi-row grid 布局已由下方 11935+ 处的正确版本覆盖 · 此处保留占位以避免历史引用 */

/* 分镜表小按钮 */
.vpl-shot > summary {
  grid-template-columns: 4rem 5rem 1fr 2.5rem 1.25rem;
}
.vpl-shot-copy {
  background: #eff6ff; color: #1d4ed8; border: 1px solid #dbeafe;
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  border-radius: 0.25rem; cursor: pointer;
}
.vpl-shot-copy:hover { background: #dbeafe; }

/* =====================================================================
 * Modal 通用容器
 * ===================================================================== */
.vpl-modal-wrap {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 1rem;
}
.vpl-modal-card {
  width: 22rem; max-width: 100%;
  background: #fff; border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.625rem;
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.3);
  max-height: 90vh; overflow-y: auto;
}
.vpl-modal-card.wide { width: 32rem; }
.vpl-modal-title {
  font-size: 1rem; font-weight: 700; color: #111827;
  display: flex; justify-content: space-between; align-items: center;
}
.vpl-modal-title.nomargin { margin: 0; }
.vpl-modal-sub { font-size: 0.75rem; color: #6b7280; line-height: 1.55; }
.vpl-modal-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding-top: 0.375rem;
  border-top: 1px solid #f1f5f9;
  margin-top: 0.25rem;
}
.vpl-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vpl-btn.danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.vpl-btn.danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Confirm modal 专属 */
.vpl-modal-card.confirm .vpl-confirm-head {
  display: flex; gap: 0.75rem; align-items: flex-start;
}
.vpl-confirm-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vpl-confirm-icon.info   { background: #dbeafe; color: #1d4ed8; }
.vpl-confirm-icon.danger { background: #fee2e2; color: #dc2626; }

/* 打分 modal · v2 (纵列五档 · 星星递增 · 标准永远可见) */
.vpl-modal-card.vpl-rate-v2 { width: 28rem; gap: 0.875rem; }
.vpl-rate-head { display: flex; align-items: center; gap: 0.625rem; }
.vpl-rate-bar { width: 3px; height: 1.125rem; background: #6366f1; border-radius: 2px; }
.vpl-rate-div { height: 1px; background: #f3f4f6; }
.vpl-rate-scale {
  border: 1px solid #e5e7eb; border-radius: 0.75rem;
  display: flex; flex-direction: column; overflow: hidden;
}
.vpl-rate-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer; transition: background 0.12s;
}
.vpl-rate-row:last-child { border-bottom: 0; }
.vpl-rate-row:hover { background: #f9fafb; }
.vpl-rate-row:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.vpl-rate-stars {
  flex: 0 0 6.75rem;
  display: flex; align-items: center; gap: 2px;
}
.vpl-rate-ico {
  width: 1.25rem; height: 1.25rem; flex-shrink: 0;
  display: block;
}
.vpl-rate-meta {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
}
.vpl-rate-label {
  font-size: 0.8125rem; font-weight: 500; color: #111827;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.vpl-rate-desc { font-size: 0.75rem; color: #6b7280; }
.vpl-rate-check { color: #4f46e5; font-weight: 700; }
.vpl-rate-row.active { background: #eef2ff; border-bottom-color: #c7d2fe; }
.vpl-rate-row.active .vpl-rate-label { color: #3730a3; font-weight: 700; }
.vpl-rate-row.active .vpl-rate-desc { color: #3730a3; }
.vpl-rate-row.lv1 .vpl-rate-ico { color: #dc2626; }
.vpl-rate-row.lv2 .vpl-rate-ico { color: #ea580c; }
.vpl-rate-row.lv3 .vpl-rate-ico { color: #ca8a04; }
.vpl-rate-row.lv4 .vpl-rate-ico { color: #4f46e5; }
.vpl-rate-row.lv5 .vpl-rate-ico { color: #16a34a; }
.vpl-rate-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 0.375rem;
  border-top: 1px solid #f1f5f9;
}
.vpl-rate-hint { font-size: 0.6875rem; color: #9ca3af; }
.vpl-rate-btns { display: flex; gap: 0.5rem; }
.vpl-rate-reason {
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb; border-radius: 0.5rem;
  font-size: 0.8125rem; outline: none;
  transition: border-color 0.15s;
}
.vpl-rate-reason:focus { border-color: #6366f1; }
.vpl-rate-v2 .vpl-btn.primary {
  background: #6366f1; border-color: #6366f1;
}
.vpl-rate-v2 .vpl-btn.primary:hover { background: #4f46e5; border-color: #4f46e5; }

/* Toast */
.vpl-toast-layer {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  z-index: 10000;
}
.vpl-toast {
  display: flex; gap: 0.5rem; align-items: flex-start;
  padding: 0.625rem 0.875rem;
  background: #fff; border-radius: 0.5rem;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.25);
  min-width: 14rem; max-width: 20rem;
  animation: vpl-toast-in 0.2s ease-out;
}
@keyframes vpl-toast-in { from { transform: translateY(10px); opacity: 0; } }
.vpl-toast-icon {
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.vpl-toast.k-success .vpl-toast-icon { background: #10b981; }
.vpl-toast.k-error   .vpl-toast-icon { background: #ef4444; }
.vpl-toast.k-info    .vpl-toast-icon { background: #2563eb; }
.vpl-toast-title { font-size: 0.8125rem; font-weight: 600; color: #111827; }
.vpl-toast-sub   { font-size: 0.6875rem; color: #6b7280; margin-top: 0.125rem; }

/* 卡片 awaiting_model overlay · 贴底渐变 CTA · 视频上半可见 */
.vpl-ov.awaiting {
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.88) 0%,
    rgba(15, 23, 42, 0.55) 42%,
    rgba(15, 23, 42, 0.18) 72%,
    rgba(15, 23, 42, 0) 100%
  );
  justify-content: flex-end;
  align-items: stretch;
  padding: 0.875rem;
  gap: 0;
}
.vpl-ov-cta {
  position: relative;
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.625rem 0.625rem 0.875rem;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #a855f7 100%);
  color: #fff;
  border-radius: 0.75rem;
  box-shadow:
    0 10px 24px -6px rgba(99, 102, 241, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
  cursor: pointer;
}
.vpl-ov-cta-shine {
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform 0.7s ease;
  pointer-events: none;
  z-index: 0;
}
.vpl-card.clickable:hover .vpl-ov-cta {
  transform: translateY(-2px);
  box-shadow:
    0 16px 30px -6px rgba(124, 58, 237, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.16) inset,
    0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
.vpl-card.clickable:hover .vpl-ov-cta-shine {
  transform: translateX(110%);
}
.vpl-ov-cta-spark,
.vpl-ov-cta-main {
  position: relative;
  z-index: 1;
}
.vpl-ov-cta-spark {
  flex-shrink: 0;
  color: #fef3c7;
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.55));
}
.vpl-ov-cta-main { text-align: left; flex: 1; min-width: 0; overflow: hidden; }
.vpl-ov-cta-title {
  font-size: 13.5px; font-weight: 700; line-height: 1.15;
  letter-spacing: 0.2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vpl-ov-cta-sub {
  font-size: 10.5px; font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 3px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 卡片太窄(详情图 < 170px / listmode)时自动降级:隐藏 spark/arrow/副标题,只留主标题 */
@container (max-width: 170px) {
  .vpl-ov-cta-spark,
  .vpl-ov-cta-sub { display: none; }
  .vpl-ov-cta { padding: 0.5rem 0.625rem; justify-content: center; }
  .vpl-ov-cta-title { font-size: 12px; text-align: center; }
}
/* listmode 下 thumb 被压窄 · 直接极简展示 */
.vpl-grid.listmode .vpl-ov-cta-spark,
.vpl-grid.listmode .vpl-ov-cta-sub {
  display: none;
}
.vpl-grid.listmode .vpl-ov-cta {
  padding: 0.375rem 0.625rem;
  justify-content: center;
}
.vpl-grid.listmode .vpl-ov-cta-title {
  font-size: 11.5px; text-align: center;
}
.vpl-grid.listmode .vpl-ov.awaiting {
  padding: 0.5rem;
}

/* 卡片 上传中 overlay · 紫色环形进度(conic-gradient) */
.vpl-ov.uploading {
  background: rgba(15, 23, 42, 0.92);
  gap: 0.5rem;
}
.vpl-up-ring {
  position: relative;
  width: 72px; height: 72px;
}
.vpl-up-ring-fg {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(#6366f1 calc(var(--p, 0) * 1%), rgba(255, 255, 255, 0.12) 0);
  transition: background 0.2s ease;
}
.vpl-up-ring-inner {
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: #0f172a;
  display: flex; align-items: center; justify-content: center;
}
.vpl-up-pct-num { font-size: 15px; font-weight: 700; color: #fff; }
.vpl-card.uploading { cursor: default; opacity: 0.98; }
.vpl-card.uploading .vpl-name { color: #475569; }

/* 卡片右上角删除按钮(hover 出现) */
.vpl-card { position: relative; }
.vpl-card-delete {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 9999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
  z-index: 3;
  padding: 0;
}
.vpl-card:hover .vpl-card-delete { opacity: 1; transform: translateY(0); }
.vpl-card-delete:hover { background: #dc2626; }
.vpl-card-delete:focus { outline: none; opacity: 1; transform: translateY(0); }
.vpl-card.uploading .vpl-card-delete { display: none; }

/* 人工打分平均分徽章 · 永久展示在卡片左上角 */
.vpl-avg-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: rgba(17, 24, 39, 0.58);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.vpl-avg-badge .vpl-avg-ico {
  width: 0.75rem; height: 0.75rem;
  color: #f59e0b;
  display: block; flex-shrink: 0;
}
.vpl-avg-badge .vpl-avg-num { color: #fff; }
.vpl-avg-badge .vpl-avg-count { color: #cbd5e1; font-weight: 500; font-size: 0.625rem; }
.vpl-avg-badge.empty {
  background: rgba(17, 24, 39, 0.48);
  color: #e2e8f0;
  font-weight: 500;
  padding: 4px 10px;
}
.vpl-card.uploading .vpl-avg-badge { display: none; }

/* 详情页 · 模型选择面板 · 紫色主色(对齐 AI 分析 CTA) */
.vpl-model-picker {
  background: #fff; border: 2px solid #ddd6fe; border-radius: 12px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.vpl-mp-head { display: flex; align-items: center; gap: 6px; }
.vpl-mp-title { font-size: 13px; font-weight: 700; color: #5b21b6; flex: 1; }
.vpl-mp-badge {
  padding: 2px 6px; background: #ede9fe; color: #6d28d9;
  border-radius: 4px; font-size: 9.5px; font-weight: 600;
}
.vpl-mp-sub { font-size: 11px; color: #6b7280; line-height: 1.5; }
.vpl-mp-list {
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
}
.vpl-mp-empty { padding: 14px; font-size: 12px; color: #9ca3af; text-align: center; }
.vpl-mp-opt {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}
.vpl-mp-opt:last-child { border-bottom: none; }
.vpl-mp-opt:hover { background: #faf5ff; }
.vpl-mp-opt.on { background: #f5f3ff; }
.vpl-mp-opt input[type=radio] { margin: 0; accent-color: #7c3aed; }
.vpl-mp-opt-main { flex: 1; min-width: 0; }
.vpl-mp-opt-t { font-size: 12px; font-weight: 600; color: #111827; }
.vpl-mp-rec {
  display: inline-block; padding: 1px 5px; background: #ede9fe;
  color: #6d28d9; border-radius: 3px;
  font-size: 9px; font-weight: 700; margin-left: 4px;
}
.vpl-mp-last {
  display: inline-block; padding: 1px 5px; background: #fee2e2;
  color: #b91c1c; border-radius: 3px;
  font-size: 9px; font-weight: 700; margin-left: 4px;
}
.vpl-mp-opt-s { font-size: 10.5px; color: #6b7280; margin-top: 1px; }
.vpl-model-picker.retry { border-color: #fca5a5; }
.vpl-model-picker.retry .vpl-mp-title { color: #b91c1c; }
.vpl-model-picker.retry .vpl-mp-badge { background: #fee2e2; color: #b91c1c; }
.vpl-mp-fail-note {
  padding: 8px 10px; border-radius: 8px;
  background: #fef2f2; border: 1px solid #fecaca;
  color: #991b1b; font-size: 11px; line-height: 1.5;
}
.vpl-mp-start {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #6366f1 0%, #7c3aed 55%, #a855f7 100%);
  color: #fff; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
  transition: all 0.15s;
}
.vpl-mp-start:hover { filter: brightness(1.08); }
.vpl-mp-start:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.vpl-mp-start-sub {
  font-size: 11px; font-weight: 500; opacity: 0.85;
  padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.3);
  margin-left: 2px;
}
.vpl-mp-cost {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; color: #9ca3af; justify-content: center;
}

/* 分析中:模型卡锁定折叠态 · 紫底 */
.vpl-mp-locked {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: 12px;
  background: #ede9fe; border: 1px solid #ddd6fe;
}
.vpl-mp-locked-spin {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid #c4b5fd; border-top-color: #7c3aed;
  animation: vpl-spin 0.9s linear infinite;
  flex-shrink: 0;
}
.vpl-mp-locked-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vpl-mp-locked-t { font-size: 13px; font-weight: 700; color: #4c1d95; }
.vpl-mp-locked-s { font-size: 11px; color: #6d28d9; }
.vpl-mp-locked-lock { color: #6d28d9; flex-shrink: 0; }

/* 完成后:模型卡折叠可操作态(白底) */
.vpl-mp-done {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: #ffffff; border: 1px solid #e2e8f0;
}
.vpl-mp-done-ic {
  width: 32px; height: 32px; border-radius: 50%;
  background: #ecfdf5; color: #10b981;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.vpl-mp-done-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vpl-mp-done-t { font-size: 13px; font-weight: 700; color: #0f172a; }
.vpl-mp-done-s { font-size: 11px; color: #64748b; }
.vpl-mp-done-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: #eef2ff; color: #6366f1; border: 1px solid #c7d2fe;
  font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.vpl-mp-done-btn:hover { background: #e0e7ff; }

/* 分析中:右栏诚实 loading 卡 */
.vpl-loading-card {
  background: #ffffff; border: 1px solid #c7d2fe; border-radius: 16px;
  padding: 24px; margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(99,102,241,0.13);
  display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.vpl-loading-t { font-size: 17px; font-weight: 700; color: #0f172a; }
.vpl-loading-s { font-size: 12px; color: #64748b; line-height: 1.5; }
.vpl-loading-spinner {
  width: 72px; height: 72px; border-radius: 50%;
  border: 6px solid #eef2ff; border-top-color: #6366f1;
  animation: vpl-spin 1.1s linear infinite;
}
.vpl-loading-times {
  display: flex; align-items: center; gap: 28px; justify-content: center;
}
.vpl-loading-time { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vpl-loading-time-n { font-size: 30px; font-weight: 700; color: #0f172a; line-height: 1; font-variant-numeric: tabular-nums; }
.vpl-loading-time-n.secondary { color: #64748b; }
.vpl-loading-time-l { font-size: 11px; color: #94a3b8; }
.vpl-loading-time-sep { width: 1px; height: 36px; background: #e2e8f0; }
.vpl-loading-hint {
  display: inline-flex; align-items: center; gap: 6px;
  color: #64748b; font-size: 12px;
}
.vpl-loading-hint svg { color: #94a3b8; }
@keyframes vpl-spin { to { transform: rotate(360deg); } }

/* 换模型重跑弹窗 */
.vpl-cm-modal { max-width: 440px; width: 92vw; }
.vpl-cm-list {
  display: flex; flex-direction: column; gap: 6px;
  margin: 4px 0;
}
.vpl-cm-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: #ffffff; border: 1px solid #e2e8f0; cursor: pointer;
}
.vpl-cm-opt:hover { background: #f8fafc; }
.vpl-cm-opt.on { background: #eef2ff; border-color: #6366f1; }
.vpl-cm-opt input[type=radio] { margin: 0; accent-color: #6366f1; flex-shrink: 0; }
.vpl-cm-opt-body { flex: 1; min-width: 0; }
.vpl-cm-opt-t { font-size: 13px; font-weight: 600; color: #0f172a; }
.vpl-cm-opt-s { font-size: 11px; color: #64748b; margin-top: 2px; }
.vpl-cm-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; color: #6366f1;
  background: #eef2ff; border-radius: 4px;
}
.vpl-cm-warn {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 10px 12px; border-radius: 8px;
  background: #fef3c7; border: 1px solid #fde68a;
  color: #92400e; font-size: 11px; line-height: 1.5;
}
.vpl-cm-warn svg { flex-shrink: 0; margin-top: 2px; color: #d97706; }

/* 详情标题块 */
.vpl-title-block h1 {
  font-size: 24px; font-weight: 700; color: #111827;
  margin: 0 0 6px; line-height: 1.3;
}
.vpl-title-block p {
  font-size: 13.5px; color: #4b5563; line-height: 1.75; margin: 0;
}

/* 双评分卡 · details 版(独立展开互不影响) */
details.vpl-score {
  position: relative; border-radius: 14px; border: 1px solid;
  background: #fff; overflow: hidden;
  transition: box-shadow 0.2s;
}
details.vpl-score:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.04); }
details.vpl-score.video  { border-color: #fde68a; background: linear-gradient(180deg, #fffdf7 0%, #fff 60%); }
details.vpl-score.prompt { border-color: #a7f3d0; background: linear-gradient(180deg, #f0fdf7 0%, #fff 60%); }
details.vpl-score.empty  { border-color: #f3f4f6; background: #fafafa; }
details.vpl-score > summary {
  list-style: none; padding: 16px 18px 14px; cursor: pointer;
  display: flex; flex-direction: column; flex: 1;
}
details.vpl-score > summary::-webkit-details-marker { display: none; }
.vpl-score-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.vpl-score-head .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.vpl-score-main .vpl-feedback-pill { margin-left: auto; align-self: center; }
details.vpl-score.video  .label { color: #92400E; }
details.vpl-score.prompt .label { color: #065F46; }
details.vpl-score.empty  .label { color: #c8cad0; }
.vpl-tier-badge {
  padding: 2px 9px; border-radius: 9999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em;
}
.vpl-tier-badge.t-S, .vpl-tier-badge.t-A { background: #fef3c7; color: #92400E; }
.vpl-tier-badge.t-B { background: #e0f2fe; color: #0369a1; }
.vpl-tier-badge.t-C { background: #f3f4f6; color: #6b7280; }
.vpl-tier-badge.verified {
  background: #d1fae5; color: #065F46;
  display: inline-flex; align-items: center; gap: 3px;
}
.vpl-score-main {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid #f3f4f6; margin-bottom: 10px;
}
.vpl-score-num {
  font-size: 38px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
details.vpl-score.video  .vpl-score-num { color: #78350f; }
details.vpl-score.prompt .vpl-score-num { color: #065F46; }
details.vpl-score.empty  .vpl-score-num { color: #c8cad0; }
.vpl-score-suffix { font-size: 12px; color: #9ca3af; font-weight: 500; padding-bottom: 4px; }
.vpl-score-caption {
  font-size: 11.5px; color: #6b7280; line-height: 1.5; margin-bottom: 10px;
}
.vpl-score-caption b { color: #374151; font-weight: 600; }

/* Top 3 / KPI */
.vpl-top3-label {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
details.vpl-score.video .vpl-top3-label { color: #92400E; }
details.vpl-score.prompt .vpl-top3-label { color: #065F46; }
.vpl-kpi-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.vpl-kpi-row { font-size: 11.5px; }
.vpl-kpi-row-label {
  display: flex; align-items: baseline;
  gap: 8px; margin-bottom: 3px;
  flex-wrap: wrap;
}
.vpl-kpi-row-label .k {
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
}
.vpl-kpi-row-label .v {
  color: #111827; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; flex-shrink: 0;
  margin-left: auto;
}
.vpl-kpi-track { height: 4px; border-radius: 9999px; background: #f3f4f6; overflow: hidden; }
.vpl-kpi-fill { height: 100%; border-radius: 9999px; transition: width 0.4s ease; }
details.vpl-score.video  .vpl-kpi-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }
details.vpl-score.prompt .vpl-kpi-fill { background: linear-gradient(90deg, #10b981, #059669); }

/* 展开入口条 */
.vpl-score-more {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding: 6px 10px; border-radius: 8px;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
}
details.vpl-score.video  .vpl-score-more { color: #92400E; background: rgba(253, 230, 138, 0.3); }
details.vpl-score.prompt .vpl-score-more { color: #065F46; background: rgba(167, 243, 208, 0.25); }
details.vpl-score .vpl-score-more .arrow { transition: transform 0.2s; }
details.vpl-score[open] .vpl-score-more .arrow { transform: rotate(180deg); }
details.vpl-score[open] .vpl-score-more { background: transparent; }

/* 展开区 */
.vpl-score-expanded { padding: 0 18px 18px; border-top: 1px dashed; }
details.vpl-score.video  .vpl-score-expanded { border-color: #fde68a; }
details.vpl-score.prompt .vpl-score-expanded { border-color: #a7f3d0; }
.vpl-score-expanded h5 {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 14px 0 8px;
}
details.vpl-score.video  .vpl-score-expanded h5 { color: #92400E; }
details.vpl-score.prompt .vpl-score-expanded h5 { color: #065F46; }

/* 10 维 cap 可展开 */
details.vpl-cap-card {
  background: #fff; border: 1px solid #f3f4f6; border-radius: 8px;
  margin-bottom: 5px; overflow: hidden;
}
details.vpl-cap-card > summary {
  list-style: none; padding: 8px 12px;
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center; cursor: pointer; font-size: 12.5px;
}
details.vpl-cap-card > summary::-webkit-details-marker { display: none; }
.vpl-cap-name { color: #374151; font-weight: 500; white-space: nowrap; }
.vpl-cap-hint {
  font-size: 11px; color: #9ca3af;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vpl-cap-score { font-weight: 700; color: #111827; min-width: 28px; text-align: right; }
.vpl-cap-arrow { color: #d1d5db; font-size: 11px; transition: transform 0.2s; }
details.vpl-cap-card[open] .vpl-cap-arrow { transform: rotate(180deg); }
details.vpl-cap-card[open] > summary { border-bottom: 1px solid #f3f4f6; background: #fafbfc; }
.vpl-cap-evidence { padding: 10px 14px 12px; font-size: 12px; line-height: 1.7; }
.vpl-theory-pill {
  display: inline-block; padding: 1px 8px;
  background: #eef2ff; color: #4338ca;
  border-radius: 9999px; font-size: 10.5px; font-weight: 600;
  margin: 0 6px 8px 0;
}
.vpl-cap-note { font-size: 11px; color: #6b7280; line-height: 1.6; }
.vpl-sw-list { margin: 6px 0 0; padding-left: 16px; font-size: 11.5px; color: #4b5563; line-height: 1.7; }
.vpl-sw-list.warn { color: #b45309; }
.vpl-sw-list li { margin-bottom: 3px; }

/* Prompt 卡 · 12 维分两类 */
.vpl-gate-group {
  padding: 8px 12px; border-radius: 8px; margin-bottom: 8px;
}
.vpl-gate-group.format   { background: #eff6ff; border: 1px solid #bfdbfe; }
.vpl-gate-group.semantic { background: #f0fdf7; border: 1px solid #a7f3d0; }
.vpl-gate-group-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; font-size: 11.5px; font-weight: 700;
}
.vpl-gate-group.format   .vpl-gate-group-head { color: #1e40af; }
.vpl-gate-group.semantic .vpl-gate-group-head { color: #065F46; }
.vpl-gate-group-grid {
  display: grid; grid-template-columns: 1fr; gap: 4px 0;
  font-size: 11px; color: #4b5563;
}
.vpl-gate-item-row { display: flex; justify-content: space-between; }
.vpl-gate-item-row .ok { color: #10b981; margin-right: 3px; }
.vpl-gate-item-row .fail { color: #dc2626; margin-right: 3px; font-weight: 700; }
.vpl-gate-item-row .num { color: #9ca3af; font-variant-numeric: tabular-nums; }
.vpl-gate-item-row.fail { color: #991b1b; }
.vpl-gate-item-row.fail .num { color: #dc2626; font-weight: 600; }

/* 员工反馈 · 独立指标(不并入结构分) */
.vpl-feedback-card {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
}
.vpl-feedback-card.on  { background: #fffbeb; border: 1px solid #fcd34d; }
.vpl-feedback-card.off { background: #f9fafb; border: 1px dashed #d1d5db; }
.vpl-feedback-stars {
  font-size: 16px; font-weight: 700; color: #b45309;
  font-variant-numeric: tabular-nums;
}
.vpl-feedback-stars.muted { color: #9ca3af; font-size: 13px; font-weight: 600; }
.vpl-feedback-meta { font-size: 11.5px; color: #4b5563; line-height: 1.55; }
.vpl-feedback-meta b { color: #111827; }

.vpl-feedback-pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px 4px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; line-height: 1; margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.vpl-feedback-pill.on  { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.vpl-feedback-pill.off { background: #f3f4f6; color: #9ca3af; border: 1px dashed #d1d5db; }

/* Shot list · 原型 H/B/T/C */
/* 分镜表 · 独立容器(与完整指令卡片对齐结构) */
.vpl-shot-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.vpl-shot-card-head {
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafc, #fff);
  border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: baseline; gap: 10px;
}
.vpl-shot-card-label {
  font-size: 13px; font-weight: 600; color: #111827;
}
.vpl-shot-card-sub {
  font-size: 11.5px; color: #9ca3af;
}
.vpl-shot-card .vpl-shot-list { padding: 12px 14px; }

.vpl-shot-list { display: flex; flex-direction: column; gap: 6px; }
.vpl-shot {
  background: #fff; border: 1px solid #f3f4f6; border-radius: 10px;
  transition: border-color 0.15s; overflow: hidden;
}
.vpl-shot:hover { border-color: #e0e7ff; }
.vpl-shot > summary {
  list-style: none; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.vpl-shot > summary::-webkit-details-marker { display: none; }
.vpl-shot-time {
  padding: 3px 10px; background: #eff6ff; color: #1d4ed8;
  border-radius: 6px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.vpl-shot-role {
  padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 6px;
}
.vpl-shot-role.H { background: #fef3c7; color: #92400E; }
.vpl-shot-role.B { background: #dbeafe; color: #1E40AF; }
.vpl-shot-role.T { background: #d1fae5; color: #065F46; }
.vpl-shot-role.C { background: #fee2e2; color: #991b1b; }
.vpl-shot-desc {
  flex: 1; min-width: 0; font-size: 13.5px; color: #374151;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vpl-shot-copy {
  padding: 5px 12px; background: #fff; color: #1d4ed8;
  border: 1px solid #c7d2fe; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.vpl-shot-copy:hover { background: #eff6ff; }
.vpl-shot-expand { color: #9ca3af; font-size: 14px; }
.vpl-shot[open] .vpl-shot-expand { transform: rotate(180deg); }
.vpl-shot-detail {
  padding: 2px 16px 14px;
  display: grid; grid-template-columns: 80px 1fr;
  gap: 3px 14px; font-size: 12.5px;
  border-top: 1px solid #f3f4f6; background: #fafbfc;
}
.vpl-shot-detail .lbl { color: #9ca3af; padding-top: 4px; }
.vpl-shot-detail .val { color: #374151; line-height: 1.6; padding: 4px 0; }
.vpl-shot-detail .val .q {
  padding: 1px 6px; background: #fef3c7; color: #92400E;
  border-radius: 4px; font-style: italic;
}
.vpl-shot-mini-prompt {
  grid-column: 1 / -1; margin-top: 8px;
  padding: 10px 12px; background: #0f172a; color: #cbd5e1;
  border-radius: 8px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; line-height: 1.65;
  white-space: pre-wrap;
}

/* Prompt Hero(重做版 · 语义高亮 + 3 按钮) */
.vpl-prompt-hero {
  background: #ffffff; border-radius: 16px; overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.vpl-prompt-head {
  padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: space-between;
  background: #f8fafc;
}
.vpl-ph-import-pill {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 12px; margin-right: auto;
  padding: 3px 9px 4px; border-radius: 9999px;
  font-size: 11px; font-weight: 600; line-height: 1;
  background: rgba(99, 102, 241, 0.1); color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.25);
  font-variant-numeric: tabular-nums;
}
.vpl-ph-label {
  color: #1e293b; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.vpl-prompt-body {
  margin: 0; padding: 16px 20px;
  background: #0b1220; color: #e2e8f0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
  max-height: none; overflow: visible;
}
.vpl-ph-time { color: #60a5fa; font-weight: 600; }
.vpl-ph-kw   { color: #fbbf24; }
.vpl-ph-ph   {
  background: #fde047; color: #422006;
  padding: 1px 6px; border-radius: 4px; font-weight: 600;
}
.vpl-ph-sec  {
  color: #64748b; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.vpl-ph-ref  { color: #86efac; }
.vpl-prompt-actions {
  padding: 12px 16px; background: #f8fafc;
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid #e2e8f0;
}
.vpl-btn-copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  background: rgba(99, 102, 241, 0.08); color: #4f46e5;
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 9px; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.vpl-btn-copy:hover {
  background: rgba(99, 102, 241, 0.16);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.45);
}
.vpl-btn-copy-head {
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 7px;
}
.vpl-prompt-actions .vpl-btn-import-vs {
  padding: 10px 18px; font-size: 12.5px; border-radius: 9px;
}
.vpl-prompt-actions button.vpl-btn-rate {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #422006;
  border: 1px solid #d97706;
  border-radius: 9px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(234, 179, 8, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s, box-shadow 0.15s;
}
.vpl-prompt-actions button.vpl-btn-rate:hover {
  background: linear-gradient(135deg, #f59e0b, #ea8b0a);
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

/* =====================================================================
 * VPL · 视频零流量策略 · 用户点击播放前只显示静态 poster
 * ===================================================================== */
.vpl-player-poster {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: filter 0.2s;
}
.vpl-player-poster:hover { filter: brightness(1.05); }
.vpl-player-poster::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.25);
  pointer-events: none;
}
.vpl-player-play {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  z-index: 2;
  transition: transform 0.15s, box-shadow 0.15s;
}
.vpl-player-play:hover {
  transform: scale(1.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
}
.vpl-player-hint {
  position: relative; z-index: 2;
  font-size: 10.5px; color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 9px; border-radius: 9999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* ============================================================
   多段 prompt 段卡 · 2026-04-19 · v2 精美化
   - 全深色 #0f172a 系 · 段卡比 hero 深一档 (#0b1220)
   - 段号 indigo pill chip · 时间戳灰色 chip
   - 操作提示单行紧凑 · 复制按钮主色 affordance
   - handoff 改为"衔接到下段"分隔线 + 友好 SVG icon
   ============================================================ */
.vpl-prompt-hero-multi .vpl-segment-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 6px;
}

.vpl-segment-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
}

.vpl-segment-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.vpl-segment-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 段号 pill chip · indigo 主色 */
.vpl-segment-chip-num {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 11px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 6px rgba(99, 102, 241, 0.35);
  white-space: nowrap;
}

/* 时间戳/类型 chip · 灰底细字 */
.vpl-segment-chip-meta {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  border-radius: 11px;
  white-space: nowrap;
  font-family: ui-monospace, Menlo, monospace;
}

.vpl-segment-chip-meta b {
  color: #1e293b;
  font-weight: 700;
  margin-right: 5px;
}

/* 复制本段 · 主色文字按钮 · 明确 affordance */
.vpl-segment-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.28);
  color: #4f46e5;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.vpl-segment-copy:hover {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.5);
  color: #4338ca;
}
.vpl-segment-copy svg { opacity: 0.95; }

/* 段 prompt 正文 · 代码框质感 · 充足 padding */
.vpl-segment-card .vpl-prompt-body {
  margin: 0;
  padding: 18px 16px;
  background: #050a14;
  color: #e2e8f0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.85;
  border: 1px solid #131c2e;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
  white-space: pre-wrap;
  word-break: break-word;
}

/* handoff · 衔接到下段 · 分割线 + icon + 文字 */
.vpl-segment-handoff {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}
.vpl-segment-handoff-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #94a3b8;
  text-transform: uppercase;
}
.vpl-segment-handoff-divider::before,
.vpl-segment-handoff-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}
.vpl-segment-handoff-text {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12px;
  color: #475569;
  line-height: 1.6;
  padding: 0 2px;
}
.vpl-segment-handoff-text svg { flex-shrink: 0; color: #6366f1; margin-top: 2px; }

/* 单段时段卡完全淡化 · 等同旧版 · 由外层 hero 承载视觉 */
.vpl-prompt-hero:not(.vpl-prompt-hero-multi) .vpl-segment-list {
  padding: 14px 16px 14px;
}
.vpl-prompt-hero:not(.vpl-prompt-hero-multi) .vpl-segment-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  gap: 10px;
}
.vpl-prompt-hero:not(.vpl-prompt-hero-multi) .vpl-segment-head {
  padding: 0;
  gap: 10px;
}
/* 单段时 prompt body 仍保持段卡内深色样式(L12711-12724 默认),不覆盖 */
.vpl-prompt-hero:not(.vpl-prompt-hero-multi) .vpl-segment-handoff {
  padding: 0;
  margin-top: 0;
}

/* 多段 prompt head 内多按钮组容器 · 2026-04-19 · 导入视频生成 */
.vpl-prompt-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 导入视频生成按钮 · indigo 主色突出 affordance（覆盖 .vpl-btn-copy 浅基底） */
.vpl-btn-import-vs {
  background: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.28);
}
.vpl-btn-import-vs:hover {
  background: #4338ca !important;
  color: #ffffff !important;
  border-color: #3730a3 !important;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.42);
}
.vpl-btn-import-vs svg {
  opacity: 0.95;
}


/* ============================================================
   Design Workshop (快速画板) — 设计工作室
   视觉对齐系统规范：白面板 / gray-200 边框 / #6366f1 激活色 /
   .btn-primary 蓝主钮。布局对齐交付原型（240 / flex / 300 三栏）。
   ============================================================ */

/* ===== 模板管理 · 卡片画廊 ===== */
.dt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.dt-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
}
.dt-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.06);
}
.dt-card-thumb {
  aspect-ratio: 1 / 1;
  background: #f9fafb;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
/* 仅限缩略图直接子 svg，避免命中删除按钮内的图标 svg */
.dt-card-thumb > svg {
  width: 100%;
  height: auto;
  display: block;
}
/* 图层式选项组（data-dw-opt-kind="layer"）的显隐在画板里由 _applyOptionGroups 管；
   模板管理只是把 SVG 原样画出来，首屏那七套系列就会全叠在一起糊成一团。
   这里用纯 CSS 收敛到默认那一层——不能写进元素：「模板设计」保存时是把这棵 DOM
   序列化回库，任何 style="display:none" 都会被永久烙进模板，六层再也出不来。 */
#dt-svg-host [data-dw-opt-kind="layer"]:has(> [data-dw-opt-default]) > [data-dw-opt]:not([data-dw-opt-default]),
#dt-svg-host [data-dw-opt-kind="layer"]:not(:has(> [data-dw-opt-default])) > [data-dw-opt]:not(:first-of-type),
.dt-card-thumb [data-dw-opt-kind="layer"]:has(> [data-dw-opt-default]) > [data-dw-opt]:not([data-dw-opt-default]),
.dt-card-thumb [data-dw-opt-kind="layer"]:not(:has(> [data-dw-opt-default])) > [data-dw-opt]:not(:first-of-type) {
  display: none;
}
.dt-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 底部操作栏 —— 复刻素材库 .aig-card-actions 规范（深色渐变 + 半透明白按钮，删除 hover 变红） */
.dt-card-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 0.15s;
}
.dt-card:hover .dt-card-actions { opacity: 1; }
.dt-card-actions button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.dt-card-actions button:hover { background: rgba(255, 255, 255, 0.3); }
.dt-card-actions .dt-action-delete:hover { background: rgba(239, 68, 68, 0.8); }
.dt-card-info {
  padding: 10px 12px;
}
.dt-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-card-meta {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}
/* 新增卡片 */
.dt-add-card {
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  background: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 240px;
  color: #9ca3af;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.dt-add-card:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #eef2ff;
}
.dt-add-card .dt-add-plus {
  font-size: 32px;
  line-height: 1;
  font-weight: 300;
}

/* 新增模板弹窗 */
.dt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(17, 24, 39, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.dt-modal {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  padding: 24px;
  width: 100%;
  max-width: 420px;
}

/* 快速画板二级菜单条 — 复用 .creative-subtab 视觉；顶部间距由模块 py-8 提供，对齐其他入口 */
.dw-subtab-bar {
  margin-bottom: 1.25rem;
  background: transparent;
}

/* 三栏骨架：高度随视口自适应，但不低于 720px 保底。
   195px = sticky 头部 65 + 模块 py-8 上下 64 + 子 tab 条 42 + 其 margin-bottom 24，
   视口够高时恰好一屏收下；矮屏退回 720px 保底，内容超出视口时整页滚动，
   与视频/影像工作室等其他页面一致，而不是把自身锁死为一屏、只让内部滚动。 */
.dw-body {
  display: flex;
  gap: 1rem;
  height: max(720px, calc(100vh - 195px));
  min-width: 0;
}
.dw-left {
  width: 240px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}
.dw-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}
.dw-right {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}
/* 内层滚动容器：把滚动从圆角卡片框移到内层，避免原生滚动条戳破圆角 */
.dw-panel-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dw-panel-head {
  padding: 1.125rem 1.25rem 0.875rem;
  border-bottom: 1px solid #f3f4f6;
}
.dw-section-label,
.dw-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #9ca3af;
}
.dw-section-label { padding: 1rem 1.25rem 0.5rem; }
.dw-group-label { margin-bottom: 0.625rem; }
.dw-left-foot {
  margin-top: auto;
  padding: 1rem 1.25rem;
  border-top: 1px solid #f3f4f6;
  font-size: 11px;
  line-height: 1.6;
  color: #9ca3af;
}

/* 颜色独立按钮：按钮内显示当前颜色圆点 */
.dw-colorbtn-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  display: block;
}

/* 取色菜单：预设色 + 自定义 + 恢复原色 */
.dw-color-menu { min-width: 176px; }
.dw-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 6px 8px 8px;
}
.dw-color-sw {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
}
.dw-color-sw:hover { transform: scale(1.12); }
.dw-color-sw.active {
  box-shadow: 0 0 0 2px #6366f1;
  border-color: #fff;
}
.dw-color-custom {
  position: relative;
  display: block;
  cursor: pointer;
  border-top: 1px solid #f3f4f6;
}
.dw-color-hidden {
  position: absolute;
  left: 12px;
  bottom: 4px;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  padding: 0;
}
/* 商品图槽 / 图形行：标题行与控件行之间保持间距，避免图标按钮贴住下方按钮 */
.dw-slot,
.dw-shape {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dw-slot > .dw-field-head,
.dw-shape > .dw-field-head {
  min-height: 24px;
  margin-bottom: 0;
}

/* 模板管理：图形色块预览 */
.dt-perm-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
  display: inline-block;
}

/* 模板管理 · 字段权限行（自动识别的文字/图片，默认关闭需勾选开放） */
.dt-perm-row {
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fafafa;
  transition: border-color 0.15s, background 0.15s;
}
.dt-perm-row.enabled {
  border-color: #c7d2fe;
  background: #f5f7ff;
}
.dt-perm-row.flash {
  animation: dtRowFlash 1.2s ease-out;
}
@keyframes dtRowFlash {
  0%, 40% { background: #eef2ff; border-color: #6366f1; }
  100% { background: #fafafa; border-color: #f3f4f6; }
}
.dt-perm-type {
  display: inline-flex;
  align-items: center;
  color: #9ca3af;
  flex-shrink: 0;
}
/* 图片字段缩略图 —— 一眼认出是哪张图 */
.dt-perm-thumb {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}

/* 预览高亮框：悬停字段行时标出画布上的对应元素 */
.dt-highlight {
  position: absolute;
  pointer-events: none;
  border: 2px solid #6366f1;
  border-radius: 2px;
  background: rgba(99, 102, 241, 0.12);
  z-index: 5;
  transition: all 0.1s ease-out;
}
.dt-highlight-tag {
  position: absolute;
  top: -22px;
  left: -2px;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-perm-row.enabled .dt-perm-type { color: #6366f1; }
.dt-perm-preview {
  margin-top: 4px;
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 分组选择器（模板管理：自定义下拉，不用浏览器原生 select） */
.dw-group-picker {
  position: relative;
  display: block;
}
.dw-select-wrap {
  position: relative;
  min-width: 0;
}

.dw-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.dw-select-trigger:hover { border-color: #c7d2fe; }
.dw-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-select-placeholder { color: #9ca3af; }
.dw-select-chevron { flex-shrink: 0; color: #9ca3af; }
/* 新建分组输入行 */
.dw-select-newrow {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dw-select-newtag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  background: #eef2ff;
  border-radius: 6px;
  padding: 4px 8px;
  white-space: nowrap;
}
.dw-select-newinput {
  flex: 1;
  min-width: 0;
}
.dw-select-newcancel {
  flex-shrink: 0;
  width: 34px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dw-select-newcancel:hover { color: #6b7280; border-color: #d1d5db; }
.dw-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 210;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.18);
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.dw-select-opt {
  padding: 8px 10px;
  font-size: 13px;
  color: #374151;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-select-opt:hover { background: #eef2ff; color: #6366f1; }
.dw-select-opt.selected { background: #eef2ff; color: #6366f1; font-weight: 600; }
.dw-select-new { color: #6366f1; border-top: 1px solid #f3f4f6; margin-top: 2px; }

/* 点击画布图片区弹出的替换菜单 */
.dw-slot-menu {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15);
  padding: 4px;
  min-width: 148px;
}
.dw-slot-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  color: #374151;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.dw-slot-menu-item:hover { background: #f3f4f6; color: #6366f1; }

/* 悬停画布图片时浮出的缩放工具条（贴在图片下沿） */
.dw-slot-bar {
  position: fixed;
  z-index: 210;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(17, 24, 39, .9);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(17, 24, 39, .3);
  animation: dwSlotBarIn .12s ease-out;
  white-space: nowrap;
}
/* 摆在目标下方时（icon 这类小目标）：向上补一条透明桥，盖住条与目标之间的
   空隙。指针从目标走到按钮全程都落在条自己身上，不会先碰到底下的图片，
   把这条工具条顶掉。 */
.dw-slot-bar-below::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}
@keyframes dwSlotBarIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dw-slot-bar-btn,
.dw-slot-bar-pct {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border: none;
  background: none;
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.dw-slot-bar-btn { width: 26px; }
/* 独立的文字按钮（更换图标 / 还原）：整颗胶囊，四角都圆。
   nowrap + flex:none 缺一不可：条是 fixed 定位，摆位之前它的初始位置可能贴着
   视口右缘，可用宽度接近 0，文字会竖着换行把按钮挤成一个圆，之后也撑不回来。 */
.dw-slot-bar-label {
  width: auto;
  flex: none;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.dw-slot-bar-pct { min-width: 48px; font-size: 12px; font-variant-numeric: tabular-nums; }
/* 拖动缩放的滑杆：细轨 + 白色圆点，压在深色条上 */
.dw-slot-bar-range {
  -webkit-appearance: none;
  appearance: none;
  width: 92px;
  height: 26px;
  margin: 0 4px;
  background: none;
  cursor: pointer;
}
.dw-slot-bar-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .32);
}
.dw-slot-bar-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.dw-slot-bar-range::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .32); }
.dw-slot-bar-range::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff; }
.dw-slot-bar-btn:hover,
.dw-slot-bar-pct:hover { background: rgba(255, 255, 255, .18); }
/* 点击「100%」原地变出的输入框：占同一格，样式贴按钮本体 */
.dw-slot-bar-pct-input {
  width: 48px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
}

/* 画布内联文字编辑框（双击画布文字浮出，原位改字） */
/* 浅色字自动换深色底（.dw-inline-edit-dark），否则白字白底看不见 */
.dw-inline-edit.dw-inline-edit-dark {
  background: rgba(17, 24, 39, 0.92);
  border-color: #818cf8;
}
.dw-inline-edit {
  position: fixed;
  z-index: 210;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.97);
  border: 1.5px solid #6366f1;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(17, 24, 39, 0.18);
  outline: none;
  line-height: 1.35;
  color: #111827;
}
/* 画布上的多行原位编辑：回车换行，Cmd/Ctrl+回车 写完 */
textarea.dw-inline-edit-multi {
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  font-family: inherit;
}

/* 模板分组折叠头 */
.dw-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  user-select: none;
  transition: color 0.15s;
}
.dw-group-header:hover { color: #374151; }
.dw-group-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.15s;
}
.dw-group-header.collapsed .dw-group-chevron { transform: rotate(-90deg); }
.dw-group-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dw-group-count {
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: 9px;
  padding: 0 7px;
  min-width: 18px;
  text-align: center;
  font-weight: 500;
}
.dw-group-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 8px;
}

/* 模板卡片 */
.dw-tpl-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dw-tpl-card:hover { border-color: #c7d2fe; }
.dw-tpl-card.active {
  border: 2px solid #6366f1;
  background: #eef2ff;
  padding: 7px 11px;
}
.dw-tpl-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dw-tpl-card.disabled:hover { border-color: #e5e7eb; }
.dw-tpl-name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}
.dw-tpl-desc {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

/* 上传/次级按钮 */
.dw-upload-btn {
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  color: #4b5563;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 11px 0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dw-upload-btn:hover {
  border-color: #6366f1;
  color: #1f2937;
}
/* 工具栏 */
.dw-toolbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  overflow-x: auto;
  min-width: 0;
}
.dw-btn-sm {
  padding: 0.5rem 1.125rem;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 靛蓝主按钮 —— 统一用系统强调色 #6366f1（覆盖 btn-primary 的蓝），对齐 .pl-search-btn 等 */
.dw-btn-indigo { background-color: #6366f1; }
.dw-btn-indigo:hover { background-color: #4f46e5; }
.dw-btn-indigo:active { background-color: #4338ca; }
.dw-zoom-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 18px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 3px 6px;
  flex-shrink: 0;
  /* 显式定高，别让内容说了算：这条原本是中间那行百分比（12px 字 × 默认行高）
     撑出来的 26px，隔壁撤销条里只有图标，跟着内容走就会矮 2px 对不齐 */
  height: 26px;
  box-sizing: border-box;
}
.dw-zoom-pill button {
  background: none;
  border: none;
  color: #4b5563;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
}
.dw-zoom-pill button:hover { color: #111827; }
.dw-zoom-pill div {
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  min-width: 42px;
  text-align: center;
  cursor: pointer;
}
/* 撤销/重做：紧挨缩放药丸，高度、padding、边框全部继承上面那条，只是挨得更紧 */
.dw-hist-pill {
  margin-left: 8px;
  gap: 4px;
}
.dw-hist-pill button {
  display: flex;
  align-items: center;
}
.dw-hist-pill button svg { display: block; }   /* 去掉基线留白，否则会高出 1px */
.dw-hist-pill button:disabled { opacity: .3; cursor: default; }
.dw-hist-pill button:disabled:hover { color: #4b5563; }

/* 画布区 */
.dw-canvas-scroll {
  flex: 1;
  overflow: auto;
  display: flex;
  padding: 28px;
  background: #f3f4f6;
  /* safe：内容放得下就居中，放不下就靠起始边对齐。
     普通 center（以及子元素 margin:auto）在内容溢出时会把起始边推到滚动区之外，
     那一侧就再也滚不到了——放大后左边/上边被永久截掉正是这个原因。 */
  justify-content: safe center;
  align-items: safe center;
}
.dw-svg-host {
  background: #fff;
  box-shadow: 0 4px 24px rgba(17, 24, 39, 0.12);
  border-radius: 2px;
}

/* 右栏字段 */
.dw-field { display: flex; flex-direction: column; gap: 5px; }
.dw-field-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dw-field-label {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}
.dw-lock-note {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #9ca3af;
}
.dw-lock-ico {
  flex-shrink: 0;
}
.dw-field-btns {
  margin-left: auto;
  display: flex;
  gap: 6px;
}
.dw-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s, border-color 0.15s;
}
.dw-icon-btn:hover {
  color: #4b5563;
  border-color: #c7d2fe;
}
.dw-icon-btn.active {
  color: #6366f1;
  border-color: #6366f1;
}
.dw-icon-btn.locked {
  color: #ef4444;
  border-color: #fca5a5;
  background: #fef2f2;
}
.dw-input {
  width: 100%;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.dw-input:focus {
  border-color: #6366f1;
  background: #fff;
}
.dw-input:disabled {
  opacity: 0.55;
  color: #9ca3af;
  cursor: not-allowed;
}
/* 限宽文字的多行输入：回车即手动换行 */
textarea.dw-input-multi {
  display: block;
  resize: vertical;
  min-height: 62px;
  line-height: 1.6;
}

/* 位置大小调整面板 */
.dw-adj-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 2px;
}
.dw-select {
  height: 32px;
  padding: 0 8px;
  font-size: 13px;
  color: #374151;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  outline: none;
}
.dw-select:focus {
  border-color: #6366f1;
}
.dw-ai-card {
  padding: 12px;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}
.dw-ai-note {
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #6b7280;
}
.dw-ai-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.dw-ai-color {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #4b5563;
}
.dw-ai-dot {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .08);
}
.dw-ai-line {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.6;
}
.dw-ai-key {
  flex: none;
  width: 74px;
  color: #9ca3af;
}
.dw-ai-val {
  flex: 1;
  color: #374151;
  word-break: break-all;
}
.dw-ai-acts {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.dw-auto-w {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}
.dw-auto-w input {
  width: 13px;
  height: 13px;
  accent-color: #6366f1;
  cursor: pointer;
}
.dw-slider-off {
  opacity: .45;
  pointer-events: none;
}

.dw-slider { display: flex; flex-direction: column; gap: 3px; }
.dw-slider-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #6b7280;
}
/* 滑杆右上角的数值可直接输入：外观仍像一段文字，聚焦才露出输入框的身份 */
.dw-slider-val { display: inline-flex; align-items: baseline; gap: 1px; }
.dw-slider-val input {
  width: 34px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.dw-slider-val input:focus { color: #4f46e5; }
.dw-slider input[type="range"],
#dw-img-adjust input[type="range"] {
  width: 100%;
  accent-color: #6366f1;
}

/* 链接式小按钮 */
.dw-link-btn {
  background: none;
  border: none;
  color: #9ca3af;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  padding: 0;
  transition: color 0.15s;
}
.dw-link-btn:hover { color: #4b5563; }

/* 管理员模式开关 */
.dw-toggle {
  width: 34px;
  height: 20px;
  border-radius: 10px;
  background: #d1d5db;
  position: relative;
  transition: background 0.15s;
}
.dw-toggle.on { background: #6366f1; }
.dw-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.dw-toggle.on .dw-toggle-knob { left: 16px; }

/* 素材选择器 · 产品档案内的二级 Tab */
.archive-tab {
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.archive-tab:hover { background: #f3f4f6; color: #374151; }
.archive-tab.active { background: #eef2ff; color: #6366f1; border-color: #e0e7ff; }
.archive-tab-count { font-size: 11px; opacity: .7; }
.archive-sim-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: rgba(17, 24, 39, .62);
  pointer-events: none;
}

/* 文案字体设置面板 */
.dw-font-panel { display: flex; flex-direction: column; gap: 10px; }
.dw-font-row { display: flex; align-items: center; gap: 8px; }
.dw-font-label { flex: none; width: 30px; font-size: 12px; color: #6b7280; }
.dw-font-picker { flex: 1; min-width: 0; }
.dw-font-picker .dw-select-trigger { height: 30px; font-size: 12px; }
.dw-seg {
  flex: 1;
  display: flex;
  gap: 4px;
}
.dw-seg-btn {
  flex: 1;
  height: 28px;
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dw-seg-btn:hover { background: #f3f4f6; color: #374151; }
.dw-seg-btn.active { background: #eef2ff; color: #6366f1; border-color: #c7d2fe; }
.dw-adj-sep { height: 1px; background: #f3f4f6; margin: 2px 0; }

/* 字段名过长时截断，按钮组不参与压缩——否则长 id 会把按钮挤出容器 */
.dt-ellipsis {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dt-perm-row .dw-field-btns { flex: none; }
.dt-design-head { cursor: pointer; }
.dt-design-kind {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: #9ca3af;
  background: #f3f4f6;
}
.dt-design-chev { flex: none; color: #9ca3af; display: inline-flex; transition: transform .15s; }
.dt-design-chev.open { transform: rotate(180deg); color: #6366f1; }

/* 设计面板与标题行之间留出呼吸；标题行本身也加高一点 */
.dt-design-head { padding: 2px 0 0; }
.dt-perm-row .dt-design-head + .dw-adj-panel { margin-top: 10px; }

/* 模板设计 · 原始态工具条 */
.dt-origin-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: #f9fafb;
  border: 1px dashed #e5e7eb;
  border-radius: 8px;
}
.dt-origin-tip { flex: 1; font-size: 12px; color: #9ca3af; }
.dt-origin-bar .dw-link-btn { flex: none; }

/* 模板上传中：按钮转圈 + 弹窗整体锁住，避免重复点击造成重复上传 */
.dt-modal-overlay.is-busy { cursor: progress; }
#dt-upload-submit.is-busy {
  position: relative;
  padding-left: 30px;
  opacity: 1;
}
#dt-upload-submit.is-busy::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dt-spin .7s linear infinite;
}
@keyframes dt-spin { to { transform: rotate(360deg); } }
#dt-upload-submit:disabled,
#dt-upload-cancel:disabled,
#dt-upload-pick:disabled { cursor: not-allowed; }
#dt-upload-pick:disabled { opacity: .5; }

/* 互斥选项：一行放得下就平铺，放不下自动换行 */
.dw-opt-seg { flex-wrap: wrap; }
.dw-opt-seg .dw-seg-btn { flex: 1 1 auto; min-width: 56px; padding: 0 8px; }

/* ============ icon 库 (design-icons) ============ */
/* 卡片刻意做成「图形在上、文案在下」——和模板里 icon 的真实排布一致，
   这样在库里看到的样子就是它落到画布上的样子。 */
.di-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 0.875rem;
}
.di-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  padding: 18px 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.di-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.1);
}
.di-card-glyph {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.di-glyph-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.di-card-caption {
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  line-height: 1.35;
  width: 100%;
  overflow-wrap: anywhere;
}
.di-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #9ca3af;
  padding: 2rem 0;
}

.di-group-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.di-chip {
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  transition: all 0.15s;
}
.di-chip:hover { border-color: #c7d2fe; color: #4f46e5; }
.di-chip.active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4f46e5;
  font-weight: 600;
}

/* 新增弹窗里的待提交列表：一行一个「图形 + 文案输入」 */
.di-pending {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.di-pending-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.di-pending-glyph {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.di-pending-del {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  color: #9ca3af;
  font-size: 18px;
  line-height: 1;
}
.di-pending-del:hover { background: #fee2e2; color: #dc2626; }

.di-edit-preview {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

/* ============ 画板 · icon 更换 ============ */
.dw-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dw-icon-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid #f3f4f6;
  border-radius: 8px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.dw-icon-thumb { position: relative; }
.dw-icon-seq {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #6366f1;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}
.dw-icon-row.is-hidden .dw-icon-thumb,
.dw-icon-row.is-hidden .dw-icon-name {
  opacity: 0.4;
}
.dw-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.dw-icon-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.dw-icon-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  max-width: 100%;
}
/* 右栏一行三格（缩略图 + 名称 + 按钮），按钮用常规尺寸会把名称挤没 */
.dw-icon-swap {
  padding: 0.3125rem 0.625rem;
  font-size: 12px;
  border-radius: 0.4375rem;
}

/* 选择器弹窗里的库网格 */
.dw-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.625rem;
  max-height: 340px;
  overflow-y: auto;
}
.dw-icon-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  background: #fff;
  padding: 12px 8px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dw-icon-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 3px 10px rgba(79, 70, 229, 0.1);
}
.dw-icon-card.active {
  border-color: #6366f1;
  background: #eef2ff;
}
.dw-icon-card-glyph {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dw-icon-card-cap {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  text-align: center;
  line-height: 1.3;
  width: 100%;
  overflow-wrap: anywhere;
}
.dw-icon-empty {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #9ca3af;
  padding: 1.5rem 0;
  text-align: center;
}

/* 装饰图形的行内缩略图：「图形 1/2/3」这种名字认不出是哪件，配图才分得清 */
.dw-deco-thumb {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  margin-right: 7px;
  border: 1px solid #f3f4f6;
  border-radius: 6px;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
}
/* 白色/浅色图形在浅底上看不见，换深底 */
.dw-deco-thumb.dark {
  background: #374151;
  border-color: #4b5563;
}
.dw-deco-thumb-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 模板名称：平时像标题，悬停/聚焦才露出输入框边界，提示可改名 */
.dt-name-input {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 4px 8px;
  min-width: 120px;
  max-width: 320px;
  transition: border-color 0.15s, background 0.15s;
}
.dt-name-input:hover {
  border-color: #e5e7eb;
  background: #f9fafb;
}
.dt-name-input:focus {
  outline: none;
  border-color: #a5b4fc;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.12);
}

/* 区块（积木）面板 */
.dw-block-row {
  display: flex;
  align-items: center;
  gap: 8px;
  /* 拖动指示线画在 border 上，常态留一条透明的，避免加线时行高跳动 */
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.dw-block-drag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  margin-left: -4px;
  color: #c4c9d2;
  cursor: grab;
  flex-shrink: 0;
}
.dw-block-drag:hover { color: #6b7280; }
.dw-block-drag:active { cursor: grabbing; }
.dw-block-drag svg { width: 16px; height: 16px; }
.dw-block-row.dw-dragging { opacity: 0.4; }
.dw-block-row.dw-drag-over-top { border-top-color: #6366f1; }
.dw-block-row.dw-drag-over-bot { border-bottom-color: #6366f1; }
.dw-block-btn {
  width: 26px;
  height: 26px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.dw-block-btn:hover:not(:disabled) { border-color: #c7d2fe; color: #4f46e5; }
.dw-block-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.dw-block-count {
  min-width: 22px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1f2937;
}
/* 文案位置：与 ↑↓−＋ 同款方块，内容是缩略图而非文字，需居中 */
.dw-block-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 画板 · 属性行选择器。库里 22 条，整行画出来一张卡就占半屏、一次只看得到两条，
   所以缩略图只截三个图标那一条，配文字排成两列 —— 一屏能扫到十条上下 */
.dw-fitrow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.dw-fitrow-group {
  grid-column: 1 / -1;      /* 分组标题独占一整行 */
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  padding: 8px 2px 0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.dw-fitrow-group:first-child { padding-top: 0; }
.dw-fitrow-card {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 5px 8px 5px 5px;
  cursor: pointer;
  background: #fff;
}
.dw-fitrow-card:hover { border-color: #c7d2fe; }
.dw-fitrow-card.active { border-color: #6366f1; background: #f5f6ff; }
/* 图标比文案重要：文案是「五分款 / 七分款 / 九分款」这种一眼扫过的东西，
   而要分辨「裤子的版型」和「内裤的版型」全靠圈里那三个图形。宽度给图不给字。 */
.dw-fitrow-img { display: block; width: 154px; height: auto; flex: none; }
.dw-fitrow-txt { flex: 1 1 auto; min-width: 0; }
.dw-fitrow-badge {
  flex: none;
  font-size: 10.5px;
  color: #b6bcc7;
  font-variant-numeric: tabular-nums;
}
.dw-fitrow-cap,
.dw-fitrow-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-fitrow-cap { font-size: 12.5px; font-weight: 600; color: #1f2937; }
.dw-fitrow-sub { font-size: 11px; color: #9ca3af; margin-top: 2px; }

/* 画板 · 卖点标注：拖动发生在画布上，面板这行只报状态、给个复位 */
.dw-callout-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.dw-callout-name { color: #1f2937; flex: 0 1 auto; min-width: 0; }
.dw-callout-tip {
  color: #9ca3af;
  font-size: 12px;
  margin-left: auto;
  white-space: nowrap;
}
.dw-callout-reset {
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  color: #374151;
  font-size: 12px;
  line-height: 1;
  padding: 5px 8px;
  flex-shrink: 0;
}
.dw-callout-reset:hover { border-color: #c7d2fe; color: #4f46e5; }

/* 画板 · 尺码表积木的设置弹窗。
   宽度按「部位勾满一行也不用横向滚」定：8 列 × 72 + 表头 = 700 上下 */
.dw-table-modal {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  /* 尺码勾满 9 行 × 部位 15 项，弹窗会超出矮屏——整体可滚，别把「完成」顶出屏幕 */
  max-height: calc(100vh - 2rem);
}
/* 滚动条挂在弹窗上而不是内容区：内容区一裁，推荐表那个下拉就被切掉半截 */
.dw-table-modal { overflow-y: auto; position: relative; }
/* 右上角关闭。就排在标题那一行里——弹窗自身可滚动，absolute/sticky 在这种容器里
   要么定位到左边要么滚出视野，不如老老实实占一格 */
.dw-modal-close {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin: -2px -4px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dw-modal-close:hover { background: #f3f4f6; color: #4b5563; }
.dw-table-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dw-select-menu-up {
  top: auto;
  bottom: calc(100% + 4px);
  max-height: 260px;
}
.dw-select-muted { color: #9ca3af; }

/* 截图识别面板：左边一块投图区，右边模型 + 识别按钮 */
.dw-ocr {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  margin-bottom: 14px;
  border: 1px solid #eef0f4;
  border-radius: 10px;
  background: #fafbfc;
}
/* 拖 / 贴 / 点 三条路等价，所以整块都是投放目标，也整块可点 */
.dw-ocr-zone {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed #d5d9e0;
  border-radius: 8px;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dw-ocr-zone:hover { border-color: #c7d2fe; }
.dw-ocr-zone.over { border-color: #6366f1; background: #eef2ff; }
.dw-ocr-zone.has { border-style: solid; }
.dw-ocr-icon { flex-shrink: 0; color: #9ca3af; }
/* 缩略图按原比例缩，别把一张宽表压成方块——用户要靠它认出是哪张 */
.dw-ocr-thumb {
  flex-shrink: 0;
  width: 68px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  border-radius: 4px;
  background: #f3f4f6;
}
.dw-ocr-meta { min-width: 0; flex: 1; }
/* 上传 / 清空：贴在投图区右端，点它们不触发整块的「点一下即上传」 */
.dw-ocr-acts {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dw-ocr-name {
  font-size: 13px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-ocr-hint { font-size: 11px; color: #9ca3af; margin-top: 2px; }
.dw-ocr-side {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.dw-ocr-run { width: 100%; }
.dw-ocr-run:disabled { opacity: .5; cursor: not-allowed; }
/* 性别是二选一，用分段控件（与模板选项同款），不跟下面的多选混为一谈 */
.dw-table-seg {
  flex: none;
  width: 240px;      /* 女士 / 男士 / 通用 三档 */
}
.dw-chip-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.dw-chip-label {
  flex-shrink: 0;
  width: 40px;
  padding-top: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}
.dw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
/* 与 .dw-seg-btn 同一套观感（面板里所有可选项都长这样），差别只在这里是多选、
   要换行，所以不铺满一行、宽度随字走 */
.dw-chip {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  color: #6b7280;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dw-chip:hover { background: #f3f4f6; color: #374151; }
.dw-chip.on { background: #eef2ff; color: #6366f1; border-color: #c7d2fe; }
.dw-chip-add { color: #9ca3af; border-style: dashed; }

/* 尺码 × 部位 输入网格：列数随勾选变化，由脚本写 grid-template-columns。
   部位勾到十几项时仍会超出弹窗，那时才横向滚 */
.dw-grid-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}
.dw-table-grid {
  display: grid;
  gap: 5px;
  align-items: center;
}
.dw-grid-head {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dw-grid-size { color: #4b5563; font-weight: 600; }
.dw-grid-cell {
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
}

/* 模板管理 · 区块标注 */
.dt-block-sec {
  border: 1px solid #eef0f4;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #fafbfc;
}
.dt-block-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dt-block-num { width: 52px; text-align: center; }
/* 文本位置标注：区块行下面缩进一层，视觉上从属于该区块 */
.dt-block-pos {
  margin: 2px 0 8px 10px;
  padding-left: 10px;
  border-left: 2px solid #eef0f4;
}
.dt-block-pos-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.dt-block-pos-sel { flex: 0 0 118px; font-size: 12px; }
.dt-block-pos-name { flex: 0 0 78px; font-size: 12px; }
.dt-block-pos-alt { flex: 0 0 64px; font-size: 12px; text-align: center; }

/* ── 画板导出合并入口（主按钮 + 下拉） ───────────────────── */
.dw-export-group { position: relative; gap: 0; }
.dw-export-group .dw-export-main { border-radius: 8px 0 0 8px; }
.dw-export-group .dw-export-caret {
  border-radius: 0 8px 8px 0;
  padding-left: 7px; padding-right: 7px;
  margin-left: 1px;
  display: inline-flex; align-items: center;
}
.dw-export-menu {
  /* fixed + JS 定位：工具栏卡片带 overflow，absolute 会被裁 */
  position: fixed;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
  padding: 4px; min-width: 168px; z-index: 90;
}
.dw-export-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; font-size: 13px; color: #374151;
  border-radius: 7px;
}
.dw-export-menu button:hover { background: #f3f4f6; color: #111827; }

/* ── 保存到产品档案弹窗 ───────────────────────────────── */
.dw-archive-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(17, 24, 39, .35);
  display: flex; align-items: center; justify-content: center;
}
.dw-archive-dialog {
  width: 420px; max-width: calc(100vw - 48px);
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 16px 48px rgba(17, 24, 39, .22);
  display: flex; flex-direction: column; gap: 10px;
}
.dw-archive-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #111827; }
.dw-archive-head button { color: #9ca3af; padding: 2px 6px; border-radius: 6px; }
.dw-archive-head button:hover { background: #f3f4f6; color: #374151; }
.dw-archive-input {
  width: 100%; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: 8px 10px; font-size: 13px; outline: none;
}
.dw-archive-input:focus { border-color: #6366f1; }
.dw-archive-board {
  display: flex; gap: 12px; align-items: stretch;
  background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 10px; padding: 10px;
}
.dw-archive-board .thumb {
  width: 64px; height: 64px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: #fff; border: 1px solid #e5e7eb; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.dw-archive-board .thumb img { width: 100%; height: 100%; object-fit: contain; display: none; }
.dw-archive-board .thumb img[src] { display: block; }
.dw-archive-board .thumb .ph { position: absolute; font-size: 10px; color: #c4c8cf; text-align: center; padding: 0 4px; }
.dw-archive-board .thumb img[src] + .ph { display: none; }
.dw-archive-board .bd { flex: 1; display: flex; flex-direction: column; gap: 5px; justify-content: center; min-width: 0; }
.dw-archive-board .lb { font-size: 12px; color: #6b7280; font-weight: 500; padding-left: 2px; }
.dw-archive-board .tpl { font-size: 12px; color: #9ca3af; padding-left: 2px; }
.dw-archive-list {
  max-height: 264px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid #f3f4f6; border-radius: 10px; padding: 4px;
}
.dw-archive-item {
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #374151;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent;
}
.dw-archive-item:hover { background: #f3f4f6; }
.dw-archive-item.active { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.dw-archive-item .av {
  width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
  background: #f3f4f6; border: 1px solid #eef0f3;
}
.dw-archive-item .av.noimg { display: flex; align-items: center; justify-content: center; color: #c4c8cf; font-size: 12px; }
.dw-archive-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-archive-item .sn { color: #9ca3af; font-size: 12px; flex-shrink: 0; }
.dw-archive-item .last {
  font-size: 10px; color: #6366f1; background: #eef2ff;
  padding: 1px 6px; border-radius: 999px; flex-shrink: 0;
}
.dw-archive-item .ck { width: 16px; text-align: center; color: #6366f1; flex-shrink: 0; visibility: hidden; }
.dw-archive-item.active .ck { visibility: visible; }
.dw-archive-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dw-archive-foot .picked { font-size: 12px; color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-archive-foot .picked.on { color: #4338ca; }
.dw-archive-foot button[disabled] { opacity: .5; cursor: not-allowed; }
.dw-archive-hint { font-size: 11px; color: #c4c8cf; text-align: center; }

/* ── 档案：设计画板存档卡片 ───────────────────────────── */
.arc-db-card {
  background: #fff; border: 1px solid #f3f4f6; border-radius: 14px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
  display: flex; flex-direction: column;
}
.arc-db-card .thumb {
  aspect-ratio: 1 / 1; background: #f9fafb;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.arc-db-card .thumb img { width: 100%; height: 100%; object-fit: contain; }
.arc-db-card .thumb.zoom { cursor: zoom-in; }
.arc-db-card .thumb .noimg { color: #d1d5db; font-size: 12px; }
.arc-db-card .meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.arc-db-card .meta .name { font-size: 13px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-db-card .meta .sub { font-size: 12px; color: #9ca3af; display: flex; justify-content: space-between; gap: 6px; }
/* 保存人 + 模板 + 时间挤一行，长了省略号，删除按钮不被挤走 */
.arc-db-card .meta .sub > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-db-card .meta .sub .del { color: #ef4444; cursor: pointer; visibility: hidden; flex-shrink: 0; }
.arc-db-card:hover .meta .sub .del { visibility: visible; }
.arc-db-card .imp {
  margin-top: 8px; width: 100%;
  padding: 6px 0; font-size: 12px; font-weight: 500;
  color: #4f46e5; background: #eef2ff; border-radius: 8px;
}
.arc-db-card .imp:hover { background: #e0e7ff; }

/* ── 画板/弹窗滚动条：透明轨道 + 细圆滑块，不再压圆角 ─────── */
.dw-panel-scroll::-webkit-scrollbar,
.dw-canvas-scroll::-webkit-scrollbar,
.dw-archive-list::-webkit-scrollbar { width: 8px; height: 8px; }
.dw-panel-scroll::-webkit-scrollbar-track,
.dw-canvas-scroll::-webkit-scrollbar-track,
.dw-archive-list::-webkit-scrollbar-track { background: transparent; }
.dw-panel-scroll::-webkit-scrollbar-thumb,
.dw-canvas-scroll::-webkit-scrollbar-thumb,
.dw-archive-list::-webkit-scrollbar-thumb {
  background: #d3d6db; border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.dw-panel-scroll::-webkit-scrollbar-thumb:hover,
.dw-canvas-scroll::-webkit-scrollbar-thumb:hover,
.dw-archive-list::-webkit-scrollbar-thumb:hover { background-color: #b7bcc4; }
.dw-panel-scroll::-webkit-scrollbar-corner,
.dw-canvas-scroll::-webkit-scrollbar-corner { background: transparent; }
.dw-panel-scroll, .dw-canvas-scroll, .dw-archive-list {
  scrollbar-width: thin; scrollbar-color: #d3d6db transparent;   /* Firefox */
}

/* ── 从档案导入画板（左档案 / 右存档） ─────────────────── */
.dw-import-dialog { width: 680px; }
.dw-import-body { display: flex; gap: 12px; min-height: 0; }
.dw-import-left { width: 268px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.dw-import-left .dw-archive-list { max-height: 320px; }
.dw-import-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.dw-import-rt { font-size: 12px; color: #9ca3af; padding: 2px 2px 0; }
.dw-import-right .dw-archive-list { max-height: 320px; flex: 1; }
.dw-import-board {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  font-size: 13px; color: #374151;
}
.dw-import-board:hover { background: #f3f4f6; }
.dw-import-board .pv {
  width: 38px; height: 38px; border-radius: 6px; object-fit: contain; flex-shrink: 0;
  background: #f9fafb; border: 1px solid #eef0f3;
}
.dw-import-board .pv.noimg { display: flex; align-items: center; justify-content: center; color: #c4c8cf; font-size: 11px; }
.dw-import-board .bx { flex: 1; min-width: 0; }
.dw-import-board .bx .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-import-board .bx .mt { font-size: 11px; color: #9ca3af; }
.dw-import-board .go {
  flex-shrink: 0; font-size: 12px; font-weight: 500; color: #4f46e5;
  background: #eef2ff; padding: 4px 10px; border-radius: 7px;
}
.dw-import-board:hover .go { background: #e0e7ff; }
.dw-block-off .dw-field-label { color: #b7bcc4; }

/* ══════════ 版型图标库 ══════════ */
.dfi-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.dfi-tab {
  padding: 5px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #6b7280;
}
.dfi-tab.active { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; font-weight: 600; }

.dfi-attr-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dfi-chip {
  padding: 3px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: #6b7280;
}
.dfi-chip.active { background: #111; border-color: #111; color: #fff; }

.dfi-empty { color: #9ca3af; font-size: 13px; padding: 40px 0; text-align: center; }

/* 图标卡：一张卡里并排两态，差别一眼看得出——这正是要核对的东西。
   缩略图只裁圆圈那块（药丸和标签每个图标都一样，而标签是 26px、画出来占掉大半格），
   文案改用 HTML 摆在下面。同样的屏幕能多摆三四倍。 */
.dfi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.dfi-grid-groups { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
.dfi-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 5px; background: #fff; }
/* 点卡片进编辑弹窗，悬停的反馈跟 icon 库（.di-card）一致 */
.dfi-card-edit { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.dfi-card-edit:hover { border-color: #c7d2fe; box-shadow: 0 4px 14px rgba(79, 70, 229, .1); }
.dfi-card-group { cursor: pointer; padding: 6px 7px 7px; }
.dfi-card-group:hover { border-color: #c7d2fe; }
.dfi-card-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; min-width: 0; }
.dfi-name {
  font-size: 11.5px;
  color: #1f2937;
  margin-top: 3px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dfi-card-head .dfi-name { font-size: 12.5px; font-weight: 600; margin-top: 0; text-align: left; }
.dfi-meta { font-size: 10.5px; color: #9ca3af; margin-left: auto; flex: none; }
.dfi-pair { display: flex; gap: 3px; }
.dfi-pair .dfi-cell { width: 50%; }
.dfi-row { display: flex; gap: 4px; }
.dfi-col { width: 33.33%; min-width: 0; }
.dfi-col-name {
  font-size: 10.5px;
  color: #6b7280;
  text-align: center;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dfi-col-name.on { color: #111; font-weight: 600; }
.dfi-cell { display: block; height: auto; background: #f6f8fa; border-radius: 5px; }
.dfi-cell-icon { border-radius: 50%; }
/* 缺一态时给个空位，不要让另一态撑满整张卡冒充「传全了」 */
.dfi-cell-empty { aspect-ratio: 1; background: repeating-linear-gradient(45deg, #f6f8fa, #f6f8fa 5px, #eef1f4 5px, #eef1f4 10px); }
.dfi-warn { margin-top: 3px; font-size: 10.5px; color: #c2410c; background: #fff7ed; border-radius: 4px; padding: 1px 5px; text-align: center; }

/* 拖放区 */
.dfi-drop {
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  padding: 26px 16px;
  text-align: center;
  background: #fafbfc;
}
.dfi-drop-over { border-color: #6366f1; background: #eef2ff; }
.dfi-drop-main { font-size: 14px; color: #374151; font-weight: 600; }
.dfi-drop-sub { font-size: 12px; color: #9ca3af; margin-top: 5px; }
.dfi-link { color: #4f46e5; text-decoration: underline; }

.dfi-up-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; max-height: 44vh; overflow-y: auto; }
.dfi-up-row { border: 1px solid #e5e7eb; border-radius: 8px; padding: 5px; }
/* 只配到一态的挑出来：能提交，但得让人看见 */
.dfi-up-half { border-color: #fdba74; background: #fffbf5; }
.dfi-up-name { font-size: 11.5px; color: #374151; margin-top: 3px; text-align: center; }
/* 后端退回来的：原因写在格子里，toast 一闪就没了，而这行是要照着去改文件的 */
.dfi-up-bad { border-color: #fca5a5; background: #fef2f2; }
.dfi-up-why { font-size: 10.5px; color: #b91c1c; margin-top: 3px; line-height: 1.45; }

/* 组编辑：上方三档是次序，下方是可选池。
   弹窗整体兜一层滚动——档位槽 + 可选池 + 三个输入框，矮屏上必然超出一屏，
   没有这层的话「保存」会被顶出可视区，人只能盲点。 */
.dfi-grp-body { max-height: calc(100vh - 15rem); overflow-y: auto; padding-right: 4px; }
.dfi-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dfi-slot { border: 1px solid #e5e7eb; border-radius: 9px; padding: 6px; cursor: pointer; }
.dfi-slot:hover { border-color: #fca5a5; }
/* 槽位里的圆圈别铺满整格：一格三分之一个弹窗宽，铺满就是两百多像素 */
.dfi-slot .dfi-cell { width: 74px; margin: 0 auto; }
.dfi-slot-empty {
  border-style: dashed;
  color: #9ca3af;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  cursor: default;
}
.dfi-slot-name { font-size: 11.5px; color: #374151; text-align: center; margin-top: 2px; }
.dfi-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; max-height: 30vh; overflow-y: auto; padding-right: 4px; }
.dfi-pool-item { border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px; cursor: pointer; }
.dfi-pool-item:hover { border-color: #c7d2fe; }
.dfi-pool-item.picked { opacity: .35; cursor: default; }
.dfi-pool-item .dfi-cell { width: 100%; }

/* ============ 组合画板 (ComboBoard + DWBatch) ============ */
.cb-panel { display: flex; flex-direction: column; gap: 12px; padding: 1rem 1.125rem; }
/* 画布区与快速画板同一视觉：灰底 + 白纸投影 */
.cb-stage-wrap {
  flex: 1; min-height: 0; padding: 28px; display: flex;
  background: #f3f4f6;
}
.cb-stage-wrap { position: relative; }
.cb-stage { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.cb-slot-tools {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 2px; padding: 3px 4px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 9px;
  box-shadow: 0 4px 16px rgba(17, 24, 39, .14); white-space: nowrap;
}
.cb-slot-tools .lb {
  font-size: 12px; font-weight: 600; color: #4f46e5; padding: 0 6px;
  border-right: 1px solid #f3f4f6; margin-right: 2px;
}
.cb-slot-tools button {
  font-size: 12px; color: #374151; padding: 3px 8px; border-radius: 6px;
}
.cb-slot-tools button:hover { background: #f3f4f6; }
.cb-stage svg { touch-action: none; background: #fff; box-shadow: 0 4px 24px rgba(17, 24, 39, 0.12); border-radius: 2px; }
.cb-stage-empty { font-size: 13px; color: #9ca3af; }
.cb-results-panel {
  margin-top: 1rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 12px 14px;
}
.cb-results-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 8px;
}
.cb-results { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cb-res-item {
  /* width 与 min-width 双保险：flex 子项默认 min-width:auto，卡里 nowrap 的长
     组合名会把卡撑到内容宽，整条结果条比画布还大 */
  position: relative; flex: 0 0 110px; width: 110px; min-width: 0; overflow: hidden;
  cursor: pointer;
  border: 1px solid #eef0f4; border-radius: 10px; padding: 4px;
  display: flex; flex-direction: column; gap: 2px;
}
.cb-res-item:hover { border-color: #c7d2fe; }
.cb-res-item.active { border-color: #6366f1; background: #f8faff; }
.cb-res-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fafafa; border-radius: 6px; }
.cb-res-item span {
  display: block; width: 100%; font-size: 11px; color: #6b7280; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dwb-sec { border: 1px solid #eef0f4; border-radius: 10px; padding: 10px 12px; }
.dwb-sec-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #111827; margin-bottom: 8px; }
.dwb-step {
  width: 18px; height: 18px; border-radius: 50%; background: #eef2ff; color: #4f46e5;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dwb-hint { font-size: 12px; font-weight: 400; color: #9ca3af; }
.dwb-mode { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.dwb-seg {
  display: flex; border: 1px solid #e5e7eb; border-radius: 9px; overflow: hidden; background: #f9fafb;
}
.dwb-seg button {
  flex: 1; font-size: 12.5px; padding: 6px 0; color: #6b7280; white-space: nowrap;
}
.dwb-seg button + button { border-left: 1px solid #e5e7eb; }
.dwb-seg button.active { background: #eef2ff; color: #4f46e5; font-weight: 600; }
.dwb-btn-lite { font-size: 12px; padding: 4px 10px; border-radius: 8px; border: 1px solid #e5e7eb; color: #374151; }
.dwb-btn-lite:hover { background: #f9fafb; }
.dwb-mat-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.dwb-mat-name { flex: 0 0 130px; }
.dwb-mat-cell {
  width: 52px; height: 52px; border: 1px dashed #c9cdd6; border-radius: 8px; background: #f8f9fb;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 11px; color: #9aa1ad; overflow: hidden; flex-shrink: 0; text-align: center;
}
.dwb-mat-cell:hover { border-color: #818cf8; color: #4f46e5; }
.dwb-mat-cell img { width: 100%; height: 100%; object-fit: contain; }
.dwb-mat-del { color: #9ca3af; padding: 2px 6px; border-radius: 6px; margin-left: auto; }
.dwb-mat-del:hover { background: #fef2f2; color: #dc2626; }
.dwb-mat-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dwb-strats { display: flex; flex-wrap: wrap; gap: 8px; }
.dwb-strat {
  flex: 1 1 160px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; cursor: pointer;
}
.dwb-strat input { display: none; }
.dwb-strat.active { border-color: #818cf8; background: #eef2ff; }
.dwb-strat .t { font-size: 13px; font-weight: 600; color: #111827; }
.dwb-strat .h { font-size: 11px; color: #9ca3af; line-height: 1.5; }
.dwb-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; margin-top: 10px; }
.dwb-combo {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px;
  border: 1px solid #f3f4f6; cursor: pointer; font-size: 12px; color: #374151;
}
.dwb-combo.active { border-color: #e0e7ff; background: #f8faff; }
.dwb-combo img { width: 30px; height: 30px; object-fit: contain; background: #f3f4f6; border-radius: 5px; }
.dwb-combo span { margin-left: 4px; }
.dwb-progress { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.dwb-progress .bar { flex: 0 0 140px; height: 6px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.dwb-progress .bar > div { height: 100%; width: 0; background: #6366f1; transition: width .2s; }
.dwb-progress span { font-size: 12px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwb-arc-pop { margin-top: 8px; border: 1px solid #eef0f4; border-radius: 10px; padding: 8px; }
.dwb-arc-list { max-height: 160px; overflow-y: auto; margin-top: 6px; }
.dwb-arc-item { padding: 6px 8px; border-radius: 6px; font-size: 13px; color: #374151; cursor: pointer; }
.dwb-arc-item:hover { background: #f3f4f6; }
.dwb-cell-menu {
  position: fixed; z-index: 120; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(17, 24, 39, .14);
  display: flex; flex-direction: column; min-width: 130px; padding: 4px; overflow: hidden;
}
.dwb-cell-menu button { text-align: left; font-size: 13px; color: #374151; padding: 7px 10px; border-radius: 7px; }
.dwb-cell-menu button:hover { background: #f3f4f6; }
.dwb-res-dl {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  width: 22px; height: 22px; border-radius: 6px; background: rgba(255,255,255,.92);
  border: 1px solid #e5e7eb; color: #6b7280; font-size: 12px;
  display: none; align-items: center; justify-content: center;
}
.cb-res-item:hover .dwb-res-dl { display: flex; }
.dwb-res-dl:hover { color: #4f46e5; border-color: #c7d2fe; }
.dp2-stats { display: flex; align-items: center; gap: 6px; margin-left: 6px; flex-wrap: wrap; }
.dp2-stat {
  font-size: 11px; color: #6b7280; padding: 1px 7px; border-radius: 999px;
  background: #f3f4f6; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dp2-stat b { color: #374151; font-weight: 600; }
/* 全局进度（生成全部指令 / 分析） */
.dp2-progress { display: flex; align-items: center; gap: 10px; margin: -4px 2px 10px; }
.dp2-main .dp2-progress { margin: -2px 0 10px; }
.dp2-progress.hidden { display: none; }
.dp2-progress-track { flex: 1; height: 4px; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.dp2-progress-bar { height: 100%; background: #2563eb; border-radius: 999px; transition: width .4s ease; }
.dp2-progress-text { font-size: 12px; color: #6b7280; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 双栏布局 ── */
.dp2-layout {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start;
}
@media (max-width: 1024px) { .dp2-layout { grid-template-columns: 1fr; } }

.dp2-side {
  position: sticky; top: 80px;
  max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 1rem; padding-right: 2px;
  scrollbar-width: thin;
}
.dp2-side::-webkit-scrollbar { width: 4px; }
.dp2-side::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

.dp2-panel {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem;
}
.dp2-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.dp2-panel-title { font-size: 0.875rem; font-weight: 600; color: #1f2937; }
.dp2-panel-count { font-size: 0.75rem; color: #9ca3af; font-variant-numeric: tabular-nums; }
.dp2-panel-hint { font-size: 0.75rem; color: #9ca3af; margin-top: 0.5rem; line-height: 1.5; }
.dp2-details > summary::-webkit-details-marker { display: none; }
.dp2-summary { cursor: pointer; list-style: none; margin-bottom: 0; user-select: none; }
.dp2-details[open] .dp2-summary { margin-bottom: 8px; }
.dp2-chevron { width: 14px; height: 14px; color: #9ca3af; transition: transform .15s; }
.dp2-details[open] .dp2-chevron { transform: rotate(180deg); }
.dp2-textarea {
  width: 100%; font-size: 0.8125rem; line-height: 1.6; color: #374151; box-sizing: border-box;
  border: 1px solid #d1d5db; border-radius: 0.5rem; padding: 0.5rem 0.75rem;
  resize: none; overflow: hidden; min-height: 56px;
}
.dp2-textarea:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

/* 素材缩略图 */
.dp2-thumb-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.dp2-thumb {
  position: relative; width: 56px; height: 74px; border-radius: 0.5rem; overflow: hidden;
  border: 1px solid #e5e7eb; background: #f3f4f6; cursor: zoom-in;
}
.dp2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp2-thumb-person { border-color: #fcd34d; }
.dp2-thumb-scene { border-color: #99f6e4; }
.dp2-thumb-del {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(17,24,39,.55); color: #fff; border: none; font-size: 12px; line-height: 1;
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.dp2-thumb:hover .dp2-thumb-del { display: flex; }
.dp2-thumb.is-expired { border-color: #fca5a5; cursor: default; }
.dp2-thumb.is-expired img { filter: grayscale(1); opacity: .4; }
.dp2-thumb.is-expired .dp2-thumb-del { display: flex; }
.dp2-thumb-expired {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 0;
  background: rgba(239,68,68,.9); color: #fff; font-size: 10px; line-height: 1.5;
  text-align: center; pointer-events: none;
}
.dp2-thumb-del:hover { background: #ef4444; }
.dp2-thumb-add {
  width: 56px; height: 74px; border-radius: 0.5rem; border: 1px dashed #d1d5db; background: #fff;
  color: #9ca3af; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.dp2-thumb-add:hover { border-color: #6366f1; color: #6366f1; background: #eef2ff; }
.dp2-thumb-add.dp2-thumb-add-person:hover { border-color: #f59e0b; color: #b45309; background: #fffbeb; }
.dp2-thumb-empty { font-size: 11.5px; color: #c4c9d1; padding: 6px 0; }
.dp2-import-row { display: flex; gap: 0.375rem; margin-top: 0.5rem; }
.dp2-import-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 30px; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; cursor: pointer;
  color: #4b5563; background: #f9fafb; border: 1px solid #e5e7eb; transition: all .15s;
}
.dp2-import-btn:hover { background: #f3f4f6; color: #111827; }
.dp2-import-archive { color: #b45309; background: #fffbeb; border-color: #fde68a; }
.dp2-import-archive:hover { background: #fef3c7; color: #92400e; }
.dp2-import-gallery { color: #6d28d9; background: #f5f3ff; border-color: #ddd6fe; }
.dp2-import-gallery:hover { background: #ede9fe; color: #5b21b6; }

/* AI 设置 */
.dp2-settings { display: flex; flex-direction: column; gap: 0.625rem; }
.dp2-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
.dp2-setting-row .seg-toggle button { height: 32px; font-size: 0.8125rem; }
.dp2-setting-row label { font-size: 0.8125rem; color: #6b7280; white-space: nowrap; }
.dp2-select {
  max-width: 180px; height: 28px; font-size: 12px; color: #374151; background: #fff;
  border: 1px solid #d1d5db; border-radius: 6px; padding: 0 8px;
}
.dp2-select:focus { outline: none; border-color: #a5b4fc; }

.dp2-analyze-btn { width: 100%; justify-content: center; }
.dp2-analyze-btn.dp2-busy { pointer-events: none; opacity: .75; }
.dp2-spin {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: inlineGenSpin .8s linear infinite;
}
.dp2-spin-dark { border-color: #c7d2fe; border-top-color: #4f46e5; }
.dp2-screen-grip { color: #d1d5db; cursor: grab; display: flex; align-items: center; }
.dp2-screen-grip:hover { color: #9ca3af; }
.dp2-screen-grip svg { width: 14px; height: 14px; }
.dp2-screen-body { min-width: 0; }
/* ── 右栏 ── */
.dp2-main { min-width: 0; }
.dp2-main-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; row-gap: 6px;
  margin-bottom: 10px; min-height: 30px;
}
.dp2-main-head .dp2-stats { margin-left: 2px; }
.dp2-head-sep { flex: 1; min-width: 4px; }
/* 工具行里的操作按钮：比 .btn-secondary 小一号，跟 seg-toggle 同高 */
.dp2-hbtn {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px;
  font-size: 12.5px; font-weight: 500; color: #374151; background: #fff;
  border: 1px solid #d1d5db; border-radius: 8px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.dp2-hbtn svg { width: 14px; height: 14px; }
.dp2-hbtn:hover:not(:disabled) { background: #f9fafb; border-color: #9ca3af; color: #111827; }
.dp2-hbtn:disabled { opacity: .45; cursor: not-allowed; }
.dp2-hbtn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.dp2-hbtn.primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }
.dp2-main-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* 分析中：单阶段用来回滑动的进度条表示「进行中」，不遮挡页面 */
.dp2-progress-indeterminate .dp2-progress-bar {
  animation: dp2Indeterminate 1.4s ease-in-out infinite;
}
@keyframes dp2Indeterminate {
  0%   { margin-left: 0; }
  50%  { margin-left: 60%; }
  100% { margin-left: 0; }
}
/* 分析中的骨架屏 */
.dp2-skel {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%);
  background-size: 200% 100%; animation: inlineGenPulse 1.5s ease-in-out infinite;
}
.dp2-skel-num { width: 26px; height: 22px; border-radius: 6px; flex-shrink: 0; }
.dp2-skel-title { flex: 1; height: 16px; }
.dp2-skel-line { height: 12px; margin-bottom: 8px; }
.dp2-skel-line:last-child { margin-bottom: 0; }

.dp2-editor { display: flex; flex-direction: column; gap: 12px; }
.dp2-link-btn {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: #4b5563; background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.dp2-link-btn svg { width: 13px; height: 13px; }
.dp2-link-btn:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
.dp2-link-btn:disabled { opacity: .45; cursor: not-allowed; }
.dp2-link-btn.indigo { color: #4f46e5; background: #eef2ff; border-color: #e0e7ff; }
.dp2-link-btn.indigo:hover:not(:disabled) { background: #e0e7ff; color: #4338ca; }
.dp2-link-btn.danger:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }
.dp2-link-btn.green { color: #16a34a; background: #f0fdf4; border-color: #dcfce7; }
.dp2-link-btn.green:hover:not(:disabled) { background: #dcfce7; color: #15803d; }

/* ① 卖点 */
.dp2-sp-title {
  width: 100%; font-size: 17px; font-weight: 600; color: #111827; border: 1px solid transparent;
  border-radius: 8px; padding: 4px 8px; margin: 0 -8px; background: transparent; transition: all .15s;
}
.dp2-sp-title:hover, .dp2-sp-desc:hover { background: #f9fafb; }
.dp2-sp-title:focus, .dp2-sp-desc:focus { outline: none; border-color: #c7d2fe; background: #fff; }
.dp2-sp-title::placeholder, .dp2-sp-desc::placeholder { color: #c4c9d1; font-weight: 400; }
.dp2-sp-desc {
  width: 100%; font-size: 13.5px; line-height: 1.65; color: #4b5563; border: 1px solid transparent;
  border-radius: 8px; padding: 4px 8px; margin: 2px -8px 0; background: transparent; resize: none;
  transition: all .15s; font-family: inherit;
}
.dp2-depth-edit {
  width: 100%; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin: -2px -6px;
  font-size: 0.8rem; line-height: 1.5; color: #374151; background: transparent; resize: none; font-family: inherit;
}
.dp2-depth-edit:hover { background: #fff; }
.dp2-depth-edit:focus { outline: none; border-color: #c7d2fe; background: #fff; }
.dp2-copy-label { font-size: 11px; font-weight: 600; color: #a78bfa; letter-spacing: .1em; white-space: nowrap; }
.dp2-copy-input {
  flex: 1; font-size: 14px; font-weight: 500; color: #4c1d95; background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 2px 6px; transition: all .15s;
}
.dp2-copy-input:hover { background: rgba(255,255,255,.6); }
.dp2-copy-input:focus { outline: none; background: #fff; border-color: #c4b5fd; }
.dp2-copy-input::placeholder { color: #c4b5fd; font-weight: 400; }
/* ② 指令 */
.dp2-stale-tip {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 10px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; font-size: 12px; color: #9a3412;
}
.dp2-stale-tip .dp2-link-btn { margin-left: auto; color: #c2410c; background: #fff; border-color: #fed7aa; }
.dp2-plan-skeleton { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.dp2-plan-skeleton .line { height: 12px; border-radius: 6px; background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%; animation: inlineGenPulse 1.5s ease-in-out infinite; }
.dp2-plan-skeleton-hint { font-size: 12px; color: #9ca3af; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.dp2-prompt-editor {
  display: block; width: 100%; min-height: 150px; max-height: 360px; resize: vertical;
  padding: 14px 16px; border: none; background: #0b1220; color: #e2e8f0;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.8;
  white-space: pre-wrap; word-break: break-word;
}
.dp2-prompt-editor:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(99,102,241,.45); }
.dp2-prompt-editor::placeholder { color: #475569; }
.dp2-gen-controls .dp2-select { max-width: 200px; }
.dp2-gen-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 9px;
  font-size: 12.5px; font-weight: 600; color: #fff; background: #2563eb; border: none; cursor: pointer; transition: background .15s;
}
.dp2-gen-btn:hover:not(:disabled) { background: #1d4ed8; }
.dp2-gen-btn:disabled { opacity: .6; cursor: not-allowed; }
.dp2-gen-btn svg { width: 14px; height: 14px; }
.dp2-gen-btn-abc {
  display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 9px;
  font-size: 12px; font-weight: 600; color: #4f46e5; background: #eef2ff; border: 1px solid #c7d2fe; cursor: pointer; transition: all .15s;
}
.dp2-gen-btn-abc:hover:not(:disabled) { background: #e0e7ff; }
.dp2-gen-btn-abc:disabled { opacity: .6; cursor: not-allowed; }
.dp2-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.dp2-gallery-item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; background: #f3f4f6; aspect-ratio: 3 / 4; }
.dp2-gallery-item.cover { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.dp2-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.dp2-gallery-item .dp2-gallery-tags { position: absolute; left: 6px; top: 6px; display: flex; gap: 4px; }
.dp2-gallery-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(17,24,39,.6); color: #fff; }
.dp2-gallery-tag.cover { background: #f59e0b; }
.dp2-gallery-actions {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 6px;
  background: linear-gradient(to top, rgba(17,24,39,.75), rgba(17,24,39,0)); opacity: 0; transition: opacity .15s;
}
.dp2-gallery-item:hover .dp2-gallery-actions { opacity: 1; }
.dp2-gallery-actions button, .dp2-gallery-actions a {
  flex: 1; height: 24px; border-radius: 6px; border: none; background: rgba(255,255,255,.92); color: #374151;
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; text-decoration: none;
}
.dp2-gallery-actions button:hover, .dp2-gallery-actions a:hover { background: #fff; color: #111827; }
.dp2-gallery-actions button.del:hover { color: #dc2626; }
.dp2-gallery-actions button.star.on { color: #b45309; }
.dp2-gallery-actions svg { width: 12px; height: 12px; }
.dp2-gallery-meta {
  position: absolute; right: 6px; top: 6px; font-size: 10px; color: #fff; background: rgba(17,24,39,.55);
  padding: 1px 6px; border-radius: 999px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .15s;
}
.dp2-gallery-item:hover .dp2-gallery-meta { opacity: 1; }
.dp2-gallery-loading { position: relative; border-radius: 10px; aspect-ratio: 3 / 4; background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%; animation: inlineGenPulse 1.5s ease-in-out infinite; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px; font-size: 11px; color: #9ca3af; }
/* 空态 */
.dp2-empty-hero {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 64px 24px; text-align: center; transition: border-color .15s, background .15s;
}
.dp2-empty-hero.drag-over { border-color: #2563eb; border-style: dashed; background: #eff6ff; }
.dp2-empty-ic {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 999px;
  background: #eef2ff; color: #6366f1; display: flex; align-items: center; justify-content: center;
}
.dp2-empty-ic svg { width: 26px; height: 26px; }
.dp2-empty-hero h3 { font-size: 1rem; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
.dp2-empty-hero p { font-size: 0.8125rem; color: #6b7280; line-height: 1.8; }
.dp2-empty-hero p b { color: #4f46e5; font-weight: 600; }
.dp2-empty-sub { margin-top: 10px; font-size: 0.75rem !important; color: #9ca3af !important; }
.dp2-empty-soft { background: #fff; border: 1px dashed #e5e7eb; border-radius: 16px; padding: 48px 24px; text-align: center; color: #6b7280; font-size: 13px; }
.dp2-empty-soft b { color: #374151; }

/* 整页预览 */
.dp2-preview.hidden { display: none; }
.dp2-preview-ph {
  margin-top: 18px; aspect-ratio: 3 / 4; max-height: 420px; border-radius: 12px; border: 1px dashed #d1d5db;
  background: #fafafa; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #9ca3af; font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.dp2-preview-ph:hover { border-color: #6366f1; color: #4f46e5; background: #eef2ff; }
.dp2-preview .spr-item { position: relative; }
.dp2-preview-edit {
  position: absolute; right: 0; top: 36px; opacity: 0; transition: opacity .15s;
  font-size: 11.5px; color: #4f46e5; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 7px; padding: 3px 9px; cursor: pointer;
}
.dp2-preview .spr-item:hover .dp2-preview-edit { opacity: 1; }
.dp2-preview .spr-figs img { max-height: 560px; }
.dp2-preview .spr-page { margin-bottom: 24px; }

/* 轻量弹层（重新生成设置） */
.dp2-popover {
  position: fixed; z-index: 95; width: 300px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17,24,39,.14); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.dp2-popover-title { font-size: 12.5px; font-weight: 600; color: #111827; }
.dp2-popover-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; }

/* 存档弹窗里的屏清单 */
.dp2-arc-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; margin-top: 8px; }
.dp2-arc-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid #f3f4f6; font-size: 12.5px; color: #374151; cursor: pointer; }
.dp2-arc-row:hover { background: #f9fafb; }
.dp2-arc-row input { accent-color: #2563eb; }
.dp2-arc-row .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp2-arc-row .m { font-size: 11px; color: #9ca3af; white-space: nowrap; }
.dp2-arc-tip { font-size: 11.5px; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 6px 10px; margin-top: 10px; }
.dp2-arc-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #6b7280; }
.dp2-arc-head button { font-size: 12px; color: #2563eb; background: none; border: none; cursor: pointer; }

/* ── dp2 · 每屏一个容器（卖点 + 指令 + 配图），右栏一次铺开所有屏 ──
   密度优先：分区不占整行标题，改为行首小标签；操作收进卡头图标区。 */
.dp2-editor {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; align-items: start;
}
@media (max-width: 1400px) { .dp2-editor { grid-template-columns: 1fr; } }
.dp2-editor > .dp2-empty-hero,
.dp2-editor > .dp2-empty-soft { grid-column: 1 / -1; }
.dp2-screen-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  scroll-margin-top: 84px; transition: border-color .15s, box-shadow .15s;
}
.dp2-screen-card.active { border-color: #c7d2fe; box-shadow: 0 0 0 3px rgba(99,102,241,.10); }
.dp2-screen-card.is-core { border-left: 3px solid #f59e0b; }
.dp2-screen-card.dragging { opacity: .45; }
.dp2-screen-card.drag-over { outline: 2px dashed #6366f1; outline-offset: 2px; }

/* 卡头：一行放全部身份信息与操作 */
.dp2-screen-head {
  display: flex; align-items: center; gap: 7px; padding: 7px 8px 7px 6px;
  border-bottom: 1px solid #f3f4f6; background: #fafbfc; border-radius: 14px 14px 0 0;
}
.dp2-screen-head .sp-dimension-badge { flex-shrink: 0; }
.dp2-screen-card.collapsed .dp2-screen-head { border-bottom: none; border-radius: 14px; }
.dp2-screen-card.collapsed .dp2-screen-body { display: none; }
.dp2-screen-card.collapsed .dp2-collapse-btn .dp2-chevron { transform: rotate(-90deg); }
.dp2-screen-head .dp2-screen-grip { flex-shrink: 0; }
.dp2-screen-num {
  flex-shrink: 0; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px;
  background: #eef2ff; color: #4f46e5; font-size: 11.5px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.dp2-screen-head .dp2-sp-title {
  flex: 1; min-width: 90px; font-size: 14px; font-weight: 600; margin: 0; padding: 3px 6px;
}
.dp2-screen-head-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-left: 2px; }

/* 通用图标按钮（卡头 / 行内） */
.dp2-ico {
  width: 26px; height: 26px; border-radius: 7px; border: none; background: transparent; color: #9ca3af;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.dp2-ico svg { width: 14px; height: 14px; }
.dp2-ico:hover:not(:disabled) { background: #f3f4f6; color: #374151; }
.dp2-ico.green:hover:not(:disabled) { background: #f0fdf4; color: #16a34a; }
.dp2-ico.danger:hover:not(:disabled) { background: #fef2f2; color: #dc2626; }
.dp2-ico:disabled { opacity: .5; cursor: not-allowed; }
.dp2-ico .dp2-chevron { width: 14px; height: 14px; transition: transform .15s; }

/* 主体三段 */
.dp2-screen-body { display: flex; flex-direction: column; }
.dp2-sec { padding: 7px 10px; border-top: 1px dashed #eef0f3; }
.dp2-sec:first-child { border-top: none; padding-top: 9px; }
.dp2-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; row-gap: 5px; min-height: 26px; }
.dp2-row-wrap { flex-wrap: wrap; row-gap: 6px; }
.dp2-row .sep { flex: 1; min-width: 4px; }
.dp2-sec-tag {
  flex-shrink: 0; width: 30px; height: 20px; border-radius: 5px; background: #f3f4f6; color: #9ca3af;
  font-size: 10.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.dp2-inline-hint { font-size: 12px; color: #9ca3af; }
.dp2-inline-err { font-size: 12px; color: #dc2626; }

/* ① 卖点：描述一行 + 观察/痛点/说服/金句 2×2 网格 */
.dp2-sec .dp2-sp-desc {
  flex: 1; margin: 0; padding: 3px 7px; font-size: 13px; line-height: 1.55;
  min-height: 22px; overflow: hidden;
}
.dp2-depth-grid {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  margin-top: 6px; padding: 6px 9px; background: #fafafa; border-radius: 8px;
}
/* 单列布局（窄视口）时卡片变宽，四项排成 2×2 */
@media (max-width: 1400px) { .dp2-depth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; } }
.dp2-depth-item { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.dp2-depth-item .depth-label { flex-shrink: 0; margin-top: 2px; font-size: 10px; min-width: 28px; padding: 1px 5px; }
.dp2-depth-edit {
  flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 5px; padding: 1px 5px;
  font-size: 12px; line-height: 1.5; color: #374151; background: transparent; resize: none; font-family: inherit;
  min-height: 20px; overflow: hidden;
}
.dp2-depth-edit:hover { background: #fff; }
.dp2-depth-edit:focus { outline: none; border-color: #c7d2fe; background: #fff; }
.dp2-copy-item .dp2-copy-label { background: #ede9fe; color: #6d28d9; }
.dp2-copy-input {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: #5b21b6; background: transparent;
  border: 1px solid transparent; border-radius: 5px; padding: 1px 5px; transition: all .15s;
}
.dp2-copy-input:hover { background: #fff; }
.dp2-copy-input:focus { outline: none; background: #fff; border-color: #c4b5fd; }
.dp2-copy-input::placeholder { color: #c4b5fd; font-weight: 400; }

/* ② 指令：候选做成一行 pill，prompt 深色代码框 */
.dp2-cands { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.dp2-cand {
  display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px;
  border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 11px; line-height: 1; color: #6b7280; transition: all .15s; white-space: nowrap;
}
.dp2-cand b, .dp2-cand i, .dp2-cand span { display: inline-flex; align-items: center; line-height: 1; }
.dp2-cand b { font-size: 11.5px; font-weight: 700; color: #374151; }
.dp2-cand i { font-style: normal; font-variant-numeric: tabular-nums; color: #9ca3af; }
.dp2-cand:hover { border-color: #c7d2fe; background: #eef2ff; }
.dp2-cand.active { border-color: #6366f1; background: #eef2ff; }
.dp2-cand.active b { color: #4338ca; }
.dp2-cand.winner b, .dp2-cand.winner i { color: #059669; }
.dp2-cand.winner.active { border-color: #10b981; background: #ecfdf5; }
/* 指令框：完整展示全部内容，不滚动不截断（高度由 JS 贴着内容算） */
.dp2-prompt-wrap { position: relative; margin-top: 6px; }
.dp2-prompt-editor {
  display: block; width: 100%; min-height: 60px; resize: none;
  /* 高度贴着内容长（JS 里 _autoGrow 算），但封顶 360px（约 17 行）——
     指令动辄二三十行，不封顶会把整张卡片撑到几屏高。
     超出必须能滚：原来是 overflow:hidden，超出的部分直接被截掉且没有滚动条，
     只有键盘移光标时才被动滚，看着就像内容凭空少了一截。
     max-height 以前写在上面那条同名规则里，隔了两百行，放这儿才看得懂。 */
  max-height: 360px; overflow-y: auto;
  padding: 9px 11px; border: none; border-radius: 10px; background: #0b1220; color: #e2e8f0;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  /* 深色底上的细滚动条：浅灰滑块在这儿太扎眼，用半透明的 */
  scrollbar-width: thin; scrollbar-color: rgba(226,232,240,.22) transparent;
}
.dp2-prompt-editor::-webkit-scrollbar { width: 7px; }
.dp2-prompt-editor::-webkit-scrollbar-track { background: transparent; }
.dp2-prompt-editor::-webkit-scrollbar-thumb { background: rgba(226,232,240,.2); border-radius: 4px; }
.dp2-prompt-editor::-webkit-scrollbar-thumb:hover { background: rgba(226,232,240,.38); }
/* 复制 / 重新生成：融进指令框右上角，静态不显形以免遮字，指针移入才浮出 */
.dp2-prompt-tools {
  position: absolute; top: 5px; right: 5px; display: flex; gap: 3px;
  opacity: 0; transition: opacity .15s;
}
/* 只用 opacity 控制显形——不动 pointer-events，避免"移进去才可点"的时序问题 */
.dp2-prompt-wrap:hover .dp2-prompt-tools,
.dp2-prompt-wrap:focus-within .dp2-prompt-tools { opacity: 1; }
/* 实心底色：压住底下的指令文字，图标始终清晰；hover 直接换成品牌紫，变化一眼可见 */
.dp2-ico-dark {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: #1e293b; border: 1px solid #334155; color: #94a3b8;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
.dp2-ico-dark svg { width: 13px; height: 13px; }
.dp2-ico-dark:hover { background: #4f46e5; border-color: #6366f1; color: #fff; }
.dp2-ico-dark:active { background: #4338ca; }
.dp2-prompt-editor:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(99,102,241,.45); }
.dp2-prompt-editor::placeholder { color: #475569; }
.dp2-stale-tip {
  display: flex; align-items: center; gap: 8px; padding: 5px 9px; margin-top: 6px;
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; font-size: 11.5px; color: #9a3412;
}
.dp2-stale-tip .dp2-link-btn { margin-left: auto; height: 22px; padding: 0 8px; font-size: 11.5px; color: #c2410c; background: #fff; border-color: #fed7aa; }
.dp2-plan-skeleton { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.dp2-plan-skeleton .line { height: 10px; border-radius: 5px; background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%; animation: inlineGenPulse 1.5s ease-in-out infinite; }
.dp2-plan-skeleton-hint { font-size: 12px; color: #9ca3af; display: inline-flex; align-items: center; gap: 6px; }

/* ③ 配图：参考图 + 生图参数同一行，画廊小图铺开 */
.dp2-ref-flow { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.dp2-ref-div { width: 1px; height: 22px; background: #e5e7eb; flex-shrink: 0; }
.dp2-sec .card-ref-thumb { width: 28px; height: 37px; border-radius: 5px; }
.dp2-sec .card-ref-thumb img { border-radius: 4px; }
.dp2-sec .card-ref-thumb.ref-selected { border-width: 2px; }
.dp2-sec .card-ref-empty { font-size: 11px; color: #d1d5db; }
.dp2-select { max-width: 108px; height: 25px; font-size: 11px; }
.dp2-select-xs { max-width: 76px; }
.dp2-gen-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.dp2-gen-btn-sm svg { width: 13px; height: 13px; }
.dp2-gen-btn-abc { height: 26px; padding: 0 9px; font-size: 11.5px; border-radius: 8px; }
/* 靠 auto margin 右对齐，不用 flex:1 的占位元素——后者会吃掉整行剩余宽度，
   把按钮组挤到第二行（模型名一长就必现） */
.dp2-gen-group { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; margin-left: auto; }
/* 生图区：用横虚线跟上方的参考图选择分开，按钮与结果画廊归为一块 */
/* 负 margin 抵消 .dp2-sec 的左右内边距，让这条线跟段间线一样顶到卡片两边；
   内容再用自身 padding 缩回原位，只有线变长 */
.dp2-gen-area { margin: 7px -10px 0; padding: 7px 10px 0; border-top: 1px dashed #eef0f3; }
.dp2-gen-area .dp2-gallery { margin-top: 7px; }
/* 生图那一行：摘要可缩，按钮不换行 */
.dp2-gen-area > .dp2-row { flex-wrap: nowrap; }
.dp2-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; margin-top: 7px; }
.dp2-gallery-item { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb; background: #f3f4f6; aspect-ratio: 3 / 4; }
.dp2-gallery-item.cover { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.25); }
.dp2-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.dp2-gallery-tags { position: absolute; left: 4px; top: 4px; display: flex; gap: 3px; }
.dp2-gallery-tag { font-size: 9.5px; font-weight: 700; padding: 0 5px; border-radius: 999px; background: rgba(17,24,39,.6); color: #fff; line-height: 15px; }
.dp2-gallery-tag.cover { background: #f59e0b; }
.dp2-gallery-actions {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 3px; padding: 4px;
  background: linear-gradient(to top, rgba(17,24,39,.78), rgba(17,24,39,0)); opacity: 0; transition: opacity .15s;
}
.dp2-gallery-item:hover .dp2-gallery-actions { opacity: 1; }
.dp2-gallery-actions button, .dp2-gallery-actions a {
  flex: 1; height: 20px; border-radius: 5px; border: none; background: rgba(255,255,255,.92); color: #374151;
  font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none;
}
.dp2-gallery-actions button:hover, .dp2-gallery-actions a:hover { background: #fff; color: #111827; }
.dp2-gallery-actions button.del:hover { color: #dc2626; }
.dp2-gallery-actions button.star.on { color: #b45309; }
.dp2-gallery-actions svg { width: 11px; height: 11px; }
.dp2-gallery-loading {
  position: relative; border-radius: 8px; aspect-ratio: 3 / 4;
  background: linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size: 200% 100%;
  animation: inlineGenPulse 1.5s ease-in-out infinite;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 10px; color: #9ca3af;
}

/* 生图参数改由左栏「AI 设置」统一管理 */
.dp2-setting-row.hidden { display: none; }
/* 分组内的素材块（产品图 / 补充信息 / 人物参考） */
.dp2-block { margin: 0 0 0.75rem; }
.dp2-block-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.8125rem; font-weight: 500; color: #6b7280; margin-bottom: 0.375rem;
}

.dp2-block .dp2-panel-hint { margin-top: 5px; }
/* 分组内的执行按钮：跟着它所配置的那组参数一起出现 */
.dp2-group-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; height: 36px; margin: 0.25rem 0 0;
  font-size: 0.875rem; font-weight: 500; color: #fff; background: #2563eb;
  border: none; border-radius: 0.5rem; cursor: pointer; transition: background .15s;
}
.dp2-group-btn svg { width: 16px; height: 16px; }
.dp2-group-btn:hover:not(:disabled) { background: #1d4ed8; }
.dp2-group-btn:disabled { opacity: .45; cursor: not-allowed; }
.dp2-group-btn.dp2-busy { pointer-events: none; opacity: .75; }


/* 左栏 AI 设置的下拉：沿用站内 .dw-select-* 视觉，尺寸收成窄栏用的小号 */
.dp2-selhost { max-width: 190px; min-width: 0; flex-shrink: 0; }
.dp2-selhost .dw-select-wrap { width: 100%; }
.dp2-selbox .dw-select-trigger,
.dw-select-wrap.dp2-selbox > .dw-select-trigger {
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; border-radius: 0.5rem;
  background: #fff; border-color: #d1d5db; color: #374151; gap: 8px; min-height: 34px;
}
.dw-select-wrap.dp2-selbox > .dw-select-trigger:hover:not(:disabled) { border-color: #9ca3af; }
.dw-select-wrap.dp2-selbox > .dw-select-trigger.open { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.dw-select-wrap.dp2-selbox > .dw-select-trigger:disabled { opacity: .55; cursor: not-allowed; }
.dw-select-wrap.dp2-selbox .dw-select-chevron { width: 14px; height: 14px; }

/* fixed 定位的菜单（挂在 body 上，不受侧栏 overflow 裁剪、不会跑出窗口） */
.dw-select-menu.ui-selectbox-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 300; }
.dp2-selbox-menu .dw-select-opt { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }

/* 右栏末尾的「添加一屏」占位卡（左栏屏序下线后，新增入口移到这里） */
.dp2-add-card {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 56px; border: 1px dashed #d1d5db; border-radius: 14px; background: #fff;
  color: #9ca3af; font-size: 13px; cursor: pointer; transition: all .15s;
}
.dp2-add-card svg { width: 15px; height: 15px; }
.dp2-add-card:hover { border-color: #6366f1; color: #4f46e5; background: #eef2ff; }

/* ── 参考画廊：生图之前，先从 AI 图库里捞语义最近的老素材 ───────────── */
/* 这一屏还没东西可匹配时整段收掉，卡片里不留一条空行 */
.dp2-sec.dp2-sec-off { display: none; }
.dp2-ref-tabs { display: inline-flex; gap: 2px; padding: 2px; background: #f3f4f6; border-radius: 7px; }
.dp2-ref-tab {
  height: 20px; padding: 0 9px; border: none; background: transparent; border-radius: 5px;
  font-size: 11px; color: #6b7280; cursor: pointer; transition: all .12s;
}
.dp2-ref-tab:hover:not(:disabled):not(.active) { color: #374151; }
.dp2-ref-tab.active { background: #fff; color: #111827; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dp2-ref-tab:disabled { opacity: .42; cursor: not-allowed; }
.dp2-ref-hint { font-size: 11px; color: #9ca3af; }
.dp2-ref-actions { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; }
.dp2-ref-empty { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: #9ca3af; }
.dp2-ref-empty.dp2-ref-err { color: #b45309; }
/* 网格与配图区同宽同距，两块画廊看起来是一套东西 */
.dp2-refgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 5px; margin-top: 7px; }
.dp2-refgal-item {
  position: relative; border-radius: 8px; overflow: hidden;
  border: 1px solid #e5e7eb; background: #f3f4f6; aspect-ratio: 3 / 4;
}
.dp2-refgal-item img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.dp2-refgal-item:hover { border-color: #c7d2fe; }
.dp2-refgal-item:hover .dp2-gallery-actions { opacity: 1; }
.dp2-refgal .dp2-gallery-loading { aspect-ratio: 3 / 4; }
/* 参考区折叠钮：跟屏级折叠同一套 chevron 语汇，收起时箭头指左 */
.dp2-ref-fold {
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 5px; cursor: pointer;
}
.dp2-ref-fold:hover { background: #f3f4f6; }
.dp2-ref-fold .dp2-chevron { width: 13px; height: 13px; }
.dp2-ref-fold.folded .dp2-chevron { transform: rotate(-90deg); }
/* 候选指令 pill 的删除钮：悬停才出现，绝对定位不挤动排版（图库指令能反复套用，得能清） */
.dp2-cand-slot { position: relative; display: inline-flex; }
.dp2-cand-del {
  position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; padding: 0;
  display: none; align-items: center; justify-content: center;
  border: 1px solid #fecaca; border-radius: 999px; background: #fff; color: #dc2626;
  cursor: pointer; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.dp2-cand-slot:hover .dp2-cand-del { display: inline-flex; }
.dp2-cand-del:hover { background: #fee2e2; border-color: #fca5a5; }
.dp2-cand-del svg { width: 8px; height: 8px; }
/* pill 上方留出删除钮的地儿，免得被行边缘裁掉 */
.dp2-cands { padding-top: 4px; padding-right: 4px; }
/* 卡片生图区：参数改由左栏统一管，这里只留一行只读摘要 */
.dp2-gen-params {
  /* 一行放不下时先压缩摘要（它只是信息），按钮不许换行 */
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 左栏第二执行按钮：跟主按钮同尺寸，弱一档，避免两个实心蓝抢戏 */
.dp2-group-btn-ghost { color: #4f46e5; background: #eef2ff; }
.dp2-group-btn-ghost:hover:not(:disabled) { background: #e0e7ff; }
/* 参考素材翻页器：左右箭头 + 页码，到头就置灰（向量名次是确定的，只能往后翻） */
.dp2-ref-pager { display: inline-flex; align-items: center; gap: 1px; }
.dp2-ref-pager em {
  font-style: normal; font-size: 11px; color: #6b7280; min-width: 30px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.dp2-ref-pg {
  width: 22px; height: 22px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* 描边白底，跟候选 pill 一个语汇 —— 无边框的裸箭头看不出是能点的 */
  border: 1px solid #e5e7eb; background: #fff; border-radius: 6px;
  color: #6b7280; cursor: pointer; transition: all .15s;
}
.dp2-ref-pg:hover:not(:disabled) { border-color: #c7d2fe; background: #eef2ff; color: #4f46e5; }
.dp2-ref-pg:active:not(:disabled) { background: #e0e7ff; }
.dp2-ref-pg:disabled { opacity: .45; background: #f9fafb; color: #d1d5db; cursor: not-allowed; }
.dp2-ref-pg svg { width: 12px; height: 12px; }


/* ══════════════════════════════════════════════════════════════
   策划引擎 (planner-engine) — 创意策划的提示词可视化管理
   视觉对齐现有系统：主色 #6366f1、slate 灰阶、12–16px 圆角。
   提示词正文一律深色底 (#0b1220)，与指令库/工作台的 prompt 区保持一致。
   ══════════════════════════════════════════════════════════════ */

.pe-shell { display: flex; flex-direction: column; }

/* ── 左栏：搜索 + 导航 + 统计 ──
   原本这里有一整块页头，标题跟二级 tab 上的「策划引擎」重复、副标题是句
   谁都知道的话，白占一屏高度，别的模块也都没有这层。改成搜索和统计并进
   左栏，右侧内容区从顶部就是内容。 */
.pe-side {
  display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: 0;
}
@media (max-width: 760px) { .pe-side { position: static; } }
.pe-summary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 2px; }
.pe-stat {
  padding: 3px 9px; border-radius: 9999px; font-size: 11.5px; color: #64748b;
  background: #f1f5f9; border: 1px solid #e2e8f0; white-space: nowrap;
}
.pe-stat b { color: #334155; font-weight: 700; font-variant-numeric: tabular-nums; }
.pe-stat-on { background: rgba(99,102,241,.1); border-color: rgba(99,102,241,.25); color: #4338ca; }
.pe-stat-on b { color: #4338ca; }
.pe-stat-ro { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.pe-search {
  width: 100%; padding: 7px 11px; border: 1px solid #e2e8f0; border-radius: 9px;
  font-size: 13px; color: #334155; background: #fff; transition: border-color .15s;
}
.pe-search:focus { outline: none; border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

/* ── 三栏布局 ──
   进 tab 就是工作台：左栏导航直接到单元、中栏编辑、右栏试跑。
   评审权重这类要横向铺开的视图挂 .no-aside，让中栏占满后两列。 */
.pe-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr) 320px;
  gap: 16px; align-items: start;
}
.pe-layout.no-aside { grid-template-columns: 232px minmax(0, 1fr); }
.pe-layout.no-aside .pe-aside { display: none; }
.pe-main { min-width: 0; }
/* 左 232 + 右 320 + 两道 16 间距 = 584，中栏留 420 才够编辑，
   所以三栏的下限在 ~1000；再窄才把试跑区落到下面。 */
@media (max-width: 1000px) {
  .pe-layout, .pe-layout.no-aside { grid-template-columns: 200px minmax(0, 1fr); }
  .pe-aside { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pe-layout, .pe-layout.no-aside { grid-template-columns: 1fr; }
}

/* ── 左栏分组导航 ── */
/* ── 左栏树 ──
   三级各有各的角色，不靠同一种样式加缩进硬撑：
     一级 场景 = 分区标题，只靠留白分隔，不可点也不折叠（就 5 个）
     二级 环节 = 可折叠节点，caret 用 CSS 三角，比 ▸ 字符稳
     三级 单元 = 叶子，选中时左侧一条主色圆条 + 淡底
   未启用的用透明度压暗而不是改成灰字——改颜色会和选中态打架，
   出现「选中了反而看不清」。 */
.pe-nav {
  display: flex; flex-direction: column;
  padding: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  max-height: calc(100vh - 40px); overflow-y: auto;
}
@media (max-width: 760px) { .pe-nav { max-height: none; } }

.pe-tree { display: flex; flex-direction: column; }

/* 一二级：可折叠节点，缩进由 --d 控制 */
.pe-tw-node {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 6px 9px 6px calc(10px + var(--d) * 18px); margin-bottom: 1px;
  border: none; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer; transition: background .12s;
}
/* 三级各用一套视觉语言，靠字号 + 字重 + 灰度三重差异拉开，
   只差半个像素和一档字重的话，等于没区分。 */
.pe-tw-lv1 > .pe-tw-name { font-size: 14px; font-weight: 700; color: #0f172a; letter-spacing: .01em; }
.pe-tw-lv2 > .pe-tw-name { font-size: 12.5px; font-weight: 600; color: #475569; }
.pe-tw-unit > .pe-tw-name { font-size: 12.5px; font-weight: 400; color: #64748b; }

/* 层级只靠缩进和字重表达，不加分隔线 */
.pe-tree > .pe-tw-node.pe-tw-lv1 { margin-top: 4px; }
.pe-tree > .pe-tw-node.pe-tw-lv1:first-child { margin-top: 0; }
.pe-tw-node.pe-tw-lv1 + .pe-tw-kids { padding-bottom: 2px; }

/* 一级的箭头也大一档、深一档 */
.pe-tw-lv1 > .pe-tw-caret {
  border-left-width: 5.5px; border-top-width: 4.5px; border-bottom-width: 4.5px;
  border-left-color: #64748b;
}
.pe-tw-node:hover { background: #f4f7fb; }
.pe-tw-node:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -2px; }
.pe-tw-caret {
  flex: none; width: 0; height: 0; margin-left: 2px;
  border-left: 4.5px solid #b6c0d1;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .16s ease, border-left-color .12s;
}
.pe-tw-node.on .pe-tw-caret { transform: rotate(90deg); border-left-color: #6366f1; }
.pe-tw-node:hover .pe-tw-caret { border-left-color: #6366f1; }
.pe-tw-node .pe-tw-name {
  flex: 1; min-width: 0; line-height: 1.45;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pe-tw-num {
  flex: none; font-size: 11px; color: #c3ccda; font-variant-numeric: tabular-nums;
}

/* 三级：叶子 */
.pe-tw-kids { display: none; flex-direction: column; padding-bottom: 4px; }
.pe-tw-kids.on { display: flex; }
.pe-tw-unit {
  position: relative;
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0;
  padding: 5px 9px 5px calc(21px + var(--d) * 18px);
  border: none; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer;
  transition: background .12s, opacity .12s;
}
.pe-tw-unit:hover { background: #f4f7fb; }
.pe-tw-unit:focus-visible { outline: 2px solid #a5b4fc; outline-offset: -2px; }
.pe-tw-unit .pe-tw-name {
  flex: 1; min-width: 0; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 选中：左侧一条主色圆条，贴着叶子的缩进起点 */
.pe-tw-unit.active { background: #eef1fe; }
.pe-tw-unit.active::before {
  content: ''; position: absolute;
  left: calc(10px + var(--d) * 18px); top: 5px; bottom: 5px;
  width: 2.5px; border-radius: 2px; background: #6366f1;
}
.pe-tw-unit.active .pe-tw-name { color: #4338ca; font-weight: 600; }
/* 未启用：压暗但不换色，选中时提回来 */
.pe-tw-unit.off { opacity: .5; }
.pe-tw-unit.off:hover { opacity: .75; }
.pe-tw-unit.off.active { opacity: .9; }


.pe-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border: none; border-radius: 8px; background: transparent;
  text-align: left; cursor: pointer; transition: background .12s, color .12s; width: 100%;
}
.pe-nav-item:hover { background: #f8fafc; }
.pe-nav-item.active { background: rgba(99,102,241,.1); }
.pe-nav-label { font-size: 12.5px; font-weight: 500; color: #475569; line-height: 1.4; }
.pe-nav-item.active .pe-nav-label { color: #4338ca; font-weight: 600; }
.pe-dot { width: 5px; height: 5px; border-radius: 50%; background: #6366f1; display: inline-block; flex: none; }
.pe-nav-sep { height: 1px; background: #e2e8f0; margin: 8px 4px; }

/* ── 右栏 ── */
.pe-body { min-width: 0; }
.pe-group-head { margin-bottom: 14px; }
.pe-group-head h3 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.pe-group-head p { font-size: 12.5px; color: #64748b; line-height: 1.65; margin: 0; max-width: 720px; }

.pe-empty {
  padding: 48px 20px; text-align: center; font-size: 13px; color: #94a3b8;
  background: #fff; border: 1px dashed #e2e8f0; border-radius: 14px;
}
.pe-skeleton { display: flex; flex-direction: column; gap: 10px; }
.pe-skeleton-row {
  height: 76px; border-radius: 12px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%; animation: pe-shimmer 1.4s ease infinite;
}
@keyframes pe-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── 提示词卡片 ── */
/* 类型 / 标签徽章 */
.pe-kind {
  padding: 2px 7px; border-radius: 5px; font-size: 10.5px; font-weight: 600;
  line-height: 1.5; white-space: nowrap;
}
.pe-kind-system { background: #ecfdf5; color: #047857; }
.pe-kind-user { background: #eff6ff; color: #1d4ed8; }
.pe-kind-template { background: #fef3c7; color: #92400e; }
.pe-tag {
  padding: 2px 7px; border-radius: 5px; font-size: 10.5px; line-height: 1.5;
  background: #f1f5f9; color: #64748b; white-space: nowrap;
}
.pe-badge-custom {
  padding: 2px 7px; border-radius: 9999px; font-size: 10.5px; font-weight: 600; line-height: 1.5;
  background: rgba(99,102,241,.1); color: #4338ca; border: 1px solid rgba(99,102,241,.25);
}
.pe-badge-default {
  padding: 2px 7px; border-radius: 9999px; font-size: 10.5px; line-height: 1.5;
  background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0;
}

/* ── 编辑器 ── */
.pe-editor { display: flex; flex-direction: column; gap: 16px; }
.pe-editor-head { display: flex; flex-direction: column; gap: 8px; }
.pe-back {
  align-self: flex-start; padding: 5px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; font-size: 12px; color: #64748b; cursor: pointer; transition: all .15s;
}
.pe-back:hover { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }
.pe-editor-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pe-editor-title h3 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; }
.pe-editor-desc { font-size: 12.5px; color: #64748b; line-height: 1.65; margin: 0; }

.pe-editor-main { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .pe-editor-main { grid-template-columns: 1fr; } }
.pe-editor-left { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* 变量占位符 */
.pe-vars {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
}
.pe-vars-label { font-size: 11.5px; color: #92400e; }
.pe-var {
  padding: 2px 7px; border-radius: 5px; background: #fef3c7; color: #92400e;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600;
  border: 1px solid #fde68a;
}

/* 深色编辑区 */
.pe-code-wrap {
  border: 1px solid #e2e8f0; border-radius: 13px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
.pe-code-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.pe-code-name {
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #94a3b8;
}
.pe-code-meta { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; }
.pe-code {
  display: block; width: 100%; margin: 0; padding: 16px 18px; border: none; resize: vertical;
  background: #0b1220; color: #e2e8f0;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.85;
  white-space: pre-wrap; word-break: break-word;
  min-height: 420px; tab-size: 2;
}
.pe-code:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(99,102,241,.4); }
.pe-code[readonly] { color: #cbd5e1; }
.pe-code-ro {
  min-height: 0; max-height: 460px; overflow: auto; border-radius: 10px;
  font-size: 11.5px; line-height: 1.75;
}

/* 校验提示 */
.pe-validate { font-size: 12px; line-height: 1.6; min-height: 18px; }
.pe-validate.ok { color: #047857; }
.pe-validate.bad { color: #b91c1c; font-weight: 600; }

/* 操作条 */
.pe-editor-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pe-btn {
  padding: 7px 15px; border-radius: 9px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s; border: 1px solid transparent; white-space: nowrap;
}
.pe-btn:disabled { opacity: .45; cursor: not-allowed; }
.pe-btn-primary { background: #6366f1; color: #fff; }
.pe-btn-primary:hover:not(:disabled) { background: #4f46e5; }
.pe-btn-ghost { background: #fff; border-color: #e2e8f0; color: #64748b; }
.pe-btn-ghost:hover:not(:disabled) { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }
.pe-btn-mini { padding: 4px 10px; font-size: 11.5px; background: #fff; border-color: #e2e8f0; color: #64748b; }
.pe-btn-mini:hover { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }
.pe-readonly-hint { font-size: 12px; color: #92400e; }

/* 右侧信息栏 */
.pe-editor-side {
  display: flex; flex-direction: column; gap: 12px;
  padding: 15px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto;
}
@media (max-width: 1100px) { .pe-editor-side { position: static; max-height: none; } }
.pe-side-block h4 { font-size: 12px; font-weight: 700; color: #334155; margin: 0 0 5px; }
.pe-side-block p { font-size: 12px; color: #64748b; line-height: 1.65; margin: 0; }
.pe-side-warn { padding: 11px 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; }
.pe-side-warn h4 { color: #92400e; }
.pe-side-warn p { color: #a16207; }
.pe-side-head { display: flex; align-items: center; justify-content: space-between; }
.pe-side-head h4 { font-size: 12px; font-weight: 700; color: #334155; margin: 0; }
.pe-side-close {
  width: 22px; height: 22px; border: none; border-radius: 6px; background: #f1f5f9;
  color: #64748b; font-size: 15px; line-height: 1; cursor: pointer;
}
.pe-side-close:hover { background: #e2e8f0; color: #334155; }
.pe-side-note { font-size: 12px; color: #94a3b8; line-height: 1.65; margin: 0; }

/* 历史版本 */
.pe-versions { display: flex; flex-direction: column; gap: 9px; }
.pe-version { padding: 10px 11px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.pe-version-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pe-version-note { font-size: 12px; font-weight: 600; color: #334155; }
.pe-version-id { font-size: 10.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.pe-version-meta { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }
.pe-version-preview {
  margin-top: 7px; padding: 7px 9px; background: #0b1220; color: #94a3b8; border-radius: 7px;
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; line-height: 1.6;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pe-version .pe-btn-mini { margin-top: 8px; width: 100%; }

/* ── 评审权重 ── */
.pe-scoring { display: flex; flex-direction: column; gap: 14px; }
.pe-scoring-scene {
  padding: 16px 18px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
}
.pe-scoring-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pe-scoring-head h4 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; }
.pe-scoring-total {
  padding: 3px 9px; border-radius: 9999px; font-size: 11.5px; font-weight: 600;
  background: rgba(99,102,241,.1); color: #4338ca; font-variant-numeric: tabular-nums;
}
.pe-scoring-total.bad { background: #fee2e2; color: #b91c1c; }
.pe-scoring-desc { font-size: 12px; color: #64748b; line-height: 1.65; margin: 6px 0 14px; }
.pe-weight-row {
  display: grid; grid-template-columns: 190px 1fr 52px; align-items: center; gap: 14px;
  padding: 9px 0; border-top: 1px solid #f1f5f9;
}
@media (max-width: 768px) { .pe-weight-row { grid-template-columns: 1fr 44px; } .pe-weight-label { grid-column: 1 / -1; } }
.pe-weight-label { display: flex; flex-direction: column; gap: 2px; }
.pe-weight-label span { font-size: 13px; font-weight: 500; color: #334155; }
.pe-weight-label small { font-size: 11px; color: #94a3b8; line-height: 1.5; }
.pe-weight-slider { width: 100%; accent-color: #6366f1; cursor: pointer; }
.pe-weight-slider:disabled { cursor: not-allowed; opacity: .5; }
.pe-weight-value {
  text-align: right; font-size: 13px; font-weight: 600; color: #4338ca;
  font-variant-numeric: tabular-nums;
}
.pe-scoring-hint { font-size: 11.5px; color: #94a3b8; }

/* ── 策划引擎 · 编辑工作台 ────────────────────────────────────
   行业通行布局：一屏一个完整单元，左边按角色分块编辑，右边常驻试跑。
   角色设定和任务指令是配对下发给模型的，放在一屏才看得出前后是否矛盾。 */

/* 编辑列。三栏的分列由 .pe-layout 负责，这里只排纵向 */
.pe-work-edit { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* 工具栏：只跨编辑列，跟编辑块同宽。做成实心一行，滚动时吸顶不透底 */
.pe-work-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  min-height: 46px; padding: 7px 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
}
.pe-work-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-right: auto; }
.pe-work-title h3 { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.pe-work-actions { display: flex; align-items: center; gap: 8px; }
.pe-work-desc { font-size: 12.5px; color: #64748b; line-height: 1.65; margin: 0; padding: 0 2px; }

/* ── 角色块 ── */
.pe-block {
  border: 1px solid #e2e8f0; border-radius: 13px; overflow: hidden;
  background: #fff; box-shadow: 0 2px 10px rgba(15,23,42,.04);
}
.pe-block-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
}
.pe-role {
  padding: 2.5px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.55;
  white-space: nowrap;
}
.pe-role-system { background: #ecfdf5; color: #047857; }
.pe-role-user { background: #eff6ff; color: #1d4ed8; }
.pe-role-template { background: #fef3c7; color: #92400e; }
.pe-block-hint { font-size: 11.5px; color: #94a3b8; flex: 1; min-width: 0; }
.pe-block-tools { display: flex; align-items: center; gap: 8px; }
.pe-block-count { font-size: 11px; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pe-mini {
  padding: 3px 9px; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff;
  font-size: 11.5px; color: #64748b; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.pe-mini:hover { border-color: #c7d2fe; color: #4338ca; background: #eef2ff; }

.pe-block-vars {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: #fffbeb; border-bottom: 1px solid #fde68a;
  font-size: 11.5px; color: #92400e;
}
.pe-block .pe-code { min-height: 300px; border-radius: 0; box-shadow: none; }
.pe-block .pe-validate { padding: 7px 14px; margin: 0; background: #fff; }

/* 块内展开面板（对比默认 / 历史版本） */
.pe-block-panel:empty { display: none; }
.pe-block-panel {
  padding: 12px 14px 14px; background: #f8fafc; border-top: 1px solid #e2e8f0;
}
.pe-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pe-panel-head h5 { font-size: 12.5px; font-weight: 700; color: #334155; margin: 0; }
.pe-panel-note { font-size: 11.5px; color: #94a3b8; margin: 0; }
.pe-block-panel .pe-code-ro { max-height: 320px; border-radius: 9px; }

/* ── 试跑面板 ── */
.pe-work-run {
  display: flex; flex-direction: column; gap: 12px;
  padding: 15px; background: #fff; border: 1px solid #e2e8f0; border-radius: 13px;
  position: sticky; top: 0; max-height: calc(100vh - 40px); overflow: auto;
}
@media (max-width: 1000px) { .pe-work-run { position: static; max-height: none; } }
.pe-run-head h4 { font-size: 13px; font-weight: 700; color: #334155; margin: 0 0 3px; }
.pe-run-head p { font-size: 11.5px; color: #94a3b8; line-height: 1.55; margin: 0; }
.pe-run-vars { display: flex; flex-direction: column; gap: 9px; }
.pe-run-var { display: flex; flex-direction: column; gap: 4px; }
.pe-run-var > span {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: #475569;
}
.pe-run-var code {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 400;
  color: #94a3b8; background: none; padding: 0;
}
.pe-run-var textarea {
  width: 100%; padding: 7px 9px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-family: inherit; font-size: 12px; line-height: 1.6; color: #334155;
  resize: vertical; background: #fff;
}
.pe-run-var textarea:focus {
  outline: none; border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.pe-run-novar { font-size: 12px; color: #94a3b8; margin: 0; }
.pe-run-btn { width: 100%; }
.pe-run-out { border-top: 1px solid #f1f5f9; padding-top: 12px; }
.pe-run-empty { font-size: 12px; color: #94a3b8; margin: 0; }
.pe-run-err {
  font-size: 12px; color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca;
  border-radius: 8px; padding: 9px 11px; line-height: 1.6;
}
.pe-run-meta {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 11px; color: #94a3b8; font-variant-numeric: tabular-nums;
}
.pe-run-text {
  margin: 0; padding: 11px 13px; background: #0b1220; color: #e2e8f0; border-radius: 9px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.75;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}


/* ── 试跑：模型选择 + 产品图挑选 ──
   看图的提示词（卖点分析、主图场景挖掘等）线上是喂产品图跑的，
   试跑不带图等于换了个题目，所以这里挑一个真实产品，用它档案里的图。 */
.pe-run-model { display: flex; flex-direction: column; gap: 4px; }
.pe-run-model > span {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: #475569;
}
.pe-run-model > span i { font-style: normal; font-weight: 400; font-size: 10.5px; color: #94a3b8; }
.pe-run-model select {
  width: 100%; padding: 6px 9px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-family: inherit; font-size: 12px; color: #334155; background: #fff; cursor: pointer;
}
.pe-run-model select:focus {
  outline: none; border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.pe-run-pick { display: flex; flex-direction: column; gap: 6px; }
.pe-run-pick-t {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 600; color: #475569;
}
.pe-run-pick-t i { font-style: normal; font-weight: 400; font-size: 10.5px; color: #94a3b8; }
.pe-run-pick-list {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
  font-size: 11.5px; color: #94a3b8;
}
.pe-prod {
  flex: none; width: 62px; display: flex; flex-direction: column; gap: 3px;
  padding: 3px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.pe-prod img {
  width: 100%; height: 54px; object-fit: cover; border-radius: 6px; display: block;
  background: #f1f5f9;
}
.pe-prod span {
  font-size: 10px; line-height: 1.35; color: #64748b;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.pe-prod:hover { border-color: #c7d2fe; }
.pe-prod.on { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,.18); }
.pe-prod.on span { color: #4338ca; font-weight: 600; }
.pe-run-none { font-size: 11.5px; color: #94a3b8; line-height: 1.6; }
/* 配图区三组素材的分类图标：颜色对齐各组缩略图的选中框，一眼分清哪几张是同一类 */
.dp2-ref-ico { display: inline-flex; align-items: center; flex-shrink: 0; margin-right: 2px; }
.dp2-ref-ico svg { width: 13px; height: 13px; }
.dp2-ref-ico-product { color: #6366f1; }
.dp2-ref-ico-person { color: #f59e0b; }
.dp2-ref-ico-scene { color: #14b8a6; }
/* 还没配素材的那一类：图标留在原位淡显，位置固定，各屏之间不错位 */
.dp2-ref-flow.is-empty .dp2-ref-ico { opacity: .3; }

/* ─────────────────────────────────────────────────────────────
   主图策划 —— 卡片与详情页共用，只有顶部这段场景字段是自己的
   ───────────────────────────────────────────────────────────── */
/* 三个标签沿用老主图那套配色，但作用域搬到新卡片下（原来限定在 .mi-scenario-card 里） */
.dp2-depth-item .depth-label.depth-audience { color: #0369a1; background: #e0f2fe; }
.dp2-depth-item .depth-label.depth-context  { color: #9a3412; background: #ffedd5; }
.dp2-depth-item .depth-label.depth-appeal   { color: #166534; background: #dcfce7; }


/* 生图区的导入入口：手上有现成的图，直接放进本屏，不必非得生成 */
.dp2-gen-imports { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.dp2-gen-imports + .dp2-gen-group { margin-left: 6px; }
.dp2-ico-import {
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e7eb; background: #fff; border-radius: 8px;
  color: #6b7280; cursor: pointer; transition: all .15s;
}
.dp2-ico-import:hover { border-color: #c7d2fe; background: #eef2ff; color: #4f46e5; }
.dp2-ico-import svg { width: 14px; height: 14px; }
/* 导入进来的图跟生成的区分开 */
.dp2-gallery-tag.imported { background: rgba(79,70,229,.82); }

/* ── 左栏瘦身 ─────────────────────────────────────────────────
   空态原本 1221px，视口去掉顶栏只剩约 1160 —— 还没传图就得滚。
   模型下拉与它的触发按钮本来就是一组，并成一行；比例与分辨率同理。
   ───────────────────────────────────────────────────────────── */
.dp2-exec-row { display: flex; align-items: center; gap: 8px; margin-top: 0.25rem; }
/* 下拉吃掉剩余宽度，按钮按内容宽——模型名长了先挤下拉，不挤按钮 */
.dp2-exec-row .dp2-selhost { flex: 1 1 auto; min-width: 0; max-width: none; }
.dp2-exec-row .dp2-group-btn { width: auto; margin: 0; flex-shrink: 0; padding: 0 14px; white-space: nowrap; }
/* 两个全量按钮平分一行 */
.dp2-exec-pair .dp2-group-btn { flex: 1 1 0; padding: 0 8px; }
/* 比例 + 分辨率并排 */
.dp2-param-pair { display: flex; gap: 8px; }
.dp2-param-pair .dp2-setting-row { flex: 1 1 0; min-width: 0; margin: 0; }
.dp2-param-pair .dp2-selhost { max-width: none; width: 100%; }
/* 去掉 label 之后，下拉自己占满这一行 */
.dp2-setting-solo .dp2-selhost { max-width: none; width: 100%; }
/* 素材位还空着时不占那么高 —— 有内容时照旧 */
.dp2-thumb-grid:empty { min-height: 0; }
.dp2-thumb-empty { padding: 6px 0; }
/* 间距只由 .dp2-settings 的 gap 说了算。
   原来 block 自带 12px 下外距、settings 又有 10px gap、exec-row 还有 4px 上外距，
   三者叠加成 26px 的空当 —— 补充信息与下面那行之间空得最明显。 */
.dp2-side .dp2-settings { gap: 8px; }
.dp2-side .dp2-block { margin: 0; }
.dp2-side .dp2-exec-row { margin-top: 0; }
/* 说明文字在 block 内部，原本靠 .dp2-block .dp2-panel-hint 的 5px 撑开。
   前面为了压高度写了负 margin、又改成 0，两次都把这 5px 抹掉了，文字直接贴上
   缩略图和按钮。这里给回 6px —— 压高度不该压到字挨着控件。 */
.dp2-side .dp2-panel-hint { margin-top: 6px; }
/* 面板里每个小节之间拉一条细线：人物参考 / 场景参考这种并列的小节，
   光靠 8px 间距分不开。用的是卡片里段间线同一套虚线语汇。 */
.dp2-side .dp2-block + .dp2-block { border-top: 1px dashed #eef0f3; padding-top: 8px; }

/* 工具栏在原位（右栏顶部），只是给它一个自己的容器 —— 
   视图切换、统计、导出存档本来就是一组全局操作，跟下面的屏卡片分开更清楚。 */
.dp2-main-head {
  padding: 8px 12px; margin-bottom: 12px;
  /* 边框与圆角对齐左栏面板和屏卡片（都是 #e5e7eb / 0.75rem），
     别自成一套 —— #eef0f3 那个淡色是段间虚线用的，不是容器描边 */
  background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem;
}
.dp2-main-head .dp2-stats { margin-left: 8px; }


/* ==================== AI 小工具 · 产品替换 (pr-) ==================== */
.pr-step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 6px; border-radius: 50%;
  background: #6366f1; color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: 1px;
}
.pr-required, .pr-optional {
  font-size: 0.68rem; font-weight: 500; padding: 1px 6px; border-radius: 999px; margin-left: 4px; vertical-align: 1px;
}
.pr-required { background: #fef2f2; color: #dc2626; }
.pr-optional { background: #f3f4f6; color: #6b7280; }
.pr-slot-hint { font-size: 0.75rem; color: #9ca3af; line-height: 1.5; margin: -0.25rem 0 0.6rem; }

/* 单图槽位（场景） */
.pr-single-preview:empty { display: none; }
.pr-single-card {
  position: relative; border-radius: 0.6rem; overflow: hidden; border: 1px solid #e5e7eb; background: #f9fafb;
}
.pr-single-card img { width: 100%; max-height: 260px; object-fit: contain; display: block; cursor: zoom-in; }
.pr-single-card:hover .ds-image-del, .pr-product-card:hover .ds-image-del { opacity: 1; }
.pr-img-tag {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  padding: 2px 7px; border-radius: 4px; background: rgba(17, 24, 39, 0.72); color: #fff; font-size: 0.68rem; font-weight: 600;
}

/* 产品槽位 */
.pr-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.pr-product-grid:empty { display: none; }
.pr-product-card {
  position: relative; border-radius: 0.6rem; overflow: hidden; border: 1px solid #e5e7eb; background: #fff;
  display: flex; flex-direction: column;
}
.pr-product-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #f9fafb; cursor: zoom-in; }
.pr-role-input {
  width: 100%; border: none; border-top: 1px solid #f3f4f6; padding: 0.35rem 0.5rem;
  font-size: 0.78rem; text-align: center; color: #374151; outline: none; background: #fff;
}
.pr-role-input:focus { background: #eef2ff; }
.pr-sn { font-size: 0.65rem; color: #9ca3af; text-align: center; padding-bottom: 0.3rem; }
.pr-move-btn {
  position: absolute; top: 6px; z-index: 1; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(17, 24, 39, 0.6); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s;
}
.pr-move-btn.right { right: 28px; }
.pr-move-btn.left { right: 52px; }
.pr-product-card:hover .pr-move-btn { opacity: 1; }
.pr-move-btn:hover { background: #4f46e5; }

.pr-notes { min-height: 56px; font-size: 0.82rem; }

/* 右栏按钮 */
.pr-actions { display: flex; gap: 0.5rem; align-items: center; }
.pr-secondary-btn, .pr-ghost-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; font-size: 0.85rem; font-weight: 600;
  color: #4f46e5; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 0.5rem; cursor: pointer; transition: all 0.15s;
}
.pr-secondary-btn:hover:not(:disabled), .pr-ghost-btn:hover:not(:disabled) { background: #e0e7ff; }
.pr-secondary-btn:disabled, .pr-ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pr-ghost-btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; font-weight: 500; color: #4b5563; background: #fff; border-color: #e5e7eb; }
.pr-ghost-btn:hover:not(:disabled) { background: #f9fafb; }
.pr-spinner {
  width: 14px; height: 14px; border: 2px solid rgba(79, 70, 229, 0.25); border-top-color: #4f46e5; border-radius: 50%;
  animation: pr-spin 0.7s linear infinite;
}
.pr-spinner.light { border-color: rgba(255,255,255,0.35); border-top-color: #fff; }
@keyframes pr-spin { to { transform: rotate(360deg); } }

/* AI 写的指令：折叠行 + 展开区 */
.pr-prompt-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; overflow: hidden; }
.pr-prompt-toggle {
  width: 100%; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; background: none; border: none;
  cursor: pointer; text-align: left; font-size: 0.82rem; color: #374151;
}
.pr-prompt-toggle:hover { background: #f9fafb; }
.pr-prompt-toggle-label { font-weight: 600; white-space: nowrap; }
.pr-prompt-chevron { flex-shrink: 0; color: #9ca3af; transition: transform 0.15s; }
.pr-prompt-card.open .pr-prompt-chevron { transform: rotate(90deg); }
.pr-prompt-body { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 1rem 1rem; border-top: 1px solid #f3f4f6; padding-top: 0.75rem; }
.pr-prompt-tip { font-size: 0.72rem; color: #9ca3af; }
.pr-mode-badge {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
  background: #f3f4f6; color: #6b7280;
}
.pr-mode-badge.hanging { background: #fef3c7; color: #b45309; }
.pr-mode-badge.floating { background: #dbeafe; color: #1d4ed8; }
.pr-product-summary { font-size: 0.78rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-stale { font-size: 0.72rem; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; padding: 2px 8px; border-radius: 999px; }
.pr-prompt-text { min-height: 220px; font-size: 0.85rem; line-height: 1.65; }
.pr-prompt-actions { display: flex; align-items: center; gap: 0.5rem; }