/* ==========================================
   家具AI影像系统 - 主样式表
   ========================================== */

/* CSS变量 - 主题色 */
:root {
  --primary: #4F46E5;
  --primary-light: #818CF8;
  --primary-dark: #3730A3;
  --secondary: #0EA5E9;
  --success: #1d9e75;
  --warning: #ba7517;
  --danger: #e24b4a;
  --accent: #8b87f5;

  --bg-primary: #000000;
  --bg-secondary: #23252e;
  --bg-tertiary: #1a1c25;
  --bg-dark: #1E293B;

  --text-primary: #e8e8ec;
  --text-secondary: #9a9ca8;
  --text-muted: #6c6e7a;
  --text-tertiary: #6c6e7a;

  --border: #3a3c48;
  --border-light: #2a2c38;
  --border-primary: #3a3c48;
  --border-secondary: #2a2c38;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 3px;
  --radius-xl: 8px;

  --transition: all 0.3s ease;
}

/* ========== 关键修复：工具栏下拉菜单默认隐藏（放在文件最前确保解析） ========== */
.imgproc-menu { display: none !important; }
.export-menu { display: none !important; }
.imgproc-dropdown.open .imgproc-menu { display: block !important; }
.export-dropdown.open .export-menu,
.export-dropdown.show .export-menu,
.export-menu.show { display: flex !important; }

/* ========== 关键修复：工具栏单行布局（CSS花括号不匹配导致后半文件未解析，规则必须前置） ========== */
.result-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 3px !important;
  margin-left: auto !important;
  padding: 0 4px !important;
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
}
.tb-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 3px !important;
  background: transparent !important;
  padding: 2px 4px !important;
  border-radius: 6px !important;
  flex-shrink: 0 !important;
}
.tb-group-end { margin-left: auto !important; }
.icon-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #3a3e4d !important;
  background: #34384a !important;
  color: #c7cad4 !important;
  cursor: pointer !important;
  font-size: 12px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}
.zoom-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  border: 1px solid #3a3e4d !important;
  background: transparent !important;
  color: #c7cad4 !important;
  cursor: pointer !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
.zoom-level {
  font-size: 11px !important;
  min-width: 36px !important;
  color: #8b87f5 !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  padding: 0 2px !important;
  display: inline-block !important;
  line-height: 1 !important;
}
.imgproc-trigger,
.export-trigger {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  gap: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* ========== 关键修复：参数面板与影像预览区间隙3px + 底部对齐输入框按钮 ========== */
.studio-right { margin-right: 2px !important; }
.zone-gallery { right: 3px !important; top: 0 !important; bottom: 0 !important; }

/* ========== 模式切换按钮（标准/批量/极速）- 放在产品图标签栏 ========== */
.mode-switch-group {
  display: inline-flex !important;
  align-items: center !important;
  background: #252836 !important;
  border-radius: 6px !important;
  padding: 2px !important;
  gap: 1px !important;
  margin-left: 38px !important;
}
.mode-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #9aa0b0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  transition: all 0.15s ease !important;
}
.mode-btn i { font-size: 10px !important; }
.mode-btn:hover {
  color: #c7cad4 !important;
  background: rgba(139,135,245,0.1) !important;
}
.mode-btn.active {
  color: #fff !important;
  background: linear-gradient(135deg, #8b87f5, #7c78e8) !important;
  box-shadow: 0 1px 6px rgba(139,135,245,0.35) !important;
}

/* 批量/极速模式下保留标签栏高度（模式按钮始终可见） */
.zone-current { min-height: 36px !important; }
.zone-bg { min-height: 36px !important; }

/* ========== 关键修复：批量模式布局（CSS花括号不匹配导致后半文件未解析，规则必须前置） ========== */
.batch-panel {
  display: none !important;
  flex-direction: row !important;
  height: 100% !important;
  min-height: 400px !important;
  background: #1e1f26 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.batch-panel.active { display: flex !important; }
.batch-left-sidebar { display: none !important; }
.batch-main-area {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.batch-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: #252836 !important;
  border-bottom: 1px solid #32363e !important;
  flex-shrink: 0 !important;
}
.batch-toolbar .btn-group-left { display: flex !important; gap: 4px !important; }
.batch-toolbar .btn-group-right { display: flex !important; gap: 4px !important; }
.batch-filter {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  padding: 7px 10px !important;
  border-bottom: 1px solid #2a2d38 !important;
  flex-shrink: 0 !important;
  background: #23252f !important;
}
.batch-filter .mini-tag {
  padding: 3px 10px !important;
  font-size: 10.5px !important;
  cursor: pointer !important;
  border-radius: 10px !important;
  background: #2a2d38 !important;
  color: #9aa0b0 !important;
  transition: all 0.15s !important;
  border: 1px solid transparent !important;
}
.batch-filter .mini-tag:hover { background: #363a4a !important; color: #c7cad4 !important; }
.batch-filter .mini-tag.active {
  background: linear-gradient(135deg,#8b87f5,#7c78e8) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(139,135,245,0.25) !important;
}
.batch-grid {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 10px 20px 10px 4px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;
  align-content: start !important;
  min-height: 0 !important;
}
.batch-row-wrap {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 4px 2px 0 !important;
  position: relative !important;
}
.batch-row-num {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(26,28,35,0.85) !important;
  color: #9aa0b0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
  border: 1.5px solid #444861 !important;
  pointer-events: none !important;
}
.row-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.batch-row-plus {
  flex-shrink: 0 !important;
  width: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #555a78 !important;
  font-size: 12px !important;
}
.batch-picker-box {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  height: 92px !important;
  border: 2px dashed #444861 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  background: #181a22 !important;
  box-sizing: border-box !important;
  transition: background-color 0.18s, border-color 0.18s !important;
}
.batch-picker-box:hover { border-color: #8b87f5 !important; background: #1c1e28 !important; }
.batch-picker-box.filled {
  border-style: solid !important;
  border-color: #45485c !important;
  padding: 3px !important;
  background: #15161e !important;
}
.batch-picker-box.filled:hover { border-color: #8b87f5 !important; }
.batch-picker-box img {
  max-width: 100% !important;
  max-height: 84px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  display: block !important;
  margin: 0 auto !important;
}
.batch-picker-box .bp-placeholder {
  color: #565a70 !important;
  font-size: 11.5px !important;
  text-align: center !important;
  pointer-events: none !important;
  user-select: none !important;
}
.bp-placeholder i { display: block !important; font-size: 20px !important; margin-bottom: 3px !important; opacity: 0.35 !important; }
.batch-picker-box .bp-remove {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: rgba(240,60,60,0.88) !important;
  color: #fff !important;
  border: none !important;
  font-size: 11px !important;
  cursor: pointer !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2 !important;
}
.batch-picker-box.filled:hover .bp-remove { display: flex !important; }
.batch-row-sel-btn {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid #555a70 !important;
  background: #1e2030 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  position: relative !important;
}
/* ★ 未配对完成时：圆圈占位可见但置灰不可点击 */
.batch-row-sel-btn.sel-disabled {
  opacity: 0.22 !important;
  cursor: not-allowed !important;
  border-color: #3a3e4d !important;
}
/* ★ 勾选标记（默认透明，选中后显示） */
.batch-row-sel-btn::after {
  content: '\2713' !important;
  font-size: 13px !important; font-weight: 900 !important;
  color: transparent !important; text-shadow: none !important;
}
/* ★ hover（未选中+可点击） */
.batch-row-sel-btn:hover:not(.sel-disabled):not(.sel-active) {
  border-color: #8b87f5 !important;
  background: rgba(139,135,245,0.12) !important;
}
/* ★ 已选中态：深紫底 + 白色 ✓ */
.batch-row-sel-btn.sel-active {
  border-color: #7c6ff0 !important;
  background: linear-gradient(135deg,#7c6ff0,#6b5ce8) !important;
  box-shadow: 0 2px 10px rgba(124,111,240,0.5), inset 0 1px 0 rgba(255,255,255,0.15) !important;
}
.batch-row-sel-btn.sel-active::after {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.batch-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px !important;
  border-top: 1px solid #32363e !important;
  background: #252836 !important;
  flex-shrink: 0 !important;
}
.batch-count { color: #8b90a0 !important; font-size: 12px !important; }
.batch-execute-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 22px !important;
  background: linear-gradient(135deg,#8b87f5,#7c78e8) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
.batch-execute-btn:hover:not(:disabled) {
  background: linear-gradient(135deg,#9b97ff,#8b87f5) !important;
  box-shadow: 0 3px 14px rgba(139,135,245,0.38) !important;
  transform: translateY(-1px) !important;
}
.batch-execute-btn:disabled {
  background: #33364a !important;
  color: #5a5e72 !important;
  cursor: not-allowed !important;
}
#batchViewBtn { color: #8b87f5 !important; }
#batchViewBtn:hover { background: rgba(139,135,245,0.15) !important; }

/* ========== 关键修复：批量模式大图视图（CSS花括号不匹配导致后半文件未解析） ========== */
.batch-panel.view-large .batch-left-sidebar { display: none !important; }
.batch-panel.view-large .batch-picker-box {
  height: 220px !important;
  padding: 4px !important;
  box-sizing: border-box !important;
}
.batch-panel.view-large .batch-picker-box img {
  max-height: 212px !important;
  object-fit: contain !important;
}
.batch-panel.view-large .batch-row-num {
  position: absolute !important;
  width: 24px !important;
  height: 24px !important;
  font-size: 11px !important;
  top: 5px !important;
  left: 6px !important;
}
.batch-panel.view-large .batch-row-plus {
  font-size: 12px !important;
  width: 16px !important;
}
.batch-panel.view-large .bp-placeholder {
  font-size: 14px !important;
  padding: 90px 14px !important;
}
.batch-panel.view-large .batch-grid {
  gap: 6px 10px !important;
  padding: 14px 18px !important;
}

/* ========== 关键修复：批量模式选择弹窗（CSS花括号不匹配导致后半文件未解析） ========== */
.batch-picker-overlay {
  position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: none !important;
  background: rgba(15,17,29,0.6) !important;
  backdrop-filter: blur(2px) !important;
}
.batch-picker-overlay.show { display: flex !important; }
.batch-picker-popup {
  width: 920px !important; max-width: calc(100vw - 48px) !important; max-height: 80vh !important;
  background: #1e1f26 !important; border: 1px solid #3a3e4d !important;
  border-radius: 14px !important; display: flex !important; flex-direction: column !important;
  overflow: hidden !important; box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  position: relative !important;
  margin: auto !important;
  pointer-events: auto !important;
}
@keyframes bpFadeInCenter {
  from { opacity: 0; transform: translate(-30%, -45%) scale(0.97); }
  to { opacity: 1; transform: translate(-30%, -50%) scale(1); }
}
.batch-picker-head {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 12px 16px !important; border-bottom: 1px solid #32363e !important;
  background: #252836 !important; flex-shrink: 0 !important;
  cursor: grab !important;
}
.batch-picker-head span { font-size: 13.5px !important; font-weight: 600 !important; color: #e0e0e0 !important; }
.picker-filter-bar {
  display: flex !important; flex-wrap: wrap !important; gap: 5px !important;
  padding: 8px 12px !important; border-bottom: 1px solid #2a2d38 !important;
  background: #1f222c !important; flex-shrink: 0 !important;
  pointer-events: auto !important;
}
.picker-filter-bar .mini-tag {
  padding: 3px 10px !important; font-size: 10.5px !important; cursor: pointer !important;
  border-radius: 10px !important; background: #2a2d38 !important; color: #9aa0b0 !important;
  transition: all 0.15s !important; border: 1px solid transparent !important;
}
.picker-filter-bar .mini-tag:hover { background: #363a4a !important; color: #c7cad4 !important; }
.picker-filter-bar .mini-tag.active {
  background: linear-gradient(135deg,#8b87f5,#7c78e8) !important; color: #fff !important;
  box-shadow: 0 2px 6px rgba(139,135,245,0.25) !important;
}
.batch-picker-close {
  width: 28px !important; height: 28px !important; border: none !important; background: #35384a !important;
  color: #aaa !important; border-radius: 50% !important; font-size: 16px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.batch-picker-close:hover { background: #f87171 !important; color: #fff !important; }
.batch-picker-body {
  flex: 1 !important; overflow-y: auto !important; padding: 16px !important;
  display: grid !important; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)) !important;
  gap: 6px !important; align-content: start !important;
  pointer-events: auto !important; overflow-x: hidden !important;
}
.batch-picker-item {
  width: 100% !important; height: 116px !important;
  min-width: 0 !important;
  border: 2px solid #33364a !important; border-radius: 7px !important;
  overflow: hidden !important; cursor: pointer !important; transition: border-color 0.15s, box-shadow 0.15s !important;
  background: #15161e !important; position: relative !important;
  pointer-events: auto !important; box-sizing: border-box !important;
  flex-shrink: 0 !important;
}
.batch-picker-item:hover { border-color: #8b87f5 !important; }
.batch-picker-item.selected { border-color: #8b87f5 !important; }
.batch-picker-item img { width:100% !important;height:100% !important;object-fit:cover !important;pointer-events:none !important;display:block !important;}
/* ★ 选中标记：放在图片内部右下角，绝不溢出图框边界（P1-2: 增强对比度） */
.batch-picker-item .picker-check {
  position: absolute !important;
  bottom: 4px !important; right: 4px !important;
  width: 22px !important; height: 22px !important; border-radius: 50% !important;
  background: rgba(139,135,245,.92) !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,.9) !important;
  font-size: 11px !important; display: none !important; align-items: center !important;
  justify-content: center !important; z-index: 3 !important; pointer-events: none !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.5) !important;
}
.batch-picker-item.selected .picker-check { display: flex !important; }
.batch-picker-empty {
  grid-column: 1/-1 !important;text-align:center !important;padding:36px !important;color:#666a80 !important;font-size:13.5px !important;
}
.batch-picker-empty i{display:block !important;font-size:32px !important;margin-bottom:10px !important;opacity:0.35 !important;}
.batch-picker-foot {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 10px 16px !important; border-top: 1px solid #32363e !important;
  background: #252836 !important; flex-shrink: 0 !important; pointer-events: auto !important;
}
.picker-sel-count { font-size: 12.5px !important; color: #8b87f5 !important; font-weight: 600 !important; }
.picker-confirm-btn {
  padding: 5px 22px !important; font-size: 13px !important; font-weight: 600 !important;
  color: #fff !important; background: linear-gradient(135deg,#8b87f5,#7c78e8) !important;
  border: none !important; border-radius: 8px !important; cursor: pointer !important; transition: all 0.15s !important;
}
.picker-confirm-btn:hover { box-shadow: 0 3px 12px rgba(139,135,245,0.4) !important; }
.picker-confirm-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* ========== 关键修复：批量模式锁定徽标（原在7694行，CSS花括号不匹配导致未解析） ========== */
.batch-picker-box.batch-locked {
  border: 2px dashed #8b87f5 !important;
  background: rgba(139,135,245,0.08) !important;
  overflow: visible !important;
}
/* ★ 锁定时隐藏删除按钮（即使hover也不显示） */
.batch-picker-box.batch-locked .bp-remove { display: none !important; }
.batch-lock-badge {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 9px !important;
  background: linear-gradient(135deg, #7c6ff0, #5b4ce0) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 5px 0 5px 0 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  box-shadow: 0 2px 12px rgba(107,92,232,0.55) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  transition: opacity 0.15s, transform 0.1s !important;
}
.batch-lock-badge:hover {
  opacity: 0.85 !important; transform: scale(1.03) !important;
}

/* 重置样式 */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background-color: #000000;
  color: var(--text-primary);
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
}

/* ==================== 导航栏 ==================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: #000000;
  border-bottom: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 24px;
  z-index: 1000;
  box-shadow: var(--shadow-sm);
  gap: 8px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}

.nav-brand i {
  font-size: 20px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  white-space: nowrap;
}

.nav-link:hover {
  background: var(--bg-tertiary);
  color: var(--primary);
}

.nav-link.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
}

/* ── 设置快捷下拉菜单 ── */
.settings-dropdown-wrap {
  position: relative;
}

.settings-quick-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e2e4ec;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  z-index: 2000;
  overflow: hidden;
  animation: sqmFadeIn .15s ease;
}

@keyframes sqmFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sqm-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #333842;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
  cursor: pointer;
}
.sqm-item:hover {
  background: #f5f6fa;
  color: #6361ce;
}
.sqm-item i {
  width: 20px;
  text-align: center;
  font-size: 15px;
  color: #8890a4;
}
.sqm-item:hover i {
  color: #6361ce;
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-primary);
  cursor: pointer;
}

.mobile-menu {
  display: none;
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.mobile-menu.show {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-content {
  background: var(--bg-primary);
  padding: 20px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-menu.show .mobile-menu-content {
  transform: translateX(0);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 16px;
  border-radius: var(--radius);
  transition: var(--transition);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  background: var(--bg-tertiary);
  color: var(--primary);
}

/* ==================== 主内容区 ==================== */
.main-content {
  margin-top: 48px;
  height: calc(100vh - 48px - 0px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page {
  display: none;
  animation: fadeIn 0.3s ease;
}

.page.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* 为绝对定位的.studio提供定位参考 */
  position: relative;
}

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

/* 页面头部 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: 48px;
  background: #000000;
  border-bottom: 1px solid #222;
}

.page-header h1 {
  font-size: 14px;
  font-weight: 600;
  color: #e4e6ec;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-header h1 i {
  color: #8b87f5;
  font-size: 14px;
}

.page-header p {
  display: none;
}

/* 页面关闭按钮 */
.page-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid #333;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.page-close-btn:hover {
  background: #1a1a1a;
  border-color: #8b87f5;
  color: #8b87f5;
}

.section-title {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 40px;
  color: var(--text-primary);
}

/* ==================== 首页 Hero区域 ==================== */
.hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 60px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
  animation: heroFloat 15s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5%, 5%); }
}

.hero-title {
  font-size: 42px;
  font-weight: 900;
  color: white;
  margin-bottom: 16px;
  letter-spacing: 2px;
  position: relative;
}

.hero-subtitle {
  font-size: 20px;
  color: rgba(255,255,255,0.95);
  margin-bottom: 8px;
  position: relative;
}

.hero-desc {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
  position: relative;
}

/* ==================== 工作区 ==================== */
.workspace-section {
  padding: 40px 8px;
}

.workspace-container {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* 步骤指示器 */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  gap: 0;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
}

.step-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  transition: var(--transition);
}

.step.active .step-num {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  box-shadow: 0 4px 10px rgba(79,70,229,0.4);
}

.step.active .step-label {
  color: var(--primary);
  font-weight: 600;
}

.step.completed .step-num {
  background: var(--success);
  color: white;
}

.step.completed .step-label {
  color: var(--success);
}

.step-line {
  width: 80px;
  height: 3px;
  background: var(--border);
  margin: 0 8px;
  margin-bottom: 22px;
  border-radius: 2px;
  transition: var(--transition);
}

.step-line.completed {
  background: var(--success);
}

/* 工作区域 */
.work-area {
  display: grid;
  grid-template-columns: 340px 180px 1fr;
  gap: 24px;
  padding: 24px;
  min-height: 520px;
}

/* 面板通用 */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-header h3 {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.panel-header h3 i {
  color: var(--primary);
  font-size: 18px;
}

.panel-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--warning);
  color: white;
  font-weight: 600;
}

.panel-badge.success {
  background: var(--success);
}

.panel-more {
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.panel-more:hover {
  text-decoration: underline;
}

/* 上传面板 */
.upload-panel {
  display: flex;
  flex-direction: column;
}

.upload-zone {
  flex: 1;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-zone:hover {
  border-color: var(--primary-light);
  background: rgba(79,70,229,0.03);
}

.upload-zone.dragover {
  border-color: var(--primary);
  background: rgba(79,70,229,0.08);
}

.upload-placeholder {
  pointer-events: none;
}

.upload-icon {
  font-size: 56px;
  color: var(--primary-light);
  margin-bottom: 16px;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.upload-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 13px;
  color: var(--text-muted);
}

.preview-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.preview-container img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.preview-actions {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

/* 拍摄提示 */
.photo-tips {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border-radius: var(--radius);
}

.photo-tips h4 {
  font-size: 13px;
  font-weight: 600;
  color: #92400E;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.photo-tips ul {
  list-style: none;
}

.photo-tips li {
  font-size: 12px;
  color: #78350F;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.photo-tips li i {
  color: var(--success);
  font-size: 10px;
}

/* 操作按钮面板 */
.action-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.btn-generate {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--primary), #7C3AED);
  color: white;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 30px rgba(79,70,229,0.4);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.btn-generate::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent 30%);
  animation: btnRotate 3s linear infinite;
}

@keyframes btnRotate {
  to { transform: rotate(360deg); }
}

.btn-generate:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(79,70,229,0.5);
}

.btn-generate:disabled {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

.btn-generate:disabled::before {
  display: none;
}

.btn-generate i {
  font-size: 32px;
  position: relative;
  z-index: 1;
}

.btn-generate span {
  position: relative;
  z-index: 1;
}

.generate-tips {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 120px;
}

/* 背景选择面板 */
.bg-panel {
  display: flex;
  flex-direction: column;
}

.bg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}

.tag:hover {
  border-color: var(--primary-light);
  color: var(--primary);
}

.tag.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
}

.bg-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  overflow-y: auto;
  max-height: 300px;
  padding-right: 4px;
}

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

.bg-grid::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.bg-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: var(--transition);
}

.bg-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.bg-item.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,0.3);
}

.bg-item.selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

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

.bg-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-muted);
  gap: 4px;
}

.upload-custom-bg {
  margin-top: 12px;
  text-align: center;
}

/* ==================== 进度区域 ==================== */
.progress-section {
  padding: 24px;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

.progress-card {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  padding: 32px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.progress-header {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.progress-bar-container {
  height: 10px;
  background: var(--bg-tertiary);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 5px;
  transition: width 0.5s ease;
  position: relative;
}

.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.progress-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.progress-steps {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.prog-step {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.prog-step.active {
  color: var(--primary);
  font-weight: 600;
}

.prog-step.done {
  color: var(--success);
}

.prog-step.done i {
  color: var(--success);
}

.prog-step i {
  font-size: 8px;
}

/* ==================== 结果区域 ==================== */
.result-section {
  padding: 24px;
  background: linear-gradient(135deg, #ECFDF5, #D1FAE5);
  border-top: 2px solid var(--success);
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.result-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.result-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.compare-item {
  text-align: center;
}

.compare-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.compare-item img {
  max-width: 400px;
  max-height: 350px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
  cursor: pointer;
  transition: var(--transition);
}

.compare-item img:hover {
  transform: scale(1.02);
}

.compare-arrow {
  font-size: 24px;
  color: var(--primary);
  font-weight: bold;
}

/* ==================== 功能特色 ==================== */
.features-section {
  padding: 60px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg-primary);
  padding: 32px 24px;
  border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow);
  transition: var(--transition);
  border: 1px solid var(--border-light);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-light);
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(124,58,237,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
  color: var(--primary);
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 新手引导入口 */
.guide-entry {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 24px 32px;
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
  border-radius: var(--radius-lg);
  border: 1px solid var(--primary-light);
}

.guide-entry-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.guide-entry-content > i {
  font-size: 40px;
  color: var(--primary);
  flex-shrink: 0;
}

.guide-entry-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 4px;
}

.guide-entry-content p {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ==================== 背景图库页面 ==================== */
.category-nav {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.cat-tab {
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cat-tab:hover {
  border-color: var(--primary-light);
  color: var(--primary);
}

.cat-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.library-grid {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.lib-item {
  background: var(--bg-primary);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
  border: 2px solid transparent;
}

.lib-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--primary-light);
}

.lib-item-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}

.lib-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.lib-item:hover .lib-item-img img {
  transform: scale(1.05);
}

.lib-item-info {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lib-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.lib-item-cat {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 10px;
}

.lib-item-use-btn {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 20px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  z-index: 2;
}

.lib-item:hover .lib-item-use-btn {
  display: block;
}

.lib-item-img {
  position: relative;
}

/* 批量上传区域 */
.batch-upload-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.batch-upload-box {
  background: var(--bg-primary);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  transition: var(--transition);
}

.batch-upload-box:hover {
  border-color: var(--primary-light);
  background: rgba(79,70,229,0.02);
}

.batch-upload-box i {
  font-size: 48px;
  color: var(--primary-light);
  margin-bottom: 16px;
}

.batch-upload-box h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.batch-upload-box p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* ==================== 案例展示页面 ==================== */
.case-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
  padding: 0 24px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
}

.filter-btn:hover {
  border-color: var(--primary-light);
}

.filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.cases-container {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 24px;
  columns: 3;
  column-gap: 20px;
}

.case-card {
  break-inside: avoid;
  margin-bottom: 20px;
  background: var(--bg-primary);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
  cursor: pointer;
}

.case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.case-card-img {
  position: relative;
  overflow: hidden;
}

.case-card-img img {
  width: 100%;
  display: block;
  transition: transform 0.3s;
}

.case-card:hover .case-card-img img {
  transform: scale(1.03);
}

.case-compare {
  display: flex;
  position: relative;
}

.case-before,
.case-after {
  flex: 1;
  position: relative;
}

.case-before img,
.case-after img {
  width: 100%;
  display: block;
}

.case-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 11px;
  border-radius: 4px;
}

.case-card-info {
  padding: 16px;
}

.case-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.case-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.5;
}

.case-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.case-tag {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: 10px;
}

/* ==================== 教程页面 ==================== */
.tutorial-steps {
  max-width: 900px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.tutorial-step {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  padding: 28px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}

.step-number {
  font-size: 48px;
  font-weight: 900;
  color: var(--bg-tertiary);
  line-height: 1;
  flex-shrink: 0;
  width: 60px;
}

.tutorial-step:first-child .step-number {
  color: var(--primary-light);
}

.step-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.step-detail {
  display: flex;
  gap: 24px;
}

.detail-text {
  flex: 1;
}

.detail-text p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  line-height: 1.7;
}

.detail-text ul,
.detail-text ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.detail-text li {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.6;
}

.detail-text strong {
  color: var(--text-primary);
}

.tip-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #EFF6FF;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #1E40AF;
  margin-top: 12px;
}

.tip-box.warning {
  background: #FEF3C7;
  color: #92400E;
}

.tip-box i {
  flex-shrink: 0;
  font-size: 16px;
}

.detail-image {
  width: 160px;
  flex-shrink: 0;
}

.mockup-img {
  aspect-ratio: 3/4;
  background: var(--bg-tertiary);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.mockup-img i {
  font-size: 32px;
  color: var(--primary-light);
}

/* FAQ */
.faq-section {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 0 24px;
}

.faq-section h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.faq-section h2 i {
  color: var(--primary);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--border-light);
}

.faq-q {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  transition: var(--transition);
}

.faq-q:hover {
  background: var(--bg-tertiary);
}

.faq-q i {
  color: var(--text-muted);
  transition: transform 0.3s;
}

.faq-item.open .faq-q i {
  transform: rotate(180deg);
  color: var(--primary);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
}

.faq-item.open .faq-a {
  max-height: 400px;
  padding: 0 20px 18px;
}

.faq-a p {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  line-height: 1.7;
}

.faq-a ul,
.faq-a ol {
  padding-left: 20px;
}

.faq-a li {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.6;
}

/* ==================== 个人中心页面（全新设计） ==================== */

/* --- Hero：沉浸式毛玻璃 --- */
.mc-hero {
  position: relative;
  max-width: 960px;
  margin: 0 auto 28px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 40px rgba(79,70,229,.12), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.mc-hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 40%, #0c1222 100%);
  overflow: hidden;
}
.mc-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  animation: mcOrbFloat 8s ease-in-out infinite;
}
.mc-hero-orb1 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, #818CF8, transparent 70%);
  top: -80px; left: -40px;
  animation-delay: 0s;
}
.mc-hero-orb2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, #06B6D4, transparent 70%);
  bottom: -60px; right: 20%;
  animation-delay: -3s;
}
.mc-hero-orb3 {
  width: 160px; height: 160px;
  background: radial-gradient(circle, #a78bfa, transparent 70%);
  top: 10px; right: -30px;
  animation-delay: -5s;
}
@keyframes mcOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(15px, -10px) scale(1.05); }
  66% { transform: translate(-10px, 8px) scale(.97); }
}
.mc-hero-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  padding: 32px 36px;
}

/* 头像环 */
.mc-avatar-ring {
  position: relative; flex-shrink: 0;
  width: 80px; height: 80px;
}
.mc-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #312e81, #1e1b4b);
  border: 3px solid rgba(129,140,248,.3);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.mc-avatar i { font-size: 30px; color: #818CF8; }
.mc-avatar-progress {
  position: absolute; inset: -4px;
  width: calc(100% + 8px); height: calc(100% + 8px);
  z-index: 0;
  animation: mcProgressSpin 20s linear infinite;
}
@keyframes mcProgressSpin {
  to { transform: rotate(360deg); }
}

.mc-hero-info { flex: 1; min-width: 0; overflow: visible; }
.mc-hero-info h2 {
  font-size: 22px; font-weight: 700; color: #f1f5f9;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}
.mc-hero-info p {
  font-size: 13px; color: #94a3b8;
}
.mc-hero-info strong { color: #818CF8; font-weight: 600; }

.mc-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- 个人中心按钮 --- */
.mc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 12.5px; border-radius: 10px;
  border: none; cursor: pointer; transition: all .2s; white-space: nowrap;
  font-weight: 500;
}
.mc-btn-outline {
  background: rgba(255,255,255,.05);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.1);
}
.mc-btn-outline:hover {
  background: rgba(129,140,248,.12);
  color: #a5b4fc;
  border-color: rgba(129,140,248,.3);
}
.mc-btn-danger {
  background: rgba(239,68,68,.08);
  color: #94a3b8;
  border: 1px solid rgba(239,68,68,.12);
}
.mc-btn-danger:hover {
  background: rgba(239,68,68,.15);
  color: #fca5a5;
  border-color: rgba(239,68,68,.3);
}
.mc-btn-primary {
  background: linear-gradient(135deg, #6366f1, #818cf8);
  color: #fff;
  border: none;
  padding: 10px 22px;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(99,102,241,.3);
}
.mc-btn-primary:hover {
  box-shadow: 0 6px 20px rgba(99,102,241,.4);
  transform: translateY(-1px);
}

/* --- 统计卡片：浮动光晕 --- */
.mc-stats {
  max-width: 960px; margin: 0 auto 32px; padding: 0 24px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.mc-stat-card {
  position: relative;
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex; align-items: center; gap: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.mc-stat-card:hover {
  transform: translateY(-2px);
}
.mc-stat-blue:hover  { box-shadow: 0 8px 24px rgba(59,130,246,.12); }
.mc-stat-purple:hover { box-shadow: 0 8px 24px rgba(139,92,246,.12); }
.mc-stat-green:hover  { box-shadow: 0 8px 24px rgba(34,197,94,.12); }

.mc-stat-glow {
  position: absolute; top: -20px; right: -20px;
  width: 80px; height: 80px; border-radius: 50%;
  filter: blur(40px); opacity: .2;
  transition: opacity .3s;
}
.mc-stat-card:hover .mc-stat-glow { opacity: .35; }
.mc-stat-blue .mc-stat-glow   { background: #3b82f6; }
.mc-stat-purple .mc-stat-glow { background: #8b5cf6; }
.mc-stat-green .mc-stat-glow  { background: #22c55e; }

.mc-stat-icon {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 20px; position: relative; z-index: 1;
}
.mc-stat-blue .mc-stat-icon   { background: rgba(59,130,246,.12); color: #60a5fa; }
.mc-stat-purple .mc-stat-icon { background: rgba(139,92,246,.12); color: #a78bfa; }
.mc-stat-green .mc-stat-icon  { background: rgba(34,197,94,.12);  color: #4ade80; }

.mc-stat-body { display: flex; flex-direction: column; position: relative; z-index: 1; }
.mc-stat-num {
  font-size: 28px; font-weight: 800; line-height: 1.1;
  background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mc-stat-label { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

/* --- Section --- */
.mc-section {
  max-width: 960px; margin: 0 auto 40px; padding: 0 24px;
}
.mc-section-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.mc-section-title {
  display: flex; align-items: center; gap: 10px;
}
.mc-section-icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(99,102,241,.1);
  color: #818CF8;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.mc-section-title h3 {
  font-size: 17px; font-weight: 700; color: var(--text-primary);
}

/* Sort */
.mc-sort select {
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--bg-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b909e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; transition: border-color .15s;
}
.mc-sort select:hover { border-color: #818CF8; }

/* --- Works Grid --- */
.mc-works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.mc-work-card {
  background: var(--bg-secondary);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  cursor: pointer;
}
.mc-work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(99,102,241,.1);
  border-color: rgba(129,140,248,.25);
}
.mc-work-card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform .4s;
}
.mc-work-card:hover img { transform: scale(1.03); }

.mc-work-footer {
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,.15);
}
.mc-work-date { font-size: 11.5px; color: var(--text-muted); }
.mc-work-del {
  width: 28px; height: 28px; border: none;
  background: rgba(239,68,68,.08); color: #f87171;
  border-radius: 8px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.mc-work-del:hover { background: #ef4444; color: #fff; }

/* --- Custom BG Grid --- */
.mc-bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.mc-bg-card {
  aspect-ratio: 4/3; border-radius: 12px;
  overflow: hidden; position: relative;
  border: 1px solid var(--border);
  transition: transform .2s, box-shadow .2s;
}
.mc-bg-card:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.mc-bg-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mc-bg-del {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border: none;
  background: rgba(239,68,68,.9); color: #fff;
  border-radius: 8px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all .15s;
}
.mc-bg-card:hover .mc-bg-del { opacity: 1; }

/* --- Empty State --- */
.mc-empty {
  grid-column: 1 / -1; text-align: center; padding: 52px 20px;
}
.mc-empty-icon {
  width: 80px; height: 80px; margin: 0 auto 20px;
  border-radius: 20px;
  background: rgba(99,102,241,.06);
  display: flex; align-items: center; justify-content: center;
  transform: rotate(-5deg);
}
.mc-empty-icon i { font-size: 32px; color: #6366f1; }
.mc-empty-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.mc-empty-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .mc-hero-inner {
    flex-wrap: wrap; gap: 14px; padding: 24px 20px;
  }
  .mc-avatar-ring { width: 64px; height: 64px; }
  .mc-avatar { width: 64px; height: 64px; }
  .mc-avatar i { font-size: 24px; }
  .mc-hero-info h2 { font-size: 18px; }
  .mc-stats { grid-template-columns: 1fr; gap: 10px; }
  .mc-stat-card { padding: 16px; }
  .mc-stat-num { font-size: 24px; }
  .mc-hero-actions { width: 100%; }
}

/* ==================== 按钮样式 ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn-lg {
  padding: 14px 32px;
  font-size: 16px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
}

.btn-success {
  background: linear-gradient(135deg, var(--success), #34D399);
  color: white;
}

.btn-danger {
  background: linear-gradient(135deg, var(--danger), #F87171);
  color: white;
}

.btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: transparent;
  box-shadow: none;
}

/* ==================== 弹窗 ==================== */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal.show {
  display: flex;
}

.modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.25);
}

.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  z-index: 1;
  animation: modalIn 0.3s ease;
  background: #23252e;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}

@keyframes modalIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-content img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  object-fit: contain;
}

/* 图片信息弹窗关闭按钮（内嵌式） */
.image-info-popup .modal-close {
  position: relative;
  top: auto; right: auto;
  width: auto; height: auto;
  border: none;
  background: rgba(255,255,255,.1);
  color: #c7cad4;
  border-radius: var(--radius);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  z-index: 2;
  transition: color .15s, background .15s;
}
.image-info-popup .modal-close:hover {
  color: #fff;
  background: rgba(255,255,255,.18);
}

.modal-close {
  top: -12px; right: -12px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--danger);
  color: white;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.modal-info {
  text-align: center;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 13px;
  color: var(--text-secondary);
}

/* ===== 图片信息弹窗（美化版） ===== */
.image-info-popup {
  position: absolute; top: 6px; right: 6px; z-index: 200;
  width: 500px;
  background: linear-gradient(180deg, #1e2029 0%, #181a21 100%);
  border-radius: 12px;
  border: 1px solid rgba(139,135,245,.12);
  box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
#imageInfoModal .modal-content {
  max-width: none; margin: 0; box-shadow: none; background: transparent;
}

/* 弹窗标题栏 */
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: linear-gradient(180deg, rgba(139,135,245,.10) 0%, rgba(139,135,245,.03) 100%);
  border-bottom: 1px solid rgba(139,135,245,.10);
  font-size: 13px; font-weight: 600; color: #e4e6ec;
  letter-spacing: .3px;
}
.modal-header i { color: #8b87f5; margin-right: 7px; font-size: 13px; }

/* 关闭按钮 */
.image-info-popup .modal-close {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,255,255,.06); color: #888da3;
  font-size: 17px; line-height: 24px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; transition: all .18s ease;
  padding: 0;
  position: relative; z-index: 30; pointer-events: auto;
}
.image-info-popup .modal-close:hover {
  background: rgba(255,90,90,.15); color: #ff7b7b;
}

.image-info-body {
  padding: 10px 12px 12px;
  position: relative;
}

/* 两列表格：标签 | 当前值 */
.image-info-row {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 0;
  align-items: stretch; justify-items: center;
  padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.045);
  font-size: 12px;
  transition: background .15s ease;
}
.image-info-row:hover { background: rgba(139,135,245,.03); }
.image-info-row:last-child { border-bottom: none; }

/* 单元格统一样式 */
.image-info-row > * {
  padding: 9px 10px;
  display: flex; align-items: center; justify-content: center;
  min-height: 36px;
}

/* 第一列：属性名 */
.info-label {
  color: #9498aa;
  white-space: nowrap;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .3px;
}

/* 第二列：当前值 */
.info-value {
  color: #9498aa;
  font-weight: 500;
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 第三列：编辑区 */
.info-hint { color: #9498aa; font-size: 11.5px; }

/* 表头行 */
.info-header-row {
  background: linear-gradient(180deg, rgba(139,135,245,.09) 0%, rgba(139,135,245,.04) 100%);
  border-bottom-color: rgba(139,135,245,.12);
}
.info-header-row:hover { background: linear-gradient(180deg, rgba(139,135,245,.11) 0%, rgba(139,135,245,.05) 100%); }
.info-header-row .info-label,
.info-header-row .info-value,
.info-header-row .info-edit {
  font-size: 11px; font-weight: 700;
  color: #8b87f5;
  letter-spacing: .5px;
  justify-content: center !important;
}
.info-header-row .info-label { background: transparent; }

/* 按钮行 */
.image-info-btn-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding-top: 10px;
}
.image-info-btn-row > * { grid-column: 1 / -1; }

/* 编辑控件 */
.info-input {
  background: rgba(26,27,33,.9);
  border: 1px solid rgba(52,56,74,.6);
  border-radius: 6px;
  color: #d0d3dc;
  padding: 5px 8px;
  font-size: 11.5px;
  outline: none;
  box-sizing: border-box;
  -moz-appearance: textfield;
  transition: border-color .18s ease, box-shadow .18s ease;
}

/* ===== 自定义下拉选择器（替代原生select白底） ===== */
.info-custom-select {
  position: relative;
}
.info-select-trigger {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(26,27,33,.9);
  border: 1px solid rgba(52,56,74,.6);
  border-radius: 6px;
  color: #d0d3dc;
  padding: 5px 10px;
  font-size: 11.5px;
  cursor: pointer;
  user-select: none;
  min-width: 80px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.info-select-trigger:hover { border-color: rgba(139,135,245,.4); }
.info-custom-select.open .info-select-trigger {
  border-color: #8b87f5;
  box-shadow: 0 0 0 2px rgba(139,135,245,.12);
}
/* 下拉面板 */
.info-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%; transform: translateX(-50%);
  background: #1e2029;
  border: 1px solid rgba(139,135,245,.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.3);
  z-index: 100;
  display: none;
  min-width: 90px;
  overflow: hidden;
}
.info-custom-select.open .info-select-dropdown { display: block; }
.info-select-opt {
  padding: 7px 16px;
  font-size: 11.5px;
  color: #a0a4b8;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
  text-align: center;
}
.info-select-opt:hover { background: rgba(139,135,245,.10); color: #e8eaf0; }
.info-select-opt.active {
  background: rgba(139,135,245,.14);
  color: #8b87f5;
  font-weight: 600;
}
.info-edit select:focus,
.info-input:focus {
  border-color: rgba(139,135,245,.55);
  box-shadow: 0 0 0 2px rgba(139,135,245,.12);
}
.info-edit-inline { display: inline-flex; align-items: center; gap: 4px; color: #7a7f92; font-size: 11.5px; }
.info-input::-webkit-inner-spin-button,
.info-input::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}

/* 应用按钮 */
.info-apply-btn {
  width: 100%;
  margin-top: 4px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #6c68d9 0%, #8b87f5 50%, #9d99f7 100%);
  border: none; border-radius: 8px; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .2s ease;
  box-shadow: 0 3px 12px rgba(107,104,217,.35), 0 1px 3px rgba(0,0,0,.2);
  letter-spacing: .3px;
}
.info-apply-btn:hover {
  opacity: .92; transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(107,104,217,.45), 0 2px 5px rgba(0,0,0,.25);
}
.info-apply-btn:active { transform: translateY(0); opacity: 1; }

/* ==================== Toast提示 ==================== */
.toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 14px 20px;
  border-radius: var(--radius);
  color: white;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.3s ease, toastOut 0.3s ease forwards;
  animation-delay: 0s, 2.7s;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}

.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.info { background: var(--primary); }
.toast.warning { background: var(--warning); }

/* 错误提示：手动关闭，不自动消失 */
.toast.toast-manual {
  animation: toastIn 0.3s ease forwards;
}
.toast-manual .toast-msg {
  flex: 1;
  line-height: 1.4;
}
.toast-manual .toast-close {
  cursor: pointer;
  opacity: 0.7;
  font-size: 14px;
  margin-left: 6px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.toast-manual .toast-close:hover {
  opacity: 1;
}

@keyframes toastIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* ==================== 底部 ==================== */
.footer {
  text-align: center;
  padding: 4px 12px;
  color: var(--text-muted);
  font-size: 10px;
  border-top: 1px solid var(--border);
  background: var(--bg-primary);
  flex-shrink: 0;
  line-height: 1.4;
}

/* ==================== AI智能橡皮擦 ==================== */

/* 拖拽悬停浮层 */
.drag-overlay {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(99, 97, 206, 0.12);
  border: 2.5px dashed #6361ce;
  border-radius: 10px;
  z-index: 1000;
  pointer-events: none;
  gap: 8px;
  transition: top 0.1s, left 0.1s, width 0.1s, height 0.1s;
  box-shadow: 0 0 20px rgba(99, 97, 206, 0.15);
}
.drag-overlay .drag-icon {
  font-size: 32px;
  color: #6361ce;
  animation: dragPulse 1s ease-in-out infinite;
}
.drag-overlay .drag-label {
  font-size: 13px;
  color: #6361ce;
  font-weight: 600;
  background: rgba(255,255,255,.85);
  padding: 4px 12px;
  border-radius: 4px;
}
@keyframes dragPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* 橡皮擦容器：覆盖在结果图上方 */
.eraser-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none;
  /* 棋盘格背景显示透明区域 */
  background-image:
    linear-gradient(45deg, #2a2d35 25%, transparent 25%),
    linear-gradient(-45deg, #2a2d35 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2a2d35 75%),
    linear-gradient(-45deg, transparent 75%, #2a2d35 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #23262e;
  border-radius: var(--radius-sm);
}

.eraser-container canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* 橡皮擦光标 */
.eraser-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border: 2px solid #ef4444;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.15);
  transform: translate(-50%, -50%);
  transition: width 0.1s, height 0.1s;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3) inset;
}

/* ========== 坐标定位层 ========== */
.coord-overlay {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 80;
  pointer-events: auto;
  cursor: crosshair !important;
  outline: none;
  border: none;
  background: transparent;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.coord-overlay.active { cursor: crosshair !important; }

/* 十字准线 — 彻底隐藏（仅保留标记点） */
.coord-crosshair-h,
.coord-crosshair-v {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}

/* 标记点 */
.coord-marker {
  position: absolute;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.coord-dot {
  width: 12px; height: 12px;
  margin: 6px;
  background: #6361ce;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(99,97,206,.45), 0 0 0 1px rgba(99,97,206,.3) inset;
  animation: coordPulse 1.5s ease infinite;
}
@keyframes coordPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}

/* 标记点旁提示文字（简洁型） */
.coord-hint-label {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  padding: 3px 9px;
  background: rgba(26,27,46,.82);
  color: #b4bac8;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid rgba(139,135,245,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.coord-hint-label.show { opacity: 1; }

/* 坐标按钮激活态 */
#coordBtn.active {
  background: rgba(99,97,206,.15) !important;
  border-color: #6361ce !important;
  color: #a78bfa !important;
}

/* ========== 框选区域 ========== */
.select-box {
  position: absolute;
  border: 1.5px dashed #6361ce;
  background: rgba(99,97,206,.10);
  pointer-events: none;
  z-index: 85;
}
.select-size-label {
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  background: rgba(99,97,206,.88);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: .3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.select-corner {
  position: absolute;
  width: 8px; height: 8px;
  border: 2px solid #6361ce;
  background: #fff;
  border-radius: 2px;
  display: none; /* 默认隐藏，框选时JS控制显示 */
}
/* 框选进行中时才显示角标 */
.select-box:not([style*="none"]) .select-corner {
  display: block;
}
.select-corner.tl { top: -4px; left: -4px; }
.select-corner.tr { top: -4px; right: -4px; }
.select-corner.bl { bottom: -4px; left: -4px; }
.select-corner.br { bottom: -4px; right: -4px; }

/* 坐标定位内嵌提示（显示在预览区域内） */
.coord-toast {
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  background: rgba(26,27,46,.92);
  color: #e4e6ec;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid rgba(139,135,245,.25);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  white-space: nowrap;
  z-index: 90;
  pointer-events: auto;
  letter-spacing: .3px;
}
.coord-toast.success { color: #86efac; border-color: rgba(134,239,172,.35); }
.coord-toast.show-anim {
  animation: coordToastIn .28s ease forwards;
}
@keyframes coordToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 橡皮擦控制面板 */
.eraser-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: linear-gradient(135deg, #1e293b, #263348);
  border-top: 1px solid #34384a;
  gap: 12px;
  flex-wrap: wrap;
}

.eraser-ctrl-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.eraser-ctrl-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.eraser-label {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.eraser-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #34384a;
  border-radius: 2px;
  outline: none;
}

.eraser-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.eraser-size-val {
  font-size: 11px;
  color: #e4e6ec;
  background: #34384a;
  padding: 1px 6px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
  font-weight: 600;
}

.eraser-chk-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.eraser-chk-label input {
  accent-color: #ef4444;
}

.eraser-hint {
  color: #64748b;
  cursor: help;
}

.eraser-hint:hover {
  color: #94a3b8;
}

/* 橡皮擦按钮 */
.eraser-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.eraser-btn-undo {
  background: rgba(100,116,139,0.15);
  border-color: #475569;
  color: #94a3b8;
}

.eraser-btn-undo:hover {
  background: rgba(100,116,139,0.25);
  color: #e4e6ec;
}

.eraser-btn-apply {
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: #059669;
  color: white;
}

.eraser-btn-apply:hover {
  background: linear-gradient(135deg, #047857, #059669);
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}

.eraser-btn-cancel {
  background: rgba(239,68,68,0.1);
  border-color: #dc2626;
  color: #f87171;
}

.eraser-btn-cancel:hover {
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
}

/* 激活状态的橡皮擦按钮（工具栏里） */
.icon-btn.eraser-active {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  color: white !important;
  box-shadow: 0 0 8px rgba(239,68,68,0.4);
}

/* ★ 图层编辑按钮（预留位）— 未来接入 Qwen-Image-Layered 等分层编辑 API */
.icon-btn--layer-edit {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed !important;
}
.icon-btn--layer-edit:not(:disabled) {
  opacity: 1;
  cursor: pointer !important;
}
/* 右上角「即将上线」角标 */
.icon-btn--layer-edit::after {
  content: '';
  position: absolute;
  top: -3px; right: -3px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #a78bfa;
  animation: layerEditPulse 2s ease-in-out infinite;
}
@keyframes layerEditPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167,139,250,0.5); }
  50%      { box-shadow: 0 0 4px 3px rgba(167,139,250,0.15); }
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1024px) {
  .work-area {
    grid-template-columns: 1fr 1fr;
  }

  .action-panel {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
  }

  .btn-generate {
    width: 100px;
    height: 100px;
    font-size: 14px;
  }

  .btn-generate i {
    font-size: 24px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cases-container {
    columns: 2;
  }
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
  }

  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-subtitle {
    font-size: 16px;
  }

  .work-area {
    grid-template-columns: 1fr;
  }

  .action-panel {
    padding: 20px 0;
  }

  .step-indicator {
    padding: 16px;
    overflow-x: auto;
  }

  .step-line {
    width: 40px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .cases-container {
    columns: 1;
  }

  .page-header h1 {
    font-size: 26px;
  }

  .tutorial-step {
    flex-direction: column;
    gap: 16px;
  }

  .step-number {
    font-size: 32px;
  }

  .detail-image {
    display: none;
  }

  .result-compare {
    flex-direction: column;
  }

  .compare-arrow {
    transform: rotate(90deg);
  }

  .compare-item img {
    max-width: 100%;
  }

  .guide-entry-content {
    flex-direction: column;
    text-align: center;
  }
}

/* ==========================================================
   五区批量工作台布局 (首页重构 2026-06-01)
   区1预览栏 | 区2当前图+区3背景 | 区4结果+区5要求
   ========================================================== */
.studio {
  display: grid;
  grid-template-columns: minmax(260px, 0.62fr) minmax(350px, 0.9fr) 280px;
  grid-template-rows: 1fr;
  grid-template-areas: "mid right gallery";
  gap: 4px;
  padding: 6px;
  /* 绝对定位填充父容器，彻底脱离文档流，尺寸不随内容变化 */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: #000000;
  border-radius: 0;
}

/* 通用区域标题 */
.zone-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.zone-label i { color: var(--primary); }

/* ---------- 区域一：预览栏 ---------- */
.zone-thumbs {
  background: #EAF1FB;
  border: 1px solid #D6E4F5;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.thumbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 8px;
  flex-shrink: 0;
}
.thumbs-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.thumbs-title i { color: var(--primary); }
.add-thumb-btn {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: var(--transition);
  box-shadow: 0 2px 6px rgba(79,70,229,.35);
}
.add-thumb-btn:hover { transform: scale(1.1); }
.thumbs-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thumbs-list::-webkit-scrollbar { width: 4px; }
.thumbs-list::-webkit-scrollbar-thumb { background: #C3D6EE; border-radius: 2px; }
.thumb-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: #fff;
  transition: var(--transition);
  flex-shrink: 0;
}
.thumb-item:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.thumb-item.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,.25);
}
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item .thumb-idx {
  position: absolute; top: 4px; left: 4px;
  width: 18px; height: 18px;
  background: rgba(0,0,0,.55); color: #fff;
  border-radius: 5px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.thumb-item .thumb-del {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: rgba(239,68,68,.9); color: #fff;
  border: none; border-radius: 5px; cursor: pointer;
  font-size: 10px; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
}
.thumb-item:hover .thumb-del { opacity: 1; }
/* ★ v143: AI识别类别标签 */
.thumb-item .ai-cat-badge {
  position: absolute; bottom: 2px; left: 2px; right: 2px;
  background: linear-gradient(transparent, rgba(99,102,241,.85));
  color: #fff; font-size: 10px;
  text-align: center; padding: 3px 4px 5px;
  border-radius: 0 0 7px 7px;
  z-index: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb-item .ai-cat-badge.recognizing {
  background: rgba(99,102,241,.7);
  animation: catPulse 1.2s ease-in-out infinite;
}
/* ★ v148 未识别类别时显示"选类别"按钮 */
.thumb-item .ai-cat-badge.ai-cat-unset {
  background: rgba(245,158,11,.8);
  cursor: pointer;
}
.thumb-item .ai-cat-badge.ai-cat-unset:hover {
  background: rgba(245,158,11,1);
}
@keyframes catPulse {
  0%,100% { opacity: .6; }
  50% { opacity: 1; }
}
/* ★ v148 手动选择类别弹窗 */
.cat-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.cat-picker-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding: 10px 8px;
  border: 1px solid #3a3e4d;
  background: #2a2d3a;
  color: #c7cad4;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.cat-picker-btn:hover {
  background: #353846;
  border-color: #8b87f5;
  color: #fff;
}
.cat-picker-btn.selected {
  background: rgba(139,135,245,.2);
  border-color: #8b87f5;
  color: #8b87f5;
}
/* ★ v146 破损图片占位（不删除，显示占位） */
.thumb-item.img-temp-unavailable,
.thumbs-strip-item.img-temp-unavailable,
.gallery-item.img-temp-unavailable,
.result-thumb-item.img-temp-unavailable {
  position: relative;
}
.thumb-item.img-temp-unavailable::after,
.thumbs-strip-item.img-temp-unavailable::after,
.gallery-item.img-temp-unavailable::after,
.result-thumb-item.img-temp-unavailable::after {
  content: '暂不可用';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(248,250,252,.9);
  color: #94a3b8; font-size: 10px;
  border-radius: inherit; z-index: 2;
  pointer-events: none; /* ★ 让点击穿透到删除按钮 */
}
/* ★ 暂不可用时删除按钮始终显示 + 提升层级 */
.gallery-item.img-temp-unavailable .gallery-del,
.result-thumb-item.img-temp-unavailable .rt-del {
  opacity: 1 !important;
  display: flex !important;
  z-index: 5;
}
.thumbs-empty {
  text-align: center; color: var(--text-muted);
  padding: 30px 8px; font-size: 12px;
}
.thumbs-empty i { font-size: 28px; margin-bottom: 8px; color: #C3D6EE; display: block; }

/* ---------- 区域六：画册栏（合成结果收藏） ---------- */
.zone-gallery {
  background: #EAF1FB;
  border: 1px solid #D6E4F5;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gallery-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px; flex-shrink: 0; min-height: 28px;
  background: #2a2d38;
  border-bottom: 1px solid #34384a;
}
/* 画册/参数 Tab 按钮 */
.gallery-tab-btn {
  height: 18px; border-radius: 4px;
  border: 1px solid #8b87f5; background: rgba(139,135,245,.12); color: #8b87f5;
  cursor: pointer; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 0 6px; white-space: nowrap;
  transition: all .2s; opacity: 0.9;
}
.gallery-tab-btn:hover { opacity: 1; background: rgba(139,135,245,.25); }
.gallery-tab-btn.active { background: #8b87f5; color: #fff; opacity: 1; border-color: transparent; }
.gallery-count {
  font-size: 10px; color: #fff;
  background: linear-gradient(135deg, #e67e22, #f39c12);
  padding: 1px 6px; border-radius: 8px; font-weight: 600;
}
.gallery-clear-btn {
  height: 18px; border-radius: 4px;
  border: none; background: rgba(139,135,245,.15); color: #8b87f5;
  cursor: pointer; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 0 6px; white-space: nowrap;
  transition: all .2s; opacity: 0.8;
}
.gallery-clear-btn:hover { opacity: 1; background: rgba(239,68,68,.3); transform: scale(1.05); }
.gallery-clear-btn.active { background: rgba(139,135,245,.4); color: #fff; opacity: 1; }

/* 参数Tab按钮（与gallery-tab-btn同风格） */
.gallery-finetune-btn {
  height: 18px; border-radius: 4px;
  border: 1px solid #8b87f5; background: rgba(139,135,245,.12); color: #8b87f5;
  cursor: pointer; font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 0 6px; white-space: nowrap;
  transition: all .2s; opacity: 0.9;
}
.gallery-finetune-btn:hover { opacity: 1; background: rgba(139,135,245,.25); }
.gallery-finetune-btn.active { background: #8b87f5; color: #fff; opacity: 1; border-color: transparent; }

/* 参数面板 */
.finetune-panel {
  display: none;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  padding: 0;
  background: #1e2028;
  animation: ftSlideDown .2s ease-out;
  overflow: hidden;
}
@keyframes ftSlideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }

/* 可滚动内容区 */
.ft-scroll-body {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 3px 14px 8px;
}
.ft-scroll-body::-webkit-scrollbar { width: 4px; }
.ft-scroll-body::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.ft-scroll-body::-webkit-scrollbar-track { background: transparent; }

/* 底部固定按钮区 */
.ft-footer {
  flex-shrink: 0;
  padding: 10px 14px 12px;
  background: #1e2028;
}
.ft-row { display: flex; flex-direction: column; gap: 0; position: relative; }
.ft-group { display: flex; flex-direction: column; gap: 6px; min-width: 120px; position: relative; margin-bottom: 16px; padding-bottom: 0; }
/* 各板块统一间距 */
.ft-row-1 .ft-group:last-child { margin-bottom: 16px; }
.ft-row-1 .ft-group:last-child::after { display: none; }
/* 输出设置组下方不需要横线（已有 ft-row-output 的 border-bottom） */
.ft-row-output .ft-group::after { display: none; }
.ft-group::after {
  content: ''; position: absolute; bottom: -10px; left: 0; right: 0;
  height: 1px; background: #2a2d38;
}
/* 最后一个模块不需要横线和下间距 */
.finetune-panel > .ft-row:last-child > .ft-group:last-child,
.finetune-panel > .ft-row:only-child > .ft-group:last-child {
  margin-bottom: 0;
}
.finetune-panel > .ft-row:last-child > .ft-group:last-child::after {
  display: none;
}
/* 软装 */
.ft-decor-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.ft-label {
  font-size: 11.5px; font-weight: 600; color: #8b8fa3;
  display: flex; align-items: center; gap: 4px;
}
.ft-label i { color: #6c70a0; font-size: 10.5px; }

/* 角度按钮组 */
.ft-angles .ft-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.ft-btn {
  height: 28px; padding: 0 10px; border-radius: 5px;
  border: 1px solid #34384a; background: #23252e; color: #9ca0b5;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.ft-btn:hover { border-color: #5a5d72; color: #c7cad4; }
.ft-btn.ft-active { border-color: #8b87f5; color: #8b87f5; background: rgba(139,135,245,.1); }

/* 比例选择 */
.ft-select-wrap { position: relative; }
.ft-select {
  width: 110px; height: 28px; border-radius: 5px;
  border: 1px solid #34384a; background: #23252e; color: #c7cad4;
  font-size: 11.5px; padding: 0 8px; appearance: none;
  -webkit-appearance: none; cursor: pointer;
  outline: none; transition: border-color .15s;
}
.ft-select:focus { border-color: #8b87f5; }
.ft-input-text, .ft-input {
  width: 100%; height: 28px; border-radius: 5px;
  border: 1px solid #34384a; background: #23252e; color: #c7cad4;
  font-size: 11.5px; padding: 0 8px; outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.ft-input-text:focus, .ft-input:focus { border-color: #8b87f5; }

/* 色板 */
.ft-swatch-list { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ft-swatch {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: all .15s; box-sizing: border-box;
}
.ft-swatch:hover { transform: scale(1.15); }
.ft-swatch.ft-active { border-color: #fff; box-shadow: 0 0 0 1px #8b87f5; }
.ft-color-custom {
  width: 26px; height: 26px; border-radius: 50%; border: 1px dashed #5a5d72;
  background: transparent; color: #5a5d72; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ft-color-custom:hover { border-color: #8b87f5; color: #8b87f5; }

/* 软装模式切换（增加/去掉） */
.ft-decor-mode {
  display: inline-flex; gap: 2px;
  margin-left: auto;
  background: #23252e; border-radius: 4px;
  padding: 1px; border: 1px solid #34384a;
}
.ft-mode-btn {
  height: 18px; padding: 0 7px; border-radius: 3px;
  border: none; background: transparent; color: #6c7094;
  font-size: 10px; font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.ft-mode-btn:hover { color: #9ca0b5; }
.ft-mode-btn.active {
  background: #8b87f5; color: #fff;
  box-shadow: 0 1px 3px rgba(139,135,245,.25);
}

/* 软装 */
.ft-decor-btns { display: flex; gap: 5px; flex-wrap: wrap; }
.ft-row { position: relative; }

/* ═══════════════════ AI 生成尺寸选择器（第0行，置顶） ═══════════════════ */
.ft-row-gen-size {
  padding-bottom: 10px;
  border-bottom: 1px solid #252836;
  margin-bottom: 10px;
}
.ft-row-gen-size .ft-group { flex: 1; margin-bottom: 0; }
.ft-gensize .ft-label { margin-bottom: 8px; }

/* 模式下拉框 */
.gs-mode-wrap { margin-bottom: 7px; }
.gs-select {
  width: 100%; height: 30px;
  background: #1e2029; border: 1px solid #34384a; border-radius: 6px;
  color: #c8cad0; font-size: 12px; padding: 0 10px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer; transition: border-color .15s;
}
.gs-select:hover { border-color: #454a5e; }
.gs-select:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); outline: none; }

/* 常见比例预设按钮组 */
.gs-presets {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px;
}
.gs-preset-btn {
  height: 26px; padding: 0 11px; border-radius: 14px;
  border: 1px solid #34384a; background: #23252e; color: #9ca0b5;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.gs-preset-btn:hover { border-color: #555a70; color: #d0d2da; background: #2a2d38; }
.gs-preset-btn.active {
  background: linear-gradient(135deg,#8b87f5,#7c78e8); color: #fff;
  border-color: transparent; box-shadow: 0 1px 4px rgba(139,135,245,.25);
}
.gs-custom-btn { position: relative; padding-left: 18px; }
.gs-custom-btn::before {
  content: '✎'; position: absolute; left: 5px; top: 50%;
  transform: translateY(-50%); font-size: 11px; opacity: .65;
}

/* 自定义宽高输入区 */
.gs-custom-wrap {
  display: none; align-items: center; gap: 5px;
  padding: 8px 10px; background: #1a1c24; border-radius: 6px;
  border: 1px solid #34384a; margin-bottom: 7px;
}
.gs-custom-wrap.visible { display: flex; }
.gs-num-input {
  width: 64px; height: 28px; text-align: center;
  background: #23252e; border: 1px solid #444862; border-radius: 5px;
  color: #e4e6ec; font-size: 12px; font-weight: 600;
  transition: border-color .15s;
}
.gs-num-input:focus { border-color: #8b87f5; outline: none; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.gs-x-sep { color: #666; font-weight: bold; font-size: 13px; }
.gs-lock-btn {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid #34384a; background: #23252e; color: #888;
  font-size: 10px; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.gs-lock-btn:hover { border-color: #555a70; color: #aaa; }
.gs-lock-btn.active { color: #8b87f5; border-color: #8b87f5; }
.gs-apply-custom {
  height: 28px; padding: 0 12px; border-radius: 5px;
  border: 1px solid #8b87f5; background: rgba(139,135,245,.1); color: #8b87f5;
  font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: all .15s; margin-left: auto;
}
.gs-apply-custom:hover { background: rgba(139,135,245,.2); }

/* 尺寸预览文字 */
.gs-preview {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; background: rgba(139,135,245,.06);
  border-radius: 5px; border: 1px solid rgba(139,135,245,.12);
}
.gs-preview-icon { color: #8b87f5; font-size: 12px; }
.gs-preview-text {
  color: #9ca0b5; font-size: 11.5px; line-height: 1.35;
}

/* 输出设置行（置顶，独占一行） */
.ft-row-output {
  padding-bottom: 8px;
  border-bottom: 1px solid #252836;
  margin-bottom: 10px;
}
.ft-row-output .ft-group { flex: 1; margin-bottom: 0; }
/* 软装行（独立） */
.ft-row-decor {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #2a2d38;
}
.ft-row-decor .ft-decor {
  flex: 1;
}
.ft-dec-btn {
  height: 28px; padding: 0 10px; border-radius: 5px;
  border: 1px solid #34384a; background: #23252e; color: #9ca0b5;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.ft-dec-btn:hover { border-color: #5a5d72; color: #c7cad4; }
.ft-dec-btn.ft-active {
  border-color: #8b87f5;
  color: #8b87f5;
  background: rgba(139,135,245,.1);
}

/* ====== 颜色修正区域（替换原换色区域）====== */
.ft-row-color-correct {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid #2a2d38;
}
.ft-color-correct-area {
  display: flex; flex-direction: column; gap: 8px;
}
.ft-cc-hint {
  font-size: 11px; color: #6c6e7a; line-height: 1.4;
}
.ft-cc-btn {
  width: 100%; height: 34px;
  border: none; border-radius: 7px;
  background: linear-gradient(135deg, #1d9e75, #16a085);
  color: #fff; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px;
  transition: all .18s;
}
.ft-cc-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(29,158,117,0.35);
}
.ft-cc-btn:disabled {
  background: #33364a; color: #5a5e72; cursor: not-allowed;
}
.ft-cc-status { font-size: 11px; min-height: 16px; }
.ft-cc-status.busy {
  color: #8b87f5; animation: ccStatusPulse 1.2s infinite;
}
@keyframes ccStatusPulse {
  0%,100% { opacity: 1; } 50% { opacity: .35; }
}

/* ===== 输出设置（格式/像素/DPI/比例） ===== */
.ft-output-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* 左列：格式+比例纵向排列 */
.ft-out-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-out-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ft-out-item.ft-out-wide {
  flex: 1 1 100%;
}
.ft-out-item.ft-out-full {
  flex: 1 1 100%;
}
.ft-out-lbl {
  font-size: 10px;
  color: #6b7085;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* 格式下拉 */
.ft-out-select {
  height: 26px;
  padding: 0 8px;
  border: 1px solid #2f3342;
  border-radius: 6px;
  background: #1e2028;
  color: #c8cdd8;
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color .2s;
  min-width: 78px;
}
.ft-out-select:hover { border-color: #454a5e; }
.ft-out-select:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
/* 像素输入 */
.ft-out-pixel {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ft-out-num {
  width: 64px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #2f3342;
  border-radius: 6px;
  background: #1e2028;
  color: #c8cdd8;
  font-size: 12.5px;
  text-align: center;
  outline: none;
  transition: border-color .2s;
  -moz-appearance: textfield;
}
.ft-out-num::-webkit-inner-spin-button { -webkit-appearance: none; }
.ft-out-num:hover { border-color: #454a5e; }
.ft-out-num:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.ft-out-x { color: #555a6e; font-size: 13px; user-select: none; }
/* 锁定宽高比按钮 */
.ft-lock-btn {
  width: 26px; height: 26px; border-radius: 5px;
  border: 1px solid #34384a; background: #23252e;
  color: #8b87f5; font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.ft-lock-btn:hover { border-color: #8b87f5; background: rgba(139,135,245,.1); }
.ft-lock-btn.active {
  border-color: #8b87f5; background: rgba(139,135,245,.16);
}
.ft-lock-btn:not(.active) i::before { content: '\f09c'; } /* unlock icon */
/* DPI */
.ft-out-dpi-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
}
.ft-out-num-short {
  width: 54px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #2f3342;
  border-radius: 6px;
  background: #1e2028;
  color: #c8cdd8;
  font-size: 12px;
  text-align: center;
  outline: none;
  transition: border-color .2s;
  -moz-appearance: textfield;
}
.ft-out-num-short::-webkit-inner-spin-button { -webkit-appearance: none; }
.ft-out-num-short:hover { border-color: #454a5e; }
.ft-out-num-short:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.ft-out-unit {
  font-size: 11px;
  color: #6b7085;
  font-weight: 600;
}
/* 快捷预设按钮 */
.ft-out-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ft-preset-btn {
  height: 24px;
  padding: 0 8px;
  border: 1px solid #2f3342;
  border-radius: 6px;
  background: #1a1c24;
  color: #9ca0b5;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.ft-preset-btn:hover {
  border-color: #8b87f5;
  color: #c8cdd8;
  background: rgba(139,135,245,.08);
}
.ft-preset-btn.active {
  border-color: #8b87f5;
  background: rgba(139,135,245,.16);
  color: #8b87f5;
}

/* 保留旧样式兼容 */
.ft-output-items { display: flex; gap: 12px; align-items: center; position: relative; margin-bottom: 12px; padding-bottom: 0; }
.ft-output-items::after {
  content: ''; position: absolute; bottom: -6px; left: 0; right: 0;
  height: 1px; background: #2a2d38;
}
.ft-radio {
  font-size: 11.5px; color: #9ca0b5; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.ft-radio input[type="radio"] { accent-color: #8b87f5; margin: 0; }
.ft-apply-btn {
  width: 100%;
  height: 34px; padding: 0 18px; border-radius: 6px;
  border: 1px solid #8b87f5; background: rgba(139,135,245,.12);
  color: #8b87f5; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .2s; margin-top: 0;
}
.ft-apply-btn:hover { background: #8b87f5; color: #fff; }

.gallery-list {
  flex: 1; overflow-y: auto;
  padding: 6px 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.gallery-list::-webkit-scrollbar { width: 4px; }
.gallery-list::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.gallery-item {
  position: relative; aspect-ratio: 4/3;
  border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #fff;
  transition: all .2s; flex-shrink: 0;
}
.gallery-item:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: #e67e22; }
.gallery-item.active {
  border-color: #e67e22;
  box-shadow: 0 0 0 2px rgba(230,126,34,.25);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .gallery-idx {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: rgba(230,126,34,.85); color: #fff;
  border-radius: 5px; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.gallery-item .gallery-del {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px;
  background: rgba(239,68,68,.9); color: #fff;
  border: none; border-radius: 5px; cursor: pointer;
  font-size: 10px; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.gallery-item:hover .gallery-del { opacity: 1; }
.gallery-empty {
  text-align: center; color: var(--text-muted);
  padding: 30px 6px; font-size: 12px;
}
.gallery-empty i { font-size: 28px; margin-bottom: 8px; color: #C3D6EE; display: block; }

/* ---------- 中间列 ---------- */
.studio-mid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}
.zone-current {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 当前家具主体：左缩略图 + 右大图 */
.current-body {
  display: flex;
  flex: 1;
  gap: 8px;
  overflow: hidden;
}
.current-view {
  flex: 1;
  position: relative;
  background: #18191f;
  border: none;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  padding: 5px;
  position: relative;
}
.current-view img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.current-empty {
  text-align: center;
  color: #6b6f7d;
  font-size: 13px;
  cursor: pointer;
}
.current-empty:hover {
  color: #8b87f5;
}
.current-empty:hover i { color: #8b87f5; }
.current-empty i { font-size: 36px; margin-bottom: 8px; color: #3a3e4d; display: block; transition: color .2s; }

/* 产品图/背景图 双击锁定虚线框 */
.current-view.locked,
.bg-preview.locked {
  border: 2px dashed #8b87f5 !important;
  box-shadow: 0 0 0 3px rgba(139,135,245,0.15), 0 0 20px rgba(139,135,245,0.12);
  animation: lockedPreviewPulse 2s ease infinite;
}
.current-view .lock-overlay,
.bg-preview .lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  pointer-events: none;
}
.current-view .lock-overlay-tag,
.bg-preview .lock-overlay-tag {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(139,135,245,.95);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  pointer-events: auto;
}
.current-view .lock-overlay-tag:hover,
.bg-preview .lock-overlay-tag:hover { background: rgba(139,135,245,1); transform: scale(1.05); }

/* ---- 当前家具左侧：竖向缩略图条 ---- */
.current-thumbs-strip {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  background: #1e2128;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 0;
}
.thumbs-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px;
  background: #262a35;
  border-bottom: 1px solid #34384a;
}
.thumbs-strip-title {
  font-size: 10px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 3px;
}
.thumbs-strip-title i { color: #8b87f5; font-size: 9px; }
.add-thumb-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  padding: 2px 5px;
  background: rgba(139,135,245,0.15);
  border: 1px solid rgba(139,135,245,0.3);
  border-radius: 4px;
  color: #a9a8f5;
  cursor: pointer;
  transition: all 0.15s;
}
.add-thumb-btn-sm:hover { background: rgba(139,135,245,0.25); color: #fff; }

.thumbs-strip-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 5px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.thumbs-strip-list::-webkit-scrollbar { width: 3px; }
.thumbs-strip-list::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.thumbs-strip-item {
  width: 66px;
  height: 52px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  position: relative;
  background: #16171d;
  flex-shrink: 0;
}
.thumbs-strip-item:hover { border-color: #4a4d5c; transform: scale(1.03); }
.thumbs-strip-item.selected { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,0.25); }
.thumbs-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.thumbs-strip-item .thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: rgba(239,68,68,0.85);
  border-radius: 50%;
  color: white;
  font-size: 7px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.thumbs-strip-item:hover .thumb-del { display: flex; }

.zone-bg {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* 确保至少占中间列的40% */
}
.bg-cat-filter { display: flex; gap: 4px; margin-left: 1.5cm; flex-wrap: wrap; }
.mini-tag {
  font-size: 11px; padding: 2px 9px; border-radius: 5px;
  background: var(--bg-tertiary); color: var(--text-secondary);
  cursor: pointer; transition: var(--transition); font-weight: 500;
}
.mini-tag:hover { color: var(--primary); }
.mini-tag.active { background: var(--primary); color: #fff; }

/* ---- 背景主体：左缩略条(78px) + 右大图预览 ---- */
.bg-body {
  display: flex;
  flex: 1;
  gap: 8px;
  min-height: 200px;
  overflow: hidden;
}

/* 左侧竖向背景缩略条（78px固定宽） */
.bg-thumbs-strip {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  background: #1e2128;
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 120px;
}
.bg-thumbs-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 5px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}
.bg-thumbs-list::-webkit-scrollbar { width: 3px; }
.bg-thumbs-list::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.bg-thumb-item {
  width: 66px;
  height: 52px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  position: relative;
  background: #16171d;
  flex-shrink: 0;
}
.bg-thumb-item:hover { border-color: #4a4d5c; transform: scale(1.03); }
.bg-thumb-item.selected { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,0.25); }
.bg-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.bg-thumb-item.selected::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px; background: #8b87f5; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7px;
}

/* ==========================================================
   剪映风格改造 (2026-06-01) — 深色工作台 + 卡片化分区
   覆盖前面的浅色定义，使各区域层次分明、边界清晰
   ========================================================== */

/* 通用：每个区域 = 深灰浮起卡片 */
.zone-thumbs,
.zone-current,
.zone-bg,
.zone-result,
.zone-prompt {
  background: #23252e;
  border: 1px solid #2f3240;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  /* 注意：不能设 overflow: hidden，否则内部的模型选择器弹窗会被裁切 */
}

/* 通用区域标题栏：卡片顶部独立一条 */
.zone-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #c7cad4;
  margin: 0;
  padding: 0 14px; flex-shrink: 0; min-height: 28px;
  background: #2a2d38;
  border-bottom: 1px solid #34384a;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: visible;
}
.zone-label i { color: #8b87f5; }

/* ---- 区1 素材栏 ---- */
.zone-thumbs { background: #23252e; border-color: #2f3240; }
.zone-gallery {
  background: #23252e !important;
  border: 1px solid #2f3240 !important;
  border-radius: 6px !important;
}
.thumbs-head {
  background: #2a2d38;
  border-bottom: 1px solid #34384a;
  padding: 10px 12px;
}
.thumbs-title { color: #c7cad4; }
.thumbs-title i { color: #8b87f5; }
.thumbs-list { padding: 10px; }
.thumbs-list::-webkit-scrollbar-thumb { background: #3a3e4d; }
.thumb-item { background: #1a1b21; border-color: transparent; }
.thumb-item.active { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.3); }
.thumbs-empty { color: #6b6f7d; }
.thumbs-empty i { color: #3a3e4d; }

/* ---- 中间列 / 右侧列 ---- */
.studio-mid { grid-area: mid; }
.studio-right { grid-area: right; }
.zone-gallery {
  grid-area: gallery;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  z-index: 5;
}
.studio-mid, .studio-right { gap: 4px; }

/* 区2 当前图 / 区4 结果：内部预览画布用更深的底 */
.current-view,
.result-view {
  background: #1a1b21;
  border: none;
  border-radius: 0;
  flex: 1;
}
.result-view {
  background-color: #1a1b21;
}
.current-empty, .result-empty { color: #6b6f7d; }
.current-empty i, .result-empty i { color: #3a3e4d; }
.loading-text { color: #c7cad4; }
.loading-spinner { border-color: #2f3240; border-top-color: #8b87f5; }
.loading-bar-wrap { background: #2f3240; }

/* 区3 背景 */
.zone-bg > .zone-label {
  flex-wrap: wrap;
  white-space: normal;
  padding: 0 14px;
}
.bg-select-grid {
  padding: 12px;
  background: #23252e;
}
.bg-select-grid::-webkit-scrollbar-thumb { background: #3a3e4d; }
.mini-tag { background: #34384a; color: #a9adba; }
.mini-tag:hover { color: #fff; }
.mini-tag.active { background: #8b87f5; color: #fff; }
.bg-card { background: #1a1b21; }
.bg-card.selected { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.35); }
.bg-card.selected::after { background: #8b87f5; }

/* Ctrl+Click 多选状态 */
.bg-card.multi-selected {
  border-color: #6361ce !important;
  box-shadow: 0 0 0 2px rgba(99,97,206,.5), 0 2px 8px rgba(99,97,206,.25) !important;
}
.bg-card.multi-selected::before {
  content: '✓';
  position: absolute;
  top: -1px; right: -1px;
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #6361ce, #8b87f5);
  color: #fff;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 7px 0 8px;
  z-index: 3;
  font-weight: 700;
}
.bg-thumb-item.multi-selected {
  border-color: #6361ce !important;
  box-shadow: 0 0 0 1.5px rgba(99,97,206,.45) !important;
}

/* 多选提示条 */
.multi-select-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin-top: 8px;
  background: rgba(99,97,206,.08);
  border: 1px solid rgba(99,97,206,.2);
  border-radius: 8px;
  font-size: 12.5px;
  color: #555b70;
  animation: msbSlideIn .2s ease;
}
@keyframes msbSlideIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.multi-select-bar i { color: #6361ce; }
.multi-select-bar b { color: #6361ce; font-size: 14px; }
.msb-clear {
  margin-left: auto;
  width: 24px; height: 24px;
  border: none; border-radius: 6px;
  background: rgba(99,97,206,.1); color: #6361ce;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; transition: all .15s;
}
.msb-clear:hover { background: rgba(99,97,206,.2); }

.bg-card-upload { border-color: #3a3e4d; color: #6b6f7d; }
.bg-card-upload:hover { border-color: #8b87f5; color: #8b87f5; }

/* 区4 结果工具栏按钮 */
.zone-result .zone-label {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
  flex-wrap: nowrap;
  min-width: 0;
}
.zone-result .zone-label .result-toolbar {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 区5 要求输入 */
.zone-prompt { padding: 12px; gap: 10px; }
.prompt-quick { gap: 6px; }
.quick-chip { background: #34384a; color: #a9adba; }
.quick-chip:hover { border-color: #8b87f5; color: #fff; }
.zone-prompt textarea {
  background: #1a1b21;
  border-color: #34384a;
  color: #e4e6ec;
  height: 90px;
}
.zone-prompt textarea::placeholder { color: #6b6f7d; }
.zone-prompt textarea:focus {
  border-color: #8b87f5;
  box-shadow: 0 0 0 3px rgba(139,135,245,.18);
}

/* 标题栏不被压缩；内容区填充剩余 */
.zone-current > .zone-label,
.zone-result > .zone-label,
.zone-bg > .zone-label {
  flex-shrink: 0;
  flex-wrap: nowrap !important;
  overflow: visible;
}
.zone-current, .zone-result, .zone-bg { display: flex; flex-direction: column; }

/* 顶部导航栏纯黑 */
.navbar { background: #000000; border-bottom: 1px solid #222; }
.nav-brand { color: #e4e6ec; }
.nav-brand i { color: #8b87f5; }
.nav-link { color: #a9adba; }
.nav-link:hover { background: #2a2d38; color: #fff; }
.nav-link.active { background: linear-gradient(135deg, #6d68e8, #8b5cf6); color: #fff; }
.mobile-menu-btn { color: #e4e6ec; }

/* 主体背景同步深色 */
body { background: #000000; }
.main-content { background: #000000; }
.footer { background: #1d1e25; border-top: 1px solid #2f3240; color: #6b6f7d; }

/* ===== AI智能推荐背景卡片（科技风静态） ===== */
.bg-ai-recommend {
  width: 66px; height: 52px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #3a4060;
  transition: all .2s ease;
  position: relative;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(18,20,28,.95);
}
/* 四角科技边框 */
.bg-ai-recommend::before {
  content: '';
  position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px;
  border: 1px solid transparent;
  border-top-color: rgba(139,135,245,.35);
  border-left-color: rgba(139,135,245,.25);
  border-radius: 5px;
  pointer-events: none;
}
.bg-ai-recommend::after {
  content: '';
  position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px;
  border: 1px solid transparent;
  border-bottom-color: rgba(99,102,246,.25);
  border-right-color: rgba(139,135,245,.15);
  border-radius: 5px;
  pointer-events: none;
}
.bg-ai-recommend:hover {
  border-color: #5a60a0;
  box-shadow:
    0 0 8px rgba(139,135,245,.18),
    inset 0 0 10px rgba(99,102,246,.08);
}
.bg-ai-recommend.selected {
  border-color: #7c78e8;
  box-shadow:
    0 0 12px rgba(139,135,245,.28),
    inset 0 0 14px rgba(99,102,246,.12);
}
.bg-ai-recommend .ai-text {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  white-space: nowrap;
  text-transform: uppercase;
  position: relative; z-index: 1;
  padding: 0 4px;
  background: linear-gradient(180deg, #c4bfff 0%, #8b87f5 50%, #6361ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-ai-recommend .ai-check {
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #6c68d9, #8b87f5);
  color: #fff; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 7px; z-index: 3;
}
.bg-ai-recommend.selected .ai-check { display: flex; }

/* ===== v159: 背景图库卡片缩略图（与AI推荐同风格，无图标） ===== */
.bg-library-card {
  width: 66px; height: 52px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #3a4060;
  transition: all .2s ease;
  position: relative;
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: rgba(18,20,28,.95);
}
/* 四角科技边框（同 .bg-ai-recommend） */
.bg-library-card::before {
  content: '';
  position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px;
  border: 1px solid transparent;
  border-top-color: rgba(139,135,245,.35);
  border-left-color: rgba(139,135,245,.25);
  border-radius: 5px;
  pointer-events: none;
}
.bg-library-card::after {
  content: '';
  position: absolute; top: 3px; right: 3px; bottom: 3px; left: 3px;
  border: 1px solid transparent;
  border-bottom-color: rgba(99,102,246,.25);
  border-right-color: rgba(139,135,245,.15);
  border-radius: 5px;
  pointer-events: none;
}
.bg-library-card:hover {
  border-color: #5a60a0;
  box-shadow: 0 0 8px rgba(139,135,245,.18), inset 0 0 10px rgba(99,102,246,.08);
}
.bg-library-card.selected {
  border-color: #7c78e8;
  box-shadow: 0 0 12px rgba(139,135,245,.28), inset 0 0 14px rgba(99,102,246,.12);
}
/* 仅文字（无图标），渐变效果同 .ai-text */
.bg-library-card .lib-text {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  white-space: nowrap;
  text-transform: uppercase;
  position: relative; z-index: 1;
  padding: 0 4px;
  background: linear-gradient(180deg, #c4bfff 0%, #8b87f5 50%, #6361ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-library-card .lib-check {
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, #6c68d9, #8b87f5);
  color: #fff; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: 7px; z-index: 3;
}
.bg-library-card.selected .lib-check { display: flex; }

/* ===== v158: 背景图库视图（大图预览区内） ===== */
/* ★ v162: 用更高优先级选择器覆盖 .bg-preview > * 的 position:relative，确保 absolute 定位生效才能滚动 */
.bg-preview > .bg-library-view {
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  background: #18191f;
  border-radius: 6px;
  z-index: 5;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px;
  scrollbar-width: thin;
  scrollbar-color: #5a60a0 rgba(0,0,0,0.2);
  -webkit-overflow-scrolling: touch;  /* ★ v162: 触摸设备平滑滚动 */
  overscroll-behavior: contain;       /* ★ v162: 防止滚动传播到父容器 */
}
.bg-library-view::-webkit-scrollbar { width: 8px; }                 /* ★ v162: 加宽到8px */
.bg-library-view::-webkit-scrollbar-track { background: rgba(0,0,0,0.25); border-radius: 4px; }
.bg-library-view::-webkit-scrollbar-thumb { background: #5a60a0; border-radius: 4px; }
.bg-library-view::-webkit-scrollbar-thumb:hover { background: #7a80c0; }

.bg-lib-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(139,135,245,0.2);
  position: sticky;
  top: -12px;
  background: #18191f;
  padding-top: 2px;
  z-index: 2;
  margin-left: -14px;
  margin-right: -14px;
  padding-left: 14px;
  padding-right: 14px;
}
.bg-lib-title {
  font-size: 14px;
  font-weight: 600;
  color: #a5a0f0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bg-lib-title i { font-size: 13px; }
.bg-lib-count {
  font-size: 11px;
  color: #64748b;
  flex: 1;
}
.bg-lib-close {
  width: 24px; height: 24px;
  border-radius: 5px;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all .15s;
}
.bg-lib-close:hover {
  background: rgba(239,68,68,0.3);
  border-color: #ef4444;
}

.bg-lib-section {
  margin-bottom: 14px;
}
.bg-lib-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(139,135,245,0.08);
  border-left: 3px solid #8b87f5;
  border-radius: 0 4px 4px 0;
}
.bg-lib-section-title > span:first-child {
  font-size: 12px;
  font-weight: 600;
  color: #c4bfff;
}
.bg-lib-section-count {
  font-size: 10px;
  color: #64748b;
}

.bg-lib-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.bg-lib-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .15s;
  background: #0f1014;
}
.bg-lib-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.bg-lib-card:hover {
  border-color: #8b87f5;
  transform: scale(1.03);
  z-index: 1;
}
.bg-lib-card.selected {
  border-color: #8b87f5;
  box-shadow: 0 0 8px rgba(139,135,245,.4);
}
.bg-lib-card-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2px 4px;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #e2e8f0;
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bg-lib-card-check {
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  background: #8b87f5;
  color: #fff;
  border-radius: 50%;
  display: none !important;    /* ★ 默认隐藏，仅 .selected 时通过下方规则显示 */
  align-items: center;
  justify-content: center;
  font-size: 8px;
  z-index: 2;
}
/* 仅选中状态显示 */
.bg-lib-card.selected > .bg-lib-card-check {
  display: flex !important;
}

/* ★ 图库卡片删除按钮 */
.bg-lib-card-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 5px;
  background: rgba(239,68,68,0.9);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: all 0.15s;
}
.bg-lib-card:hover .bg-lib-card-del { display: flex; }
.bg-lib-card-del:hover { background: #ef4444; transform: scale(1.15); }

/* ★ 图库分类上传按钮（4:3比例，与背景图卡片同大小） */
.bg-lib-card-upload {
  aspect-ratio: 4 / 3;
  border-radius: 5px;
  border: 2px dashed #3a3e4d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  color: #64748b;
  font-size: 10px;
  transition: all 0.15s;
}
.bg-lib-card-upload:hover {
  border-color: #8b87f5;
  color: #8b87f5;
  background: rgba(139,135,245,0.08);
}
.bg-lib-card-upload i { font-size: 18px; }

/* 背景缩略条中的上传按钮 */
.bg-thumb-upload {
  width: 66px;
  height: 52px;
  border-radius: 7px;
  border: 2px dashed #3a3e4d;
  display: flex;
  flex-direction: column;       /* ★ v161: 纵向排列放文字 */
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: #64748b;                  /* ★ v161: 更明显 */
  font-size: 10px;
  font-weight: 500;
  transition: all 0.15s;
  flex-shrink: 0;
}
.bg-thumb-upload:hover {
  border-color: #8b87f5;
  color: #8b87f5;
  background: rgba(139,135,245,0.08);
}
.bg-thumb-upload i { font-size: 14px; }  /* ★ v161: 图标稍小 */

/* ★ 产品图缩略图条的自定义上传按钮（4:3比例，同缩略图宽度） */
.thumb-strip-upload {
  width: 66px;
  height: 52px;
  border-radius: 7px;
  border: 2px dashed #3a3e4d;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 16px;
  transition: all 0.15s;
  flex-shrink: 0;
  margin-top: 2px;
}
.thumb-strip-upload:hover {
  border-color: #8b87f5;
  color: #8b87f5;
  background: rgba(139,135,245,0.08);
}

/* 右侧大图预览区 */
.bg-preview {
  flex: 1;
  position: relative;
  background: #18191f;
  border: none;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  padding: 6px;
  position: relative;
}
/* 内框：与外框同色，保持一致（对齐 .current-view） */
.bg-preview::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  background: #18191f;
  border-radius: 6px;
  z-index: 0;
  pointer-events: none;
}
.bg-preview > * {
  position: relative;
  z-index: 1;
}
.bg-preview img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.bg-preview-empty {
  text-align: center;
  color: #6b6f7d;
  font-size: 13px;
}
.bg-preview-empty i {
  font-size: 36px;
  margin-bottom: 8px;
  color: #3a3e4d;
  display: block;
}

/* ===== 背景大预览区：AI智能推荐全屏展示页（科技感底色） ===== */
.bg-ai-full-page {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(135deg, #0d0e14 0%, #12141d 25%, #161927 50%, #111321 75%, #0a0b10 100%);
}
/* 科技网格底纹 */
.bg-ai-full-page::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(99,102,241,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,246,.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
/* 光晕层 */
.bg-ai-full-page::after {
  content: '';
  position: absolute;
  width: 120%; height: 120%;
  top: -10%; left: -10%;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(99,102,246,.12) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(139,92,246,.08) 0%, transparent 40%),
    radial-gradient(ellipse at 55% 85%, rgba(59,130,246,.07) 0%, transparent 35%);
}
.ai-full-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px;
}
.ai-full-title {
  font-size: 17px;
  font-weight: 700;
  color: #c7c9d4;
  letter-spacing: 1.5px;
}
.ai-full-recommend-info {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 0;                    /* ★ v161: 去掉内边距，让select填满 */
  border-radius: 24px;
  background: rgba(99,102,246,.08);
  border: 1px solid rgba(99,102,246,.18);
  box-shadow: 0 0 16px rgba(99,102,246,.08), inset 0 0 12px rgba(99,102,246,.04);
}
.ai-full-recommend-info i {
  color: #6366f1;
  font-size: 13px;
  flex-shrink: 0;
}
/* ★ v161: 风格选择下拉框 */
.ai-full-recommend-info select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: #9ca3be;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .3px;
  cursor: pointer;
  padding: 7px 22px 7px 10px;   /* 右侧留空间给箭头 */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239ca3be' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  min-width: 90px;
  transition: color .15s;
}
.ai-full-recommend-info select:hover {
  color: #c4bfff;
}
.ai-full-recommend-info select option {
  background: #18191f;
  color: #e2e8f0;
  padding: 4px;
}

/* 原网格布局保留给隐藏的bgSelectGrid（JS仍用它渲染数据） */
.bg-select-grid {
  display: none;
}
.bg-select-grid::-webkit-scrollbar { width: 5px; }
.bg-select-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ===== 角度参考图（影像预览框内） ===== */
.bg-angle-ref {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  display: flex; align-items: center;
  pointer-events: none;
}
.angle-ref-inner {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 9px;
  border-radius: 6px;
  background: rgba(18,20,28,.88);
  border: 1px solid #2e3242;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.angle-ref-icon {
  width: 40px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.angle-ref-label {
  font-size: 9px; font-weight: 600; color: #8b87f5;
  letter-spacing: 0.5px;
}

/* 原网格布局保留给隐藏的bgSelectGrid（JS仍用它渲染数据） */
.bg-card {
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: var(--transition);
  background: #1a1b21;
}
.bg-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bg-card.selected { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.35); }
.bg-card.selected::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: 5px; right: 5px;
  width: 18px; height: 18px; background: #8b87f5; color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px;
}
.bg-card img { width: 100%; height: 100%; object-fit: cover; }
.bg-card .bg-card-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.5); color: #fff; font-size: 10px;
  padding: 2px 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bg-card-upload {
  aspect-ratio: 4/3;
  border: 2px dashed #3a3e4d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #6b6f7d;
  font-size: 11px;
  gap: 4px;
  transition: var(--transition);
}
.bg-card-upload:hover { border-color: #8b87f5; color: #8b87f5; }
.bg-card-upload i { font-size: 18px; }

/* ===== 右侧列 ===== */
.studio-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  height: 100%;
}
.zone-result {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  position: relative;
}
.result-toolbar {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  align-items: center;
  margin-left: auto;
  padding: 0 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  overflow: visible;
}

/* ★ 颜色修正进行中 — 显示在图片预览框上（不再显示在工具栏） */
.cc-active-badge {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: rgba(0,0,0,.75); color: #7ee8c7;
  font-size: 13px; font-weight: 600; border-radius: 10px;
  border: 1px solid rgba(126,232,199,.35);
  z-index: 15; pointer-events: none;
  animation: ccBadgePulse 2s ease-in-out infinite;
  backdrop-filter: blur(6px);
}
@keyframes ccBadgePulse {
  0%,100% { border-color:rgba(126,232,199,.25); box-shadow:0 0 16px 4px rgba(126,232,199,0); }
  50%      { border-color:rgba(126,232,199,.6); box-shadow:0 0 20px 6px rgba(126,232,199,.12); }
}

.icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #3a3e4d;
  background: #34384a;
  color: #c7cad4;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0;
}
.icon-btn:hover { border-color: #8b87f5; color: #8b87f5; }

/* 影像预览工具栏的抠图按钮需要更宽以容纳文字 */
#cutoutBtn { width: auto; min-width: 42px; padding: 0 6px; }

.result-view {
  flex: 1;
  position: relative;
  background: #1a1b21;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 0;
  position: relative; /* 为内部绝对定位元素（如色彩修正徽标）提供定位基准 */
  position: relative;
  cursor: default;
  padding: 6px;
}
/* ★ 图片放大时裁剪溢出 + 移除内边距 */
.result-view:has(.zoomable) {
  overflow: hidden !important;
  padding: 0 !important;
}
/* 仅当图片有透明通道时才显示棋盘格 */
.result-view.has-transparent-bg {
  background-color: #1a1b21;
  background-image:
    linear-gradient(45deg, #202128 25%, transparent 25%),
    linear-gradient(-45deg, #202128 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #202128 75%),
    linear-gradient(-45deg, transparent 75%, #202128 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.result-view img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto; height: auto;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 0;
}
/* ★ P1-3: 合成结果出现时淡入+微缩放动画 */
@keyframes resultFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.result-view.img-appear {
  animation: resultFadeIn 0.4s cubic-bezier(.22,1,.36,1) forwards;
}
.result-empty { text-align: center; color: #6b6f7d; font-size: 13px; padding: 20px; }
.result-empty i { font-size: 46px; margin-bottom: 12px; color: #3a3e4d; display: block; }
.result-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
}
.loading-spinner {
  width: 32px; height: 32px; margin: 0; flex-shrink: 0;
  border: 3px solid #2f3240;
  border-top-color: #8b87f5;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-bar-wrap {
  width: 180px; height: 5px; background: #252836;
  border-radius: 3px; overflow: hidden; margin: 0; flex-shrink: 0;
}
.loading-text { font-size: 13px; color: #9ca0b5; white-space: nowrap; letter-spacing: .3px; }
.loading-cancel-btn {
  font-size: 12px; color: #9ca0b5; background: #252836;
  border: 1px solid #34384a; border-radius: 6px;
  padding: 5px 14px; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; transition: all .2s; line-height: 1.4;
}
.loading-cancel-btn:hover {
  border-color: #e55f5f; color: #f87171; background: rgba(245,101,101,.08);
}
.loading-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7c78ea, #a78bfa);
  border-radius: 3px; transition: width .4s ease; position: relative;
}
.loading-bar::after {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ===== 区域五：要求输入 ===== */
.zone-prompt {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.prompt-quick {
  display: flex; flex-wrap: wrap; gap: 6px;
  /* ★ 拖拽区域样式 */
  min-height: 0; padding: 1px 0;
}
.quick-chip {
  font-size: 11px; padding: 3px 10px; border-radius: 12px;
  background: #34384a; color: #c7cad4;
  cursor: pointer; transition: var(--transition); font-weight: 500;
  border: 1px solid transparent;
  user-select: none; /* 拖拽时不选中文字 */
  position: relative;
}
.quick-chip:hover { border-color: #8b87f5; color: #fff; background: #3d4255; }
/* ★ P2-5: 点击反馈动画 */
@keyframes chipPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.91); background: #8b87f5; color: #fff; border-color: #8b87f5; }
  100% { transform: scale(1); }
}
.quick-chip.chip-clicked { animation: chipPop 0.28s cubic-bezier(.22,1,.36,1); }

/* ★ 快捷标签拖拽排序样式 */
.quick-chip.dragging {
  opacity: 0.45;
  transform: scale(0.97);
  box-shadow: none;
  z-index: 10;
  cursor: grabbing !important;
}
.quick-chip.drag-over-before::before,
.quick-chip.drag-over-after::after {
  content: '';
  position: absolute;
  left: -3px; right: -3px;
  height: 2px;
  background: #8b87f5;
  border-radius: 1px;
  z-index: 11;
}
.quick-chip.drag-over-before::before { top: -4px; }
.quick-chip.drag-over-after::after { bottom: -4px; }

/* ★ 快捷标签编辑弹窗 */
.chip-edit-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  animation: chipEditOverlayIn 0.15s ease-out;
  backdrop-filter: blur(8px);
}
@keyframes chipEditOverlayIn {
  from { opacity: 0; } to { opacity: 1; }
}
.chip-edit-modal {
  background: #ffffff !important; border: 1px solid #e2e5eb !important;
  border-radius: 14px; padding: 24px; width: 440px; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 40px rgba(139,135,245,0.08);
  animation: chipEditModalIn 0.18s cubic-bezier(.22,1,.36,1);
}
@keyframes chipEditModalIn {
  from { transform: translateY(12px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
.chip-edit-title {
  font-size: 14px; font-weight: 600; color: #1a1a2e !important; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.chip-edit-field-label {
  font-size: 11px; color: #6b7280 !important; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 5px; margin-top: 10px;
}
.chip-edit-input {
  width: 100%; background: #f8f9fc !important; border: 1px solid #dde1e8 !important; border-radius: 8px;
  padding: 9px 12px; color: #1a1a2e !important; font-size: 13px;
  box-sizing: border-box; font-family: inherit; outline: none; transition: border-color .2s;
}
.chip-edit-input:focus { border-color: #8b87f5 !important; background: #f0ecfa !important; }
.chip-edit-textarea {
  width: 100%; background: #f8f9fc !important; border: 1px solid #dde1e8 !important; border-radius: 8px;
  padding: 10px 12px; color: #1a1a2e !important; font-size: 13px; line-height: 1.55;
  resize: vertical; min-height: 72px; max-height: 160px;
  box-sizing: border-box; font-family: inherit; outline: none; transition: border-color .2s;
}
.chip-edit-textarea:focus { border-color: #8b87f5 !important; background: #f0ecfa !important; }
.chip-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}
.chip-edit-btn {
  padding: 7px 16px; border: none; border-radius: 6px; font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all .15s;
}
.chip-edit-btn--ghost {
  background: #f0f1f5 !important; color: #555 !important;
  border: 1px solid #dde1e8 !important;
}
.chip-edit-btn--ghost:hover { background: #e4e6eb !important; color: #333 !important; }
.chip-edit-btn--primary {
  background: linear-gradient(135deg,#6d68e8,#8b5cf6) !important; color: #fff !important;
}
.chip-edit-btn--primary:hover { box-shadow: 0 2px 10px rgba(107,99,236,0.45); }
.chip-edit-btn--danger {
  background: transparent !important; color: #ef4444 !important; border: 1px solid transparent !important;
  padding: 7px 12px;
}
.chip-edit-btn--danger:hover { border-color: #ef4444 !important; background: #fef2f2 !important; }

/* ============================================================
 * ★ 快捷指令库按钮 + 弹窗
 * ============================================================ */
.quick-lib-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border: 1px solid #34384a; border-radius: 6px;
  background: #2a2d3a; color: #8b87f5; font-size: 12px;
  cursor: pointer; font-family: inherit; transition: all .15s;
  vertical-align: middle; margin-right: 4px; flex-shrink: 0;
}
.quick-lib-btn:hover { border-color: #8b87f5; background: #332e6a; color: #c4b8ff; }
.quick-lib-btn i { font-size: 11px; }

/* ---- 快捷指令库弹窗 ---- */
.qlib-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55); z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  animation: chipEditOverlayIn 0.15s ease-out;
}
.qlib-modal {
  background: #232530; border: 1px solid #34384a;
  border-radius: 12px; width: 600px; max-width: 94vw;
  max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
  animation: chipEditModalIn 0.18s cubic-bezier(.22,1,.36,1);
}
.qlib-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #34384a;
  flex-shrink: 0;
}
.qlib-title {
  font-size: 14px; font-weight: 600; color: #8b87f5;
  display: flex; align-items: center; gap: 8px;
}
.qlib-close-btn {
  width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: #8890a0; cursor: pointer;
  font-size: 14px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.qlib-close-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; }

/* 工具栏 */
.qlib-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-bottom: 1px solid #34384a;
  flex-shrink: 0;
}
.qlib-search-input {
  flex: 1; min-width: 0;
  background: #1a1b21; border: 1px solid #34384a; border-radius: 8px;
  padding: 7px 12px; color: #e4e6ec; font-size: 13px;
  box-sizing: border-box; outline: none; transition: border-color .2s;
}
.qlib-search-input:focus { border-color: #8b87f5; }
.qlib-search-input::placeholder { color: #565c70; }
.qlib-add-btn {
  padding: 7px 14px; border: 1px solid #8b87f5; border-radius: 8px;
  background: linear-gradient(135deg,#6d68e8,#8b5cf6); color: #fff;
  font-size: 12px; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: all .15s; display: flex; align-items: center; gap: 5px;
}
.qlib-add-btn:hover { box-shadow: 0 2px 10px rgba(107,99,236,0.35); }

/* 列表区域 */
.qlib-list-wrap {
  flex: 1; overflow-y: auto; padding: 12px 20px;
  min-height: 200px;
}
.qlib-list-wrap::-webkit-scrollbar { width: 5px; }
.qlib-list-wrap::-webkit-scrollbar-track { background: transparent; }
.qlib-list-wrap::-webkit-scrollbar-thumb { background: #34384a; border-radius: 3px; }

/* 单条快捷指令卡片 */
.qlib-item {
  background: #1a1b21; border: 1px solid #2e3142; border-radius: 8px;
  padding: 12px 14px; margin-bottom: 8px;
  transition: all .15s; position: relative;
}
.qlib-item:hover { border-color: #444861; }
.qlib-item-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.qlib-item-name {
  font-size: 13px; font-weight: 600; color: #e4e6ec;
  cursor: default;
}
.qlib-item-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}
.qlib-action-btn {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: transparent; color: #8890a0; cursor: pointer;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.qlib-action-btn:hover { background: #2e3142; }
.qlib-action-btn.copy:hover { color: #22c55e; background: rgba(34,197,94,0.1); }
.qlib-action-btn.use:hover { color: #8b87f5; background: rgba(139,135,245,0.1); }
.qlib-action-btn.del:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.qlib-item-text {
  font-size: 12px; color: #8890a0; line-height: 1.5;
  word-break: break-all; max-height: 60px; overflow-y: auto;
  padding-right: 4px;
}
.qlib-item-text::-webkit-scrollbar { width: 3px; }
.qlib-item-text::-webkit-scrollbar-thumb { background: #34384a; border-radius: 2px; }

/* 空状态 */
.qlib-empty {
  text-align: center; padding: 40px 20px; color: #565c70;
}
.qlib-empty i { font-size: 32px; margin-bottom: 10px; display: block; opacity: 0.4; }
.qlib-empty span { font-size: 13px; }

/* 添加/编辑表单（内嵌在列表中） */
.qlib-form {
  background: #1e2030; border: 1px solid #8b87f5; border-radius: 8px;
  padding: 14px; margin-bottom: 8px;
}
.qlib-form-row { margin-bottom: 10px; }
.qlib-form-label {
  font-size: 11px; color: #8890a0; text-transform: uppercase;
  letter-spacing: 0.5px; margin-bottom: 4px; display: block;
}
.qlib-form-input,
.qlib-form-textarea {
  width: 100%; background: #1a1b21; border: 1px solid #34384a; border-radius: 6px;
  padding: 8px 10px; color: #e4e6ec; font-size: 13px;
  box-sizing: border-box; font-family: inherit; outline: none; transition: border-color .2s;
}
.qlib-form-input:focus, .qlib-form-textarea:focus { border-color: #8b87f5; }
.qlib-form-textarea {
  resize: vertical; min-height: 56px; max-height: 120px; line-height: 1.5;
}
.qlib-form-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;
}

/* 复制成功提示（行内） */
.qlib-copied-toast {
  position: absolute; right: 50px; top: 50%;
  transform: translateY(-50%);
  background: #166534; color: #fff; font-size: 11px; padding: 3px 10px;
  border-radius: 4px; animation: qlibCopiedFade 1.2s ease forwards;
  pointer-events: none; white-space: nowrap;
}
@keyframes qlibCopiedFade {
  0%{opacity:0;transform:translateY(-50%) translateX(4px)}
  15%{opacity:1;transform:translateY(-50%) translateX(0)}
  75%{opacity:1;transform:translateY(-50%) translateX(0)}
  100%{opacity:0;transform:translateY(-50%) translateX(4px)}
}

/* ============================================================
 * ★ 图片裁剪工具（全屏覆盖层 + 拖拽选区）
 * ============================================================ */
.crop-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0,0,0,0.82);
  display: flex; align-items: center; justify-content: center;
  animation: cropOverlayIn .2s ease;
}
@keyframes cropOverlayIn { from{opacity:0} to{opacity:1} }
.crop-stage {
  position: relative; display: inline-block;
  max-width: 90vw; max-height: 85vh;
}
/* 图片容器（限制显示尺寸） */
.crop-img-wrap {
  display: block; max-width: 85vw; max-height: 75vh;
  overflow: hidden; position: relative;
}
.crop-img-wrap img {
  display: block; max-width: 100%; max-height: 75vh;
  user-select: none; -webkit-user-drag: none;
}
/* 遮罩暗区（选区外的部分） */
.crop-mask-tl, .crop-mask-tr, .crop-mask-bl, .crop-mask-br {
  position: absolute; background: rgba(0,0,0,.55);
  pointer-events: none; z-index: 1;
}
/* 选区 */
.crop-select-box {
  position: absolute; z-index: 2;
  border: 2px solid #8b87f5; box-sizing: border-box;
  cursor: move; box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
}
/* 九宫格辅助线 */
.crop-grid-lines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.crop-grid-lines::before,
.crop-grid-lines::after {
  content:''; position: absolute; background: rgba(255,255,255,.25);
}
.crop-grid-lines::before { left:33.33%; right:33.33%; top:0; bottom:0; }
.crop-grid-lines::after  { top:33.33%; bottom:33.33%; left:0; right:0; }
/* 八个拖拽手柄 */
.crop-handle {
  position: absolute; width: 10px; height: 10px;
  background: #8b87f5; border: 1.5px solid #fff; border-radius: 2px;
  z-index: 3; cursor: pointer;
}
.crop-handle--tl { top:-5px; left:-5px; cursor:nw-resize; }
.crop-handle--tc { top:-5px; left:50%; margin-left:-5px; cursor:n-resize; }
.crop-handle--tr { top:-5px; right:-5px; cursor:ne-resize; }
.crop-handle--ml { top:50%; margin-top:-5px; left:-5px; cursor:w-resize; }
.crop-handle--mr { top:50%; margin-top:-5px; right:-5px; cursor:e-resize; }
.crop-handle--bl { bottom:-5px; left:-5px; cursor:sw-resize; }
.crop-handle--bc { bottom:-5px; left:50%; margin-left:-5px; cursor:s-resize; }
.crop-handle--br { bottom:-5px; right:-5px; cursor:se-resize; }
/* 尺寸信息标签 */
.crop-size-label {
  position: absolute; bottom: -26px; left: 50%;
  transform: translateX(-50%); z-index: 4;
  background: rgba(0,0,0,.7); color:#fff; font-size:11px;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  pointer-events: none;
}
/* 工具栏（底部） */
.crop-toolbar {
  position: relative; z-index: 10;
  margin-top: 14px; display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
/* 比例预设按钮组 */
.crop-ratio-group {
  display: flex; gap: 3px; background: #1a1b21;
  padding: 3px; border-radius: 8px; border: 1px solid #34384a;
}
.crop-ratio-btn {
  padding: 5px 11px; border: none; border-radius: 5px;
  background: transparent; color: #a9adba; font-size: 11px;
  cursor: pointer; font-family: inherit; transition: all .15s;
  white-space: nowrap;
}
.crop-ratio-btn:hover { color: #e4e6ec; background: #2a2c38; }
.crop-ratio-btn.active { background: #8b87f5; color: #fff; }
/* 操作按钮 */
.crop-action-btn {
  padding: 7px 18px; border: none; border-radius: 6px;
  font-size: 12px; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.crop-action-btn--primary {
  background: linear-gradient(135deg,#6d68e8,#8b5cf6); color: #fff;
}
.crop-action-btn--primary:hover { box-shadow: 0 2px 10px rgba(107,99,236,.35); }
.crop-action-btn--ghost {
  background: #34384a; color: #a9adba;
}
.crop-action-btn--ghost:hover { background: #3e4356; color: #e4e6ec; }
.crop-close-btn {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.12);
  color: #ccc; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.crop-close-btn:hover { background: rgba(239,68,68,.6); color: #fff; }

/* ★ 裁剪工具 — 多边形（自由形状）模式 */
.crop-poly-canvas {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: auto; cursor: crosshair;
}
/* 隐藏矩形选区 */
.crop-poly-active .crop-select-box,
.crop-poly-active .crop-mask-tl,
.crop-poly-active .crop-mask-tr,
.crop-poly-active .crop-mask-bl,
.crop-poly-active .crop-mask-br { display: none !important; }
/* 比例预设在多边形模式下禁用 */
.crop-ratio-group.disabled { opacity: 0.35; pointer-events: none; }

/* 多边形模式提示文字 */
.crop-poly-hint {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%); z-index: 6;
  background: rgba(0,0,0,.7); color:#c7cad4; font-size:11px;
  padding: 5px 14px; border-radius: 6px; white-space: nowrap;
  pointer-events: none; animation: polyHintPulse 2s ease-in-out infinite;
}
@keyframes polyHintPulse {
  0%,100% { opacity:.8; } 50% { opacity:1; }
}
/* 自由形状按钮激活态 */
#_polyToggleBtn.active {
  background: linear-gradient(135deg,#6d68e8,#8b5cf6); color:#fff;
}
/* 撤销点按钮 */
#_undoPolyBtn { transition: all .15s; }
#_undoPolyBtn:hover { background: #ef4444 !important; color: #fff !important; }

/* ===== 模型选择器（内嵌在 prompt-actions 中） ===== */
.prompt-model-selector {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}
.pms-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 5px;
  color: #8b87f5;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  max-width: 200px;
  font-family: inherit;
}
.pms-btn:hover {
  background: #2a2d3a;
  color: #a5a3f7;
}
.pms-btn.active {
  background: rgba(139,135,245,0.12);
  color: #8b87f5;
}
.pms-btn i:first-child {
  font-size: 12px;
}
.pms-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}
.pms-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  min-width: 340px;
  max-width: 420px;
  max-height: 360px;
  background: #232530;
  border: 1px solid #34384a;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pmsFadeIn 0.15s ease;
}
@keyframes pmsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pms-header {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #8b87f5;
  border-bottom: 1px solid #2a2d3a;
}
.pms-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.pms-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 12px;
  color: #c5c8d6;
  position: relative;
}
.pms-item:hover {
  background: #2a2d3a;
}
.pms-item.selected {
  background: #2d2e45;
  color: #fff;
}
/* ★ 勾选图标移到右侧（v125: 加大尺寸+间距确保可见） */
.pms-item.selected::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 11px;
  color: #8b87f5;
  margin-left: auto;
  flex-shrink: 0;
  padding-left: 6px;
}
.pms-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.pms-item-icon.provider-doubao { background: #4e54c8; color: #fff; }
.pms-item-icon.provider-qwen_img { background: #6e2fc9; color: #fff; }
.pms-item-icon.provider-hunyuan { background: #2563eb; color: #fff; }
.pms-item-icon.provider-custom { background: #34384a; color: #a9adba; }
.pms-item-icon.provider-dashscope { background: #ff6a00; color: #fff; }
.pms-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pms-item-status {
  font-size: 10px;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 8px;
}
.pms-item-status.has-key { background: rgba(139,135,245,0.15); color: #8b87f5; }
.pms-item-status.no-key { background: rgba(239,68,68,0.12); color: #ef4444; }
.pms-item-status.inherit-key { background: rgba(251,191,36,0.12); color: #fbbf24; }
.pms-group-label {
  padding: 6px 14px 2px;
  font-size: 10px;
  color: #5a5e6b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pms-empty {
  padding: 24px 14px;
  text-align: center;
  color: #5a5e6b;
  font-size: 12px;
}
.pms-footer {
  border-top: 1px solid #2a2d3a;
  padding: 6px;
}
.pms-goto-settings {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #8b87f5;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.pms-goto-settings:hover {
  background: #2a2d3a;
}

/* ===== 输入框行（内嵌尺寸按钮） ===== */
.prompt-input-row {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.prompt-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ★ 尺寸触发按钮（放在 prompt-actions 最左侧，与模型选择器同尺寸） */
.size-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  min-width: 0;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #a5a2f7;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  font-family: inherit;
  white-space: nowrap;
  text-align: left;
  width: auto;
}
.size-trigger-btn:hover {
  background: rgba(139,135,245,.12);
  color: #c5c2ff;
}
.size-trigger-btn.active {
  background: rgba(139,135,245,.18);
  color: #fff;
}
.size-trigger-btn i { font-size: 12px; }
.stb-label {
  font-size: 11px; font-weight: 600; line-height: 1.2;
  letter-spacing: .2px;
  text-align: left;
}

/* ★ 快捷比例选择器（按钮+下拉框） */
.size-quick-picker {
  position: relative;
  flex-shrink: 0;
}
.sqp-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 260px;
  background: #1e1e2e;
  border: 1px solid rgba(139,135,245,.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset;
  z-index: 1000;
  padding: 4px 0;
  animation: sqpFadeIn .15s ease;
}
@keyframes sqpFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.sqp-dropdown.show { display: block; }
.sqp-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-size: 12px; color: #ccc; cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.sqp-item:hover { background: rgba(139,135,245,.15); color: #e0dfff; }
.sqp-item.active { color: #a5a2f7; background: rgba(139,135,245,.1); }
.sqp-item i { font-size: 11px; width: 14px; text-align: center; opacity: .7; }

/* ★ 输出张数选择器（比例按钮右边） */
.output-count-picker {
  position: relative;
  flex-shrink: 0;
}
.oc-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  height: 22px;
  padding: 0 10px;
  min-width: 0;
  border-radius: 5px;
  border: none;
  background: transparent;
  color: #a5a2f7;
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
  font-family: inherit;
  white-space: nowrap;
  text-align: left;
}
.oc-trigger-btn:hover { background: rgba(139,135,245,.12); color: #c5c2ff; }
.oc-trigger-btn.active { background: rgba(139,135,245,.18); color: #fff; }
.oc-trigger-btn i { font-size: 12px; }
.oc-label { font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .2px; }
.oc-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 110px;
  background: #1e1e2e;
  border: 1px solid rgba(139,135,245,.25);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 1000;
  padding: 4px 0;
  animation: sqpFadeIn .15s ease;
}
.oc-dropdown.show { display: block; }
.oc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  font-size: 12px; color: #ccc; cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.oc-item:hover { background: rgba(139,135,245,.15); color: #e0dfff; }
.oc-item.active { color: #a5a2f7; background: rgba(139,135,245,.1); }
.oc-item i { font-size: 11px; width: 14px; text-align: center; opacity: .7; }
.sqp-item .sp-rect-icon { width: 14px; height: 14px; }
.sqp-sep { height: 1px; background: rgba(255,255,255,.08); margin: 3px 10px; }
/* 快捷菜单内自定义行 */
.sqp-custom-trigger { color: #ccc; }
.sqp-custom-trigger:hover { color: #e0dfff; }
.sqp-custom-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 10px;
}
.sqp-num-input {
  width: 64px; height: 28px;
  border: 1px solid rgba(139,135,245,.35);
  border-radius: 5px; background: #181920;
  color: #e0dfff; font-size: 12px; text-align: center;
  outline: none;
}
.sqp-num-input:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.sqp-x-sep { color: #666; font-size: 12px; }
.sqp-apply-btn {
  height: 28px; padding: 0 12px;
  border: none; border-radius: 5px;
  background: #8b87f5; color: #fff; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.sqp-apply-btn:hover { background: #7a76e4; }

/* 尺寸弹窗遮罩 */
.size-popup-overlay {
  position: fixed; top:0; left:0; right:0; bottom:0;
  z-index: 99998;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  background: rgba(0,0,0,.45);
}
/* 尺寸弹窗主体 */
.size-popup {
  width: 400px; max-width: 90vw;
  background: #1e1f26;
  border: 1px solid rgba(139,135,245,.25);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 40px rgba(107,99,236,.08);
  overflow: hidden;
  animation: spFadeIn .2s ease-out;
}
@keyframes spFadeIn {
  from { opacity:0; transform: scale(.96) translateY(10px); }
  to { opacity:1; transform: scale(1) translateY(0); }
}
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(139,135,245,.06), transparent);
}
.sp-header span {
  font-size: 15px; font-weight: 700; color: #e4e6eb;
  display: flex; align-items: center; gap: 8px;
}
.sp-header span i { color: #8b87f5; font-size: 15px; }
.sp-close {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: transparent; color: #666;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; font-size: 13px;
}
.sp-close:hover { background: rgba(255,80,80,.12); color: #ff7070; }

/* 弹窗内容区 */
.sp-body { padding: 18px 20px; }
.sp-section { margin-bottom: 16px; }
.sp-section:last-child { margin-bottom: 0; }
.sp-section-label {
  font-size: 11.5px; font-weight: 600; color: #888da0;
  text-transform: uppercase; letter-spacing: .8px;
  margin-bottom: 10px;
}

/* 模式选择按钮组 */
.sp-mode-list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.sp-mode-btn {
  display: inline-flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid #34384a; background: #23252e;
  color: #9ca0b5; cursor: pointer; transition: all .18s;
  font-size: 12px; font-weight: 600;
  width: auto;
}
.sp-mode-btn i { font-size: 17px; color: #6b7088; transition: color .18s; }
.sp-mode-btn:hover {
  border-color: #4a4f68; background: #2a2d38; color: #c5c8d6;
}
.sp-mode-btn:hover i { color: #8b87f5; }
.sp-mode-btn.active {
  border-color: #8b87f5; background: rgba(139,135,245,.1);
  color: #e4e6eb; box-shadow: 0 2px 10px rgba(139,135,245,.15);
}
.sp-mode-btn.active i { color: #8b87f5; }

/* 固定比例预设网格 */
.sp-presets-section { transition: opacity .2s; }
.sp-presets-section.hidden { opacity: .35; pointer-events: none; }
.sp-preset-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
}
.sp-preset-btn {
  height: 34px; border-radius: 8px;
  border: 1px solid #34384a; background: #23252e;
  color: #9ca0b5; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.sp-preset-btn:hover { border-color: #4a4f68; background: #2a2d38; color: #d0d2da; }
.sp-preset-btn.active {
  background: linear-gradient(135deg,#8b87f5,#7c78e8); color: #fff;
  border-color: transparent; box-shadow: 0 1px 6px rgba(139,135,245,.25);
}
.sp-custom-preset { font-size: 11.5px; }

/* 比例矩形图标（v126: 加大尺寸确保可见） */
.sp-rect-icon {
  display: inline-block;
  border: 2px solid currentColor;
  border-radius: 2px;
  flex-shrink: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.sp-rect-auto { width: 16px; height: 16px; border-style: dashed; }
.sp-rect-1-1 { width: 15px; height: 15px; }
.sp-rect-4-3 { width: 18px; height: 14px; }
.sp-rect-3-4 { width: 14px; height: 18px; }
.sp-rect-16-9 { width: 22px; height: 13px; }
.sp-rect-9-16 { width: 13px; height: 22px; }

/* 自定义宽高区 */
.sp-custom-section {
  animation: spSlideIn .18s ease-out;
}
@keyframes spSlideIn {
  from { opacity:0; transform: translateY(-6px); }
  to { opacity:1; transform: translateY(0); }
}
.sp-custom-row {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; background: #18191f; border-radius: 8px;
  border: 1px solid #34384a;
}
.sp-num-input {
  width: 72px; height: 32px; text-align: center;
  background: #23252e; border: 1px solid #444862; border-radius: 6px;
  color: #e4e6ec; font-size: 13px; font-weight: 600;
  transition: border-color .15s;
}
.sp-num-input:focus { border-color: #8b87f5; outline: none; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.sp-x-sep { color: #555; font-weight: bold; font-size: 14px; }
.sp-lock-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid #444862; background: #2a2d38;
  color: #8b87f5; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  transition: all .15s; font-size: 11px;
}
.sp-lock-btn:hover { border-color: #8b87f5; background: rgba(139,135,245,.1); }
.sp-lock-btn.active { background: rgba(139,135,245,.15); border-color: #8b87f5; }
.sp-apply-custom {
  height: 32px; padding: 0 14px; border-radius: 6px;
  border: none; background: linear-gradient(135deg,#8b87f5,#7c78e8);
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .15s; margin-left: auto;
}
.sp-apply-custom:hover { box-shadow: 0 2px 8px rgba(139,135,245,.35); transform: translateY(-1px); }

/* 底部预览条 */
.sp-preview-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: rgba(139,135,245,.06);
  border: 1px solid rgba(139,135,245,.12); border-radius: 8px;
  color: #8b87f5; font-size: 12.5px; font-weight: 500;
}
.sp-preview-bar i { font-size: 13px; }

/* ===== 输入框工具按钮区 ===== */
.prompt-box {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: visible;
}
.zone-prompt textarea {
  width: 100%;
  border: 1px solid #34384a;
  border-radius: var(--radius);
  padding: 8px 12px 36px 12px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 105px;
  font-family: inherit;
  resize: vertical;
  color: #e4e6ec;
  background: #1a1b21;
  transition: var(--transition);
  box-sizing: border-box;
}
.prompt-actions {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.prompt-actions .pa-send {
  /* 不再 margin-left:auto，由模型选择器统一推到右侧 */
}
/* 模型选择器 + 历史按钮 + 发送按钮 全部靠右，紧凑贴边 */
.prompt-actions .prompt-model-selector {
  margin-left: auto;
  margin-right: 2px;
}
/* 尺寸按钮在左侧，不推到右边 */
.prompt-actions .size-trigger-btn {
  /* 自然靠左即可 */
}
/* 模型选择器与后续按钮零间距 */
.prompt-actions .prompt-model-selector + .pa-btn {
  margin-left: 0;
}
/* 右侧按钮组整体紧凑 */
.prompt-actions #paHistoryBtn,
.prompt-actions #paEnhanceBtn,
.prompt-actions #paVoiceBtn {
  margin-left: 0;
}
.pa-btn {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: #6b6f7d;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.pa-btn:disabled {
  opacity: 0.35;
}
.pa-btn:hover:not(:disabled) {
  background: #2a2d3a;
  color: #c5c8d6;
}
.pa-btn.pa-send {
  background: linear-gradient(135deg, #6d68e8, #8b5cf6);
  color: #fff;
}
.pa-btn.pa-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c77f0, #9b6ff7);
  transform: scale(1.05);
}
.pa-btn.pa-send:disabled {
  background: #2f3240;
  color: #5a5e6b;
  cursor: default;
  transform: none;
}

/* ===== 双击锁定标识 ===== */
.lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #8b87f5;
  color: #fff;
  border-radius: 4px;
  font-size: 9px;
  margin-left: 6px;
  flex-shrink: 0;
  animation: lockBadgePulse 2s ease infinite;
  box-shadow: 0 0 6px rgba(139,135,245,0.4);
}
@keyframes lockBadgePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(139,135,245,0.4); }
  50% { box-shadow: 0 0 12px rgba(139,135,245,0.7); }
}
.zone-current.locked, .zone-bg.locked {
  border-color: rgba(139,135,245,0.5) !important;
  box-shadow: none !important;
}
.zone-result.locked {
  border-color: #2f3240 !important;
  box-shadow: none !important;
}

/* ===== 预览框内锁定标识（仅左上角小标签，不遮挡图片） ===== */
.lock-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10;
  pointer-events: none;
}
.lock-overlay-tag {
  position: absolute;
  top: 6px; left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: rgba(139,135,245,0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  pointer-events: auto;
  cursor: pointer;
  transition: all 0.2s;
}
.lock-overlay-tag:hover {
  background: rgba(139,135,245,1);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  transform: scale(1.05);
}
.lock-overlay-tag i {
  font-size: 10px;
}
@keyframes lockOverlayPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== 参考图选择模式：可点击的预览框微弱提示 + 小方块标签 ===== */
.current-view.ref-pickable,
.bg-preview.ref-pickable {
  cursor: pointer;
  outline: 1px dashed rgba(139,135,245,0.35);
  outline-offset: -1px;
}
.current-view.ref-pickable:hover,
.bg-preview.ref-pickable:hover {
  outline-color: rgba(139,135,245,0.6);
}
/* 「⊕ 选为参考图」小方块标签（已选的视图隐藏此标签） */
.current-view.ref-pickable::after,
.bg-preview.ref-pickable::after {
  content: '⊕ 选为参考图';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(139,135,245,0.85);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 15;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
}
/* 已选为参考图的视图 — 隐藏 ⊕ 标签 */
.current-view.ref-pickable.ref-added::after,
.bg-preview.ref-pickable.ref-added::after {
  display: none;
}

/* ===== 参考图编号徽章（v158: 显示在产品图/背景图的缩略图上） ===== */
.ref-num-badge {
  position: absolute;
  bottom: 2px; left: 2px;
  padding: 1px 5px;
  background: rgba(139,135,245,0.95);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
/* 产品图/背景图缩略图需要 position:relative 才能容纳绝对定位徽章 */
.thumbs-strip-item,
.thumb-item,
.bg-thumb-item {
  position: relative;
}

/* v154 旧版缩略图内编号标签（v156 起不再使用，保留样式兼容） */
.ref-thumb-num-label {
  position: absolute;
  top: 3px; left: 3px;
  padding: 1px 6px;
  background: rgba(139,135,245,0.92);
  color: #fff;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ===== 影像预览区 - 锁定状态（图片清晰可见，仅角落小标识） ===== */
#resultImage.locked-preview {
  border: none;
  box-shadow: none;
  animation: none;
}

/* ===== 锁定后居中操作区（+参考图按钮，v150起一直显示，v155按钮在缩略图下方） ===== */
.lock-center-actions {
  position: absolute;
  top: 50%; left: 12px;
  transform: translateY(-50%);
  display: flex;             /* ★ v150: 始终显示，不再 hover 才出现 */
  flex-direction: column;
  align-items: stretch;      /* ★ v155: 拉伸让按钮和缩略图同宽 */
  gap: 6px;
  width: 80px;               /* ★ v155: 固定宽度与缩略图一致 */
  z-index: 11;
  pointer-events: auto;
}
/* v150: 移除 hover 显示逻辑，按钮+缩略图一直可见 */
.lock-ref-btn {
  width: 100%;               /* ★ v155: 与缩略图同宽 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 0;            /* ★ v155: 紧凑高度，放在缩略图下方 */
  background: rgba(139,135,245,0.9);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  order: 2;                  /* ★ v155: 按钮排在缩略图列之后 */
}
.lock-ref-btn:hover {
  background: #8b87f5;
  box-shadow: 0 3px 12px rgba(139,135,245,0.45);
  transform: scale(1.02);
}
.lock-ref-btn:active { transform: scale(0.97); }
.lock-ref-btn i { font-size: 11px; }
/* ★ v160: 选参考图状态（按钮激活反馈） */
.lock-ref-btn.picking {
  background: #ef4444;
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 12px rgba(239,68,68,0.5);
  animation: refBtnPulse 1.2s ease-in-out infinite;
}
.lock-ref-btn.picking:hover {
  background: #dc2626;
}
@keyframes refBtnPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 16px rgba(239,68,68,0.7); }
}

/* ===== v162: 选图模式下左侧缩略图条的视觉反馈 ===== */
#thumbsStripList.ref-picking-active .thumbs-strip-item {
  cursor: pointer;
  outline: 1.5px dashed rgba(239,68,68,0.45);
  outline-offset: -1px;
  transition: outline-color .15s, box-shadow .15s;
}
#thumbsStripList.ref-picking-active .thumbs-strip-item:hover {
  outline-color: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,0.5);
}
/* 选图模式下已选为参考图的缩略图加绿色提示 */
#thumbsStripList.ref-picking-active .thumbs-strip-item:has(.ref-num-badge) {
  outline: 1.5px solid rgba(34,197,94,0.6);
}

/* 参考图缩略图条 */
/* ===== 参考图缩略图浮层（v155: 按钮上方，4:3比例，小尺寸） ===== */
.ref-thumb-col {
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 14;
  pointer-events: auto;
  width: 100%;            /* ★ v155: 跟随父容器 80px */
  order: 1;               /* ★ v155: 缩略图排在按钮之前（上方） */
}
.ref-thumb-col.visible {
  display: flex;
}
.ref-thumb-item {
  position: relative;
  width: 100%;            /* ★ v155: 跟随父容器宽度 */
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #fff;          /* ★ v150: 白色描边 */
  background: #18191f;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.ref-thumb-item:hover {
  border-color: #fff;
  box-shadow: 0 3px 12px rgba(139,135,245,0.5);
}
.ref-thumb-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ref-thumb-num {
  position: absolute;
  bottom: 2px; right: 2px;
  padding: 1px 5px;
  background: rgba(139,135,245,0.85);
  color: #fff;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  pointer-events: none;
}
.ref-thumb-del {
  position: absolute;
  top: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(239,68,68,0.7);
  color: #fff;
  border: none;
  font-size: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s, background .2s;
  z-index: 2;
}
.ref-thumb-item:hover .ref-thumb-del {
  opacity: 1;
}
.ref-thumb-del:hover {
  background: #dc2626;
}

/* ===== v152: 参考图维度圆点标签（方案A：右下角圆点+弹出菜单） ===== */
.ref-aspect-dot {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(71, 85, 105, 0.92);    /* 未选：灰色 */
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background-color .2s, transform .15s;
  backdrop-filter: blur(3px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  user-select: none;
  line-height: 1;
}
.ref-aspect-dot:hover {
  transform: scale(1.12);
  background: rgba(91, 107, 128, 0.95);
}
.ref-aspect-dot.has-aspect {
  background: #534ab7;                    /* 已选：紫色 */
}
.ref-aspect-dot.has-aspect:hover {
  background: #6359d0;
}
/* 未选时显示小圆点图标 */
.ref-aspect-dot::before {
  content: '';
  display: block;
}
.ref-aspect-dot:not(.has-aspect)::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}
/* 已选时显示首字（由JS写入 data-label） */
.ref-aspect-dot.has-aspect::before {
  content: attr(data-label);
}

/* 弹出菜单（★ v153: fixed 定位挂到 body，避免被 overflow:hidden 裁切） */
.ref-aspect-menu {
  position: fixed;
  min-width: 92px;
  background: #1e293b;
  border: 1px solid rgba(139,135,245,0.4);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  z-index: 99999;
  padding: 4px;
  display: none;
}
.ref-aspect-menu.visible {
  display: block;
  animation: refMenuIn .12s ease-out;
}
@keyframes refMenuIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ref-aspect-menu-item {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 400;
  color: #e2e8f0;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  transition: background-color .12s, color .12s;
}
.ref-aspect-menu-item:hover {
  background: #334155;
  color: #fff;
}
.ref-aspect-menu-item.active {
  background: rgba(83,74,183,0.3);
  color: #a5a0f0;
  font-weight: 500;
}
.ref-aspect-menu-item.clear {
  color: #94a3b8;
  border-top: 1px solid rgba(148,163,184,0.2);
  margin-top: 2px;
  padding-top: 6px;
}
.ref-aspect-menu-item.clear:hover {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
}

/* ===== 旧版 lock-ref-strip（覆盖层内的横排，保留但不再主要使用） ===== */
.lock-ref-strip {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(15,17,25,0.82);
  border-radius: 10px;
  border: 1px solid rgba(139,135,245,0.35);
  max-width: 280px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lock-ref-strip::-webkit-scrollbar { display: none; }
.lock-ref-thumb {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid rgba(139,135,245,0.5);
  flex-shrink: 0;
}
.lock-ref-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.lock-ref-remove {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  border: 1.5px solid #fff;
  font-size: 9px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all .15s;
}
.lock-ref-thumb:hover .lock-ref-remove { opacity: 1; }
.lock-ref-remove:hover { background: #dc2626; transform: scale(1.1); }

/* ===== 提示词历史面板 ===== */
.prompt-history-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1e1f26;
  border: 1px solid #34384a;
  border-radius: 8px;
  max-height: 200px;
  z-index: 100;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #a9adba;
  border-bottom: 1px solid #34384a;
}
.ph-clear {
  font-size: 11px;
  color: #6b6f7d;
  background: none;
  border: none;
  cursor: pointer;
}
.ph-clear:hover { color: #e24b4a; }
.ph-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px;
}
.ph-item {
  padding: 6px 10px;
  font-size: 12px;
  color: #a9adba;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-item:hover {
  background: #2a2d3a;
  color: #e4e6ec;
}
.ph-empty {
  padding: 16px 12px;
  font-size: 11px;
  color: #6b6f7d;
  text-align: center;
}

/* ===== 增强提示词面板 ===== */
.prompt-enhance-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #1e1f26;
  border: 1px solid #34384a;
  border-radius: 8px;
  z-index: 100;
  overflow: hidden;
}
.pe-head {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #8b87f5;
  border-bottom: 1px solid #34384a;
}
.pe-original, .pe-result {
  padding: 8px 12px;
}
.pe-label {
  font-size: 10px;
  color: #6b6f7d;
  margin-bottom: 4px;
}
.pe-text {
  font-size: 12px;
  color: #a9adba;
  background: #13141a;
  padding: 8px 10px;
  border-radius: 5px;
  line-height: 1.5;
  word-break: break-all;
}
.pe-enhanced {
  color: #e4e6ec;
  border-left: 2px solid #8b87f5;
}
.pe-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid #34384a;
}
.pe-btn {
  font-size: 11px;
  padding: 5px 14px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.pe-cancel {
  background: #34384a;
  color: #a9adba;
}
.pe-cancel:hover { background: #3d4155; color: #c5c8d6; }
.pe-apply {
  background: #0f6e56;
  color: #fff;
}
.pe-apply:hover { background: #128a6b; }
.pe-loading {
  padding: 16px 12px;
  font-size: 12px;
  color: #8b87f5;
  text-align: center;
}
.pe-loading i { margin-right: 6px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.zone-prompt textarea:focus {
  outline: none;
  border-color: #8b87f5;
  box-shadow: 0 0 0 3px rgba(139,135,245,.18);
}
.zone-prompt textarea::placeholder { color: #6b6f7d; }
.generate-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #6d68e8, #8b5cf6);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(109,104,232,.4);
}
.generate-btn i { font-size: 18px; }
.generate-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(109,104,232,.45); }
.generate-btn:disabled { background: #2f3240; color: #5a5e6b; box-shadow: none; cursor: not-allowed; }
/* ★ 合成按钮 loading 态：脉冲动画 + 禁止交互 */
.generate-btn.loading {
  pointer-events: none !important;
  opacity: 0.85;
  position: relative;
}
.generate-btn.loading span { visibility: hidden; }
.generate-btn.loading::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* ===== 生成按钮模式颜色（两种模式统一紫色） ===== */
.gen-mode-generate {
  background: linear-gradient(135deg, #6d68e8, #8b5cf6);
  box-shadow: 0 4px 14px rgba(109,104,232,.4);
}
.gen-mode-generate:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(109,104,232,.45);
}
.gen-mode-aiedit {
  background: linear-gradient(135deg, #6d68e8, #8b5cf6);
  box-shadow: 0 4px 14px rgba(109,104,232,.4);
}
.gen-mode-aiedit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(109,104,232,.45);
}

.zone-current > .zone-label,
.zone-result > .zone-label,
.zone-bg > .zone-label { flex-shrink: 0; }
.zone-current, .zone-result, .zone-bg { display: flex; flex-direction: column; }

@media (max-width: 1200px) {
  .studio { grid-template-columns: 120px 1fr 1fr; height: auto; }
}
@media (max-width: 900px) {
  .studio { grid-template-columns: 1fr; height: auto; }
  .zone-thumbs { flex-direction: column; max-height: 200px; }
  .thumbs-list { flex-direction: row; overflow-x: auto; }
  .thumb-item { width: 100px; flex-shrink: 0; }
}

/* ===== 背景预览弹窗（双击放大+缩放拖拽） ===== */
.bg-preview-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.75); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.bg-preview-box {
  background: #18191f; border: 1px solid #2f3240;
  border-radius: 14px; width: 92vw; max-width: 1100px;
  max-height: 94vh; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  display: flex; flex-direction: column;
}
.bg-preview-head {
  padding: 12px 18px; background: #2a2d38;
  border-bottom: 1px solid #34384a;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.bg-preview-title { color: #e4e6ec; font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.bg-preview-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.zoom-btn {
  width: 24px; height: 24px; border-radius: 4px; border: 1px solid #3a3e4d;
  background: #34384a; color: #c7cad4; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  transition: all .15s;
  flex-shrink: 0;
  padding: 0;
}
.zoom-btn:hover { border-color: #8b87f5; color: #8b87f5; background: #3a3e4d; }
.zoom-level {
  color: #8b87f5; font-size: 11px; font-weight: 600;
  min-width: 36px; text-align: center;
  flex-shrink: 0;
  white-space: nowrap;
}
.bg-preview-close {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: transparent; color: #c7cad4; cursor: pointer;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bg-preview-close:hover { background: #ef4444; color: #fff; border-radius: 8px; }
.bg-preview-body {
  flex: 1; overflow: hidden;
  position: relative; cursor: default;
  background: #18191f;
  display: flex; align-items: center; justify-content: center;
  min-height: 400px;
}
.bg-preview-body img {
  max-width: none !important;
  max-height: none !important;
  width: auto; height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 4px;
}
.bg-preview-foot {
  padding: 10px 18px; border-top: 1px solid #34384a;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.bg-preview-hint { color: #6b6f7d; font-size: 11.5px; letter-spacing: 0.3px; }
.btn-use-this {
  padding: 9px 22px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #6d68e8, #8b5cf6); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.btn-use-this:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(109,104,232,.4); }

#cutoutBtn { border-color: #8b87f5; background: rgba(139,135,245,.15); color: #8b87f5; }
#cutoutBtn:hover { border-color: #8b87f5; background: rgba(139,135,245,.28); color: #fff; }
.cutout-empty-btn {
  margin-top: 16px; padding: 10px 24px; border-radius: 10px;
  border: 2px dashed #8b87f5; background: rgba(139,135,245,.12);
  color: #8b87f5; font-size: 14px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: all .2s;
}
.cutout-empty-btn:hover { background: rgba(139,135,245,.25); border-color: #a78bff; color: #fff; }
.cutout-zone-btn {
  height: 18px; padding: 0 10px; border-radius: 4px;
  border: 1px solid #8b87f5; background: rgba(139,135,245,.12);
  color: #8b87f5; font-size: 11.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  transition: all .15s; flex-shrink: 0;
}
.cutout-zone-btn:hover { background: rgba(139,135,245,.25); color: #fff; }
.cutout-zone-btn i { font-size: 11px; }

/* 产品图区域 AI抠图下拉菜单 */
.cutout-dropdown { position: relative; display: inline-flex; }
.cutout-dropdown .cutout-zone-btn {
  border: 1px solid #8b87f5; background: rgba(139,135,245,.12);
  color: #8b87f5; font-size: 11.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
  transition: all .15s; flex-shrink: 0;
}
.cutout-dropdown .cutout-zone-btn:hover { background: rgba(139,135,245,.25); color: #fff; }
.cutout-submenu {
  display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 100;
  min-width: 180px; background: #2a2d3a; border: 1px solid #3d4150;
  border-radius: 8px; padding: 4px 0; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.cutout-submenu.show { display: block; }
.cutout-sub-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px;
  border: none; background: transparent; color: #d1d5db; font-size: 12px;
  cursor: pointer; text-align: left; transition: background .12s;
}
.cutout-sub-item:hover { background: rgba(139,135,245,.12); color: #fff; }
.cutout-sub-item i { font-size: 12px; width: 16px; text-align: center; flex-shrink: 0; }
.cutout-sub-sep { height: 1px; background: #3d4150; margin: 4px 10px; }

.res-zoom-tools {
  display: flex; align-items: center; gap: 4px;
  background: #2a2d38; padding: 2px 8px; border-radius: 6px; flex-shrink: 0;
}
.res-action-tools {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; margin-left: auto;
}
#resZoomIn, #resZoomOut, #resZoomReset { width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid #3a3e4d; background: #34384a; color: #c7cad4;
  cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
#resZoomIn:hover, #resZoomOut:hover, #resZoomReset:hover { border-color: #8b87f5; color: #8b87f5; background: #3a3e4d; }
#resZoomLevel { color: #8b87f5; font-size: 11px; font-weight: 600; min-width: 36px; text-align: center; }
/* 画册缩略图条（影像预览框下方） */
.result-thumb-strip {
  display: none; flex-shrink: 0;
  padding: 0; gap: 0;
  background: #1a1c24; border-top: 1px solid #2a2d38;
}
.result-thumb-strip.has-items { display: flex; flex-direction: row; align-items: stretch; }
.result-thumb-strip.is-hidden { display: none !important; }
.rt-strip-head {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 36px; min-width: 36px; align-self: stretch;
  background: #1e2029; border-right: 1px solid #2a2d38;
  flex-shrink: 0;
}
.result-thumb-strip .strip-label {
  font-size: 9.5px; font-weight: 600; color: #5a5e72;
  display: flex; align-items: center; gap: 3px;
  cursor: pointer;
  transition: all .15s;
}
.result-thumb-strip .strip-label:hover { color: #8b87f5; }
.result-thumb-strip .strip-label i { font-size: 8px; }
/* 缩略图条隐藏后的恢复按钮 */
.rt-show-bar {
  position: absolute; bottom: 8px; left: 8px;
  height: 28px; padding: 0 12px;
  background: rgba(30,32,40,.92);
  border: 1px solid #3a3e4d;
  border-radius: 6px;
  display: none; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; z-index: 200;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  transition: all .2s ease;
}
.rt-show-bar.is-visible { display: flex; }
.rt-show-bar:hover { background: rgba(139,135,245,.18); border-color: #8b87f5; transform: scale(1.05); }
.rt-show-bar:active { transform: scale(0.97); }
.rt-show-bar i { color: #8b87f5; font-size: 11px; }
.rt-show-bar span { font-size: 11px; color: #c7cad4; font-weight: 500; }
.result-thumb-strip .strip-label {
  font-size: 9.5px; font-weight: 600; color: #5a5e72;
  display: flex; align-items: center; gap: 3px;
  writing-mode: horizontal-tb;
}
.result-thumb-strip .strip-label i { color: #6c70a0; }
.result-thumb-list {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 4px 6px; flex: 1;
  scrollbar-width: thin; scrollbar-color: #3a3e4d transparent;
}
.result-thumb-list::-webkit-scrollbar { height: 3px; }
.result-thumb-list::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.result-thumb-item {
  position: relative; width: 89px; height: 67px; flex-shrink: 0;
  border-radius: 5px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #23252e;
  transition: all .15s; opacity: 0.7;
}
.result-thumb-item:hover { opacity: 1; transform: translateY(-1px); border-color: #4a4e62; }
.result-thumb-item.rt-active {
  opacity: 1; border-color: #8b87f5;
}
.result-thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.result-thumb-item .rt-idx {
  position: absolute; top: 2px; right: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(139,135,245,.9);
  color: #fff;
  font-size: 7px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.result-thumb-item .rt-del {
  position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px;
  border: none; border-radius: 50%;
  background: rgba(239,68,68,.75);
  color: #fff;
  font-size: 7px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
  z-index: 2;
}
.result-thumb-item:hover .rt-del { display: flex; }
.result-thumb-item .rt-del:hover { background: #ef4444; transform: scale(1.15); }

.result-hint-bar {
  display: none; align-items: center; justify-content: center;
  padding: 8px 18px; border-top: 1px solid #34384a; gap: 8px;
  color: #6b6f7d; font-size: 11.5px; letter-spacing: 0.3px;
}

/* ============================================================
   补回：工具栏定位与组件样式（CSS截断事件中丢失）
   ============================================================ */

/* 产品图标题栏右侧按钮组 */
.btn-group-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 预览框内缩放工具栏（悬浮右上角，毛玻璃） */
.preview-zoom-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  background: rgba(20,21,28,.82);
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #2f3240;
  z-index: 5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ★ 工具栏行内缩放控件（zone-label 内） */
.zoom-inline-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
}
.zoom-btn-sm {
  width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid #3a3e4d; background: rgba(52,56,74,.6); color: #c7cad4;
  cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.zoom-btn-sm:hover { border-color: #8b87f5; color: #8b87f5; background: #3a3e4d; }
.zoom-level-sm {
  color: #8b87f5; font-size: 11px; font-weight: 600;
  min-width: 34px; text-align: center; padding: 0 2px;
}
.preview-zoom-toolbar .zoom-btn {
  width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid #3a3e4d; background: rgba(52,56,74,.75); color: #c7cad4;
  cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.preview-zoom-toolbar .zoom-btn:hover { border-color: #8b87f5; color: #8b87f5; background: #3a3e4d; }
.preview-zoom-toolbar .pzoom-level {
  color: #8b87f5; font-size: 11px; font-weight: 600;
  min-width: 32px; text-align: center;
}

/* 预览框内全屏悬浮按钮（已移到工具栏内，保留样式备用） */
.toolbar-sep {
  width: 1px;
  height: 16px;
  background: #3a3e4d;
  margin: 0 4px;
  flex-shrink: 0;
}

/* 全屏预览 */
.fullscreen-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.fullscreen-overlay[style*="display: flex"] {
  opacity: 1;
}
.fullscreen-toolbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.fs-zoom-btn {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}
.fs-zoom-btn:hover {
  background: rgba(139,135,245,.4) !important;
  border-color: #8b87f5 !important;
  color: #fff !important;
}
.fullscreen-toolbar .zoom-level {
  color: #fff !important;
  min-width: 44px;
  text-align: center;
}
.fullscreen-close {
  position: fixed;
  top: 16px; right: 20px;
  z-index: 10000;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fullscreen-close:hover { background: rgba(255,255,255,.25); }
.fullscreen-image {
  max-width: 96vw;
  max-height: 94vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 60px rgba(0,0,0,.5);
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center center;
  cursor: default;
  transition: none;
}
.fullscreen-image.fs-grabbable { cursor: grab; }
.fullscreen-image.fs-grabbing { cursor: grabbing; }

/* 导出下拉菜单 */
.export-dropdown {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.export-trigger {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  gap: 0 !important;
}
.export-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  display: none !important;
  flex-direction: column;
  min-width: 200px;
  background: #2a2d38;
  border: 1px solid #3a3e4d;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 100;
  overflow: hidden;
}
.export-dropdown.open .export-menu { display: flex !important; }
/* Also support 'show' class for JS compatibility */
.export-dropdown.show .export-menu,
.export-menu.show { display: flex !important; }
.export-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px;
  border: none; background: transparent;
  color: #c7cad4; font-size: 12.5px; cursor: pointer;
  transition: background .15s; text-align: left;
  white-space: nowrap;
}
.export-item:hover { background: #34384a; color: #fff; }
.export-item i { font-size: 13px; width: 16px; text-align: center; color: #8b87f5; }
.export-sep { height: 1px; background: #34384a; margin: 2px 0; }

/* ==================== 设置页面 ==================== */
#page-settings {
  padding: 24px 16px;
  overflow-y: auto;
}
#page-settings .page-header {
  min-height: auto;
  padding: 0 0 20px;
  margin-bottom: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-bottom: none;
  background: transparent;
}
#page-settings .page-header h1 {
  font-size: 18px;
  font-weight: 700;
}
#page-settings .page-header p {
  display: block;
  font-size: 12.5px;
  color: #6b6f7d;
  margin: 0;
}

.settings-wrap {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-card {
  background: #1e2029;
  border: 1px solid #2a2d38;
  border-radius: 8px;
  padding: 24px;
  transition: border-color .2s;
}
.settings-card:hover {
  border-color: #3a3e4d;
}

.settings-card-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #e4e6ec;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-card-title i {
  color: #8b87f5;
  font-size: 15px;
}

.settings-card-desc {
  font-size: 12px;
  color: #7a7f92;
  line-height: 1.55;
  margin-bottom: 18px;
  padding-left: 23px;
}
.settings-card-desc b { color: #a9adba; }

.form-row {
  margin-bottom: 18px;
}
.form-row:last-child {
  margin-bottom: 0;
}

.form-row > label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #3a3e4e;
  margin-bottom: 7px;
}
.form-row > label i {
  color: #6361ce;
  font-size: 12px;
}

.optional {
  font-weight: 400;
  font-size: 11px;
  color: #8890a4;
  background: #eceef4;
  padding: 1px 6px;
  border-radius: 3px;
}

.form-row input[type="text"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 13px;
  background: #fafbfe;
  border: 1.5px solid #dde1ea;
  border-radius: 8px;
  color: #2a2d3a;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .15s;
  box-sizing: border-box;
}
.form-row input:hover,
.form-row select:hover { border-color: #c0c6d8; background: #fff; }
.form-row input::placeholder,
.form-row textarea::placeholder {
  color: #b0b5c8;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: #6361ce;
  box-shadow: 0 0 0 3px rgba(99,97,206,.10);
  background: #fff;
}
.form-row select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238890a4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.form-row textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.form-hint {
  display: block;
  font-size: 11px;
  color: #8890a4;
  margin-top: 5px;
  line-height: 1.45;
}
.form-hint b { color: #8890a4; }

.settings-divider {
  height: 1px;
  background: #e8eaf0;
  margin: 20px 0 16px;
}

/* ============ 自动抠图流水线设置 ============ */
.pipeline-config-box {
  background: #f9fafb;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 6px;
}
.pipeline-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  flex-wrap: wrap;
}
.pipeline-row + .pipeline-row {
  border-top: 1px solid #e8eaf0;
  padding-top: 8px;
  margin-top: 3px;
}
.pipeline-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  min-width: 90px;
  flex-shrink: 0;
}
.pipeline-hint {
  font-size: 11px;
  color: #9ca3af;
  flex: 1;
  min-width: 100px;
}
.pipeline-row select,
.pipeline-row input[type="text"] {
  background: #ffffff;
  border: 1px solid #dde0ea;
  border-radius: 5px;
  padding: 5px 8px;
  font-size: 12px;
  color: #2a2d3a;
  outline: none;
  flex-shrink: 0;
}
.pipeline-row select:focus,
.pipeline-row input[type="text"]:focus {
  border-color: #378add;
}
/* toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #d1d5db;
  border-radius: 20px;
  transition: 0.2s;
}
.toggle-slider:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: #378add;
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(16px);
}

.settings-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn-test,
.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-test {
  background: #eef0f6;
  border-color: #dde0ea;
  color: #555b70;
}
.btn-test:hover {
  background: #e4e6f0;
  border-color: #c8cce0;
  color: #2a2d3a;
}
.btn-test i { color: #6361ce; }

.btn-save {
  background: linear-gradient(135deg, #6361ce, #8b87f5);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(99,97,206,.3);
}
.btn-save:hover {
  background: linear-gradient(135deg, #7573d9, #9a96f7);
  box-shadow: 0 4px 14px rgba(99,97,206,.42);
  transform: translateY(-1px);
}
.btn-save:active {
  transform: translateY(0);
}

.config-status {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  display: none;
}
.config-status.show { display: block; }
.config-status.success {
  background: rgba(72,187,120,.08);
  color: #48bb78;
  border: 1px solid rgba(72,187,120,.18);
}
.config-status.error {
  background: rgba(245,101,101,.08);
  color: #f56565;
  border: 1px solid rgba(245,101,101,.18);
}

/* ==================== 设置弹窗（浅色系）==================== */
.settings-modal-body {
  width: 1300px;
  max-width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #f8f9fc;
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,.15), 0 0 0 1px rgba(99,97,206,.1);
  overflow: hidden;
}

/* 标题栏 */
.settings-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(99,97,206,.06) 0%, transparent 100%);
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
}
.settings-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: #2a2d3a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-modal-title i { color: #6361ce; font-size: 15px; }
.settings-modal-close {
  width: 28px; height: 28px;
  border: none;
  border-radius: 7px;
  background: #eceef4;
  color: #7c8298;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .18s ease;
  font-size: 13px;
}
.settings-modal-close:hover {
  background: rgba(245,90,90,.12);
  color: #e05555;
}

/* Tab 切换栏 */
.settings-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
}
.settings-tab {
  padding: 11px 16px;
  border: none;
  background: none;
  color: #8890a4;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color .2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-tab i { font-size: 12.5px; }
.settings-tab:hover { color: #555b70; }
.settings-tab.active {
  color: #6361ce;
}
.settings-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #6361ce, #8b87f5);
  border-radius: 2px 2px 0 0;
}

/* 滚动内容区 */
.settings-modal-scroll {
  overflow-y: auto;
  padding: 18px 20px;
  flex: 1;
  min-height: 0;
}
.settings-modal-scroll::-webkit-scrollbar { width: 4px; }
.settings-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.settings-modal-scroll::-webkit-scrollbar-thumb { background: #d0d3e0; border-radius: 2px; }

/* 面板（tab内容） */
.settings-panel { display: none; }
.settings-panel.active { display: block; }

/* ========== AI大模型配置面板样式 ========== */

/* 四列一行布局：模型 / API Key / API 地址 / 地域 */
.config-row-4col {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}
.config-col {
  flex: 1;
  min-width: 0;
}
.config-col label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #3a3e4e;
  margin-bottom: 7px;
  letter-spacing: 0.2px;
}
.config-col input,
.config-col select {
  width: 100%;
  padding: 10px 12px;
  background: #fafbfe;
  border: 1.5px solid #dde1ea;
  border-radius: 8px;
  color: #2a2d3a;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color .2s, box-shadow .2s, background .15s;
}
.config-col input:hover,
.config-col select:hover {
  border-color: #c0c6d8; background: #fff;
}
.config-col input:focus,
.config-col select:focus {
  border-color: #6361ce;
  box-shadow: 0 0 0 3px rgba(99,97,206,.10);
  background: #fff;
}
.config-col select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238890a4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 28px;
}
/* 模型下拉分组样式 */
.config-col select optgroup {
  font-weight: 700;
  font-style: normal;
  color: #4a5068;
  padding: 2px 0;
}
.config-col select optgroup option {
  font-weight: 400;
  color: #2a2d3a;
  padding: 4px 0;
}

.features-intro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(99,97,206,.05);
  border: 1px solid rgba(99,97,206,.12);
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #555b70;
  line-height: 1.6;
}
.features-intro i {
  color: #6361ce;
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* 分区标题（图像/文本大模型） */
.config-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #2a2d3a;
  margin-bottom: 4px;
}
.config-section-title i {
  color: #6361ce;
  font-size: 15px;
}

/* ========== AI大模型配置 - 紧凑列表（表格对齐） ========== */

.btn-add-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6361ce;
  background: rgba(99,97,206,.08);
  border: 1px solid rgba(99,97,206,.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-add-model:hover {
  background: rgba(99,97,206,.14);
  border-color: rgba(99,97,206,.35);
}

/* 配置备份/恢复按钮 */
.config-section-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-config-backup,
.btn-config-restore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-config-backup {
  color: #059669;
  background: rgba(5,150,105,.08);
  border: 1px solid rgba(5,150,105,.2);
}
.btn-config-backup:hover {
  background: rgba(5,150,105,.14);
  border-color: rgba(5,150,105,.35);
}
.btn-config-restore {
  color: #d97706;
  background: rgba(217,119,6,.08);
  border: 1px solid rgba(217,119,6,.2);
}
.btn-config-restore:hover {
  background: rgba(217,119,6,.14);
  border-color: rgba(217,119,6,.35);
}

/* 列表表头 */
.model-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #8890a2;
  border-bottom: 1px solid #e8ebf0;
  text-align: center;
}
.model-list-header .col-type     { width:80px; min-width:80px; flex-shrink:0; text-align: center; }
.model-list-header .col-name     { width:120px; min-width:120px; flex-shrink:0; text-align: center; }
.model-list-header .col-id       { width:180px; min-width:180px; flex-shrink:0; white-space:nowrap; font-weight:normal; font-size:11px; font-family:'SF Mono',Menlo,Consolas,monospace; text-align: center; }
.model-list-header .col-provider { width:56px; text-align:center; font-weight:normal; }
.model-list-header .col-status   { width:100px; min-width:100px; text-align:center; font-weight:normal; }
.model-list-header .col-key      { width:120px; min-width:120px; flex-shrink:0; font-weight:normal; text-align: center; }
.model-list-header .col-url      { flex:1; min-width:0; font-weight:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align: center; }
.model-list-header .col-region   { width:64px; text-align:center; font-weight:normal; }
.model-list-header .col-edit     { width:40px; text-align:center; font-weight:normal; }
.model-list-header .col-test     { width:40px; text-align:center; font-weight:normal; }

/* ========== AI 抠图直接配置区域 ========== */
#cutoutDirectConfig { margin-bottom:8px; }
.cutout-direct-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fafafe; border:1px solid #e8e6f0; border-radius:6px 6px 0 0; margin-bottom:0; }
.cutout-direct-row:hover { background:#f3f2fa; }
.cutout-direct-label { font-size:12px; font-weight:500; color:#4a4870; min-width:70px; display:flex; align-items:center; gap:5px; }
.cutout-direct-select { min-width:200px; padding:4px 8px; border:1px solid #d1d0dd; border-radius:4px; font-size:12px; background:#fff; color:#2a2d3a; outline:none; }
.cutout-direct-select:focus { border-color:#8b5cf6; }
.cutout-direct-fields { display:flex; gap:6px; flex:1; align-items:center; }
.cutout-direct-field { display:flex; align-items:center; gap:4px; }
.cutout-direct-field label { font-size:11px; color:#6b7280; white-space:nowrap; }
.cutout-direct-field input { width:160px; padding:3px 6px; border:1px solid #d1d0dd; border-radius:4px; font-size:11px; outline:none; }
.cutout-direct-field input:focus { border-color:#8b5cf6; }
.cutout-direct-status { font-size:11px; font-weight:500; min-width:50px; text-align:center; }
.cutout-direct-status.status-ok { color:#16a34a; }
.cutout-direct-status.status-warn { color:#d97706; }
.cutout-direct-status.status-none { color:#9ca3af; }

/* ★ 抠图密钥配置详情区域（紧凑布局） */
.cutout-direct-detail { border:1px solid #e8e6f0; border-top:1px solid #8b5cf6; border-radius:0 0 6px 6px; padding:8px 10px; background:#fff; margin-bottom:6px; }
.cutout-direct-detail.cutout-detail-empty { text-align:center; color:#9ca3af; font-size:12px; padding:10px; border-top:1px dashed #d1d0dd; background:#fafafe; }
.cutout-direct-detail.cutout-detail-model { font-size:12px; color:#6b7280; display:flex; align-items:center; gap:6px; padding:4px 0; }
.cutout-direct-detail.cutout-detail-model i { color:#8b5cf6; }

/* 专用抠图平台密钥区域 */
.cutout-detail-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.cutout-detail-title { font-size:12px; font-weight:600; color:#2a2d3a; display:flex; align-items:center; gap:6px; }
.cutout-detail-title i { font-size:13px; }
.cutout-detail-help { font-size:11px; color:#8b5cf6; text-decoration:none; display:flex; align-items:center; gap:3px; }
.cutout-detail-help:hover { text-decoration:underline; }
.cutout-detail-fields { display:flex; flex-direction:column; gap:6px; }
.cutout-detail-field { display:flex; align-items:center; gap:8px; }
.cutout-detail-field label { font-size:12px; font-weight:500; color:#4a4870; min-width:90px; }
.cutout-detail-field input { flex:1; max-width:360px; padding:4px 8px; border:1px solid #d1d0dd; border-radius:4px; font-size:12px; outline:none; background:#fff; transition:border-color .2s; box-sizing:border-box; }
.cutout-detail-field input:focus { border-color:#8b5cf6; box-shadow:0 0 0 2px rgba(139,92,246,0.1); }
.cutout-detail-footer { display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:6px; border-top:1px solid #f0eef8; }
.cutout-detail-pricing { font-size:11px; color:#9ca3af; display:flex; align-items:center; gap:3px; }
.cutout-detail-pricing i { color:#8b5cf6; }
.cutout-detail-test { padding:3px 12px; border:1px solid #8b5cf6; border-radius:4px; background:#f8f7ff; font-size:12px; cursor:pointer; color:#7c3aed; display:flex; align-items:center; gap:4px; transition:all .2s; }
.cutout-detail-test:hover { background:#8b5cf6; color:#fff; }

/* 兼容旧样式 */
.cutout-direct-test { padding:3px 8px; border:1px solid #d1d0dd; border-radius:4px; background:#fff; font-size:11px; cursor:pointer; color:#6b7280; }
.cutout-direct-test:hover { background:#f3f2fa; border-color:#8b5cf6; color:#7c3aed; }

/* ★ 测试按钮内联反馈消息 */
.cutout-test-inline-msg { font-size:12px; display:flex; align-items:center; gap:5px; }
.cutout-test-loading { color:#8b5cf6; }
.cutout-test-ok { color:#16a34a; font-weight:500; }
.cutout-test-fail { color:#dc2626; }

.model-card-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.model-empty-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  text-align: center;
  color: #8890a4;
  font-size: 13px;
  background: #fff;
  border: 2px dashed #dde0ea;
  border-radius: 8px;
  justify-content: center;
}
.model-empty-hint i { font-size: 18px; opacity: .5; }

/* 单行 — 固定列宽对齐 */
.model-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  background: #fff;
  border-radius: 4px;
  transition: background .15s;
  font-size: 12px;
}
.model-row:hover { background: #f8f9fc; }
.model-row.key-missing { opacity: .7; }

/* 列定义 — 统一 12px */
.col-type {
  width: 80px; min-width: 80px; flex-shrink: 0;
  font-size: 12px; color: #8890a4; white-space: nowrap;
  text-align: center;
}
.col-name {
  width: 120px; min-width: 120px; flex-shrink: 0;
  font-size: 12px; font-weight: 400; color: #6b7280;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-id {
  width: 180px; min-width: 180px; flex-shrink: 0;
  font-size: 11px; font-family: 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap;
  text-align: center;
}
.col-id code { background: #f0f1f5; padding: 1px 5px; border-radius: 3px; color: #8890a4; white-space: nowrap; }
.col-provider { width: 56px; min-width: 56px; flex-shrink: 0; text-align: center; font-size: 12px; }
.col-status { width: 100px; min-width: 100px; flex-shrink: 0; text-align: center; font-size: 12px; }
.col-key { width: 120px; min-width: 120px; flex-shrink: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.col-url { flex: 1; min-width: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.col-region { width: 64px; min-width: 64px; flex-shrink: 0; text-align: center; font-size: 12px; }
.col-edit { width: 40px; min-width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.col-test { width: 40px; min-width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.col-test-na { color: #c8cad0; font-size: 12px; }

/* 抠图平台行在统一列表中的分隔标签 */
.model-list-cutout-sep {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 4px; margin-top: 6px;
  font-size: 11px; font-weight: 600; color: #8890a2;
  border-top: 1px dashed #e0e3e8;
}
.model-list-cutout-sep i { font-size: 10px; }

/* 抠图平台行特殊样式 */
.model-row-cutout { border-left: 3px solid #8b87f5; }

/* ========== 行内编辑区域（替代弹窗）========== */
.model-edit-row {
  display: block;
  background: linear-gradient(135deg, #f8f9ff, #fafbff);
  border: 1.5px solid #c7d2fe;
  border-radius: 10px;
  margin: 8px 0;
  padding: 18px 22px;
  animation: editRowIn .2s ease-out;
  box-shadow: 0 2px 12px rgba(99,97,206,.08);
}
@keyframes editRowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* 类型选择器（新增模式） */
.inline-type-chooser {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid #eef0f5;
}
.inline-type-label { font-size: 12.5px; font-weight: 600; color: #3a3e4e; white-space: nowrap; }
.inline-type-opt {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: #6b7280;
  cursor: pointer; transition: all .16s;
  border: 1.5px solid transparent; background: #fff;
}
.inline-type-opt:hover { background: #f3f4f9; color: #2a2d3a; }
.inline-type-opt.active {
  background: linear-gradient(135deg,#eef2ff,#f0f2ff); color: #4f46e5;
  border-color: #a5b4fc; font-weight: 600;
  box-shadow: 0 1px 4px rgba(99,97,206,.12);
}

/* 表单主体 */
.inline-form-body { display: flex; flex-direction: column; gap: 12px; }

/* 字段行 */
.inline-fields-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  align-items: flex-end;
}

/* 字段 */
.inline-field {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.inline-field > label {
  font-size: 11.5px; font-weight: 600; color: #6b7280;
  white-space: nowrap; letter-spacing: 0.2px;
}
.inline-input, .inline-select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  background: #fff; border: 1.5px solid #dde1ea; border-radius: 7px;
  font-size: 12.5px; color: #2a2d3a; font-family: inherit;
  outline: none; transition: all .16s; box-sizing: border-box;
}
.inline-select { cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%238890a4'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; padding-right: 24px;
}
.inline-input:hover, .inline-select:hover { border-color: #c0c6d8; }
.inline-input:focus, .inline-select:focus { border-color: #6361ce; box-shadow: 0 0 0 3px rgba(99,97,206,.08); }
.inline-select optgroup { font-weight: 700; color: #4a5068; }
.inline-select optgroup option { font-weight: 400; }

/* 字段宽度 */
.inline-field-model   { flex: 2; min-width: 180px; }
.inline-field-half    { flex: 1.2; min-width: 150px; }
.inline-field-short   { flex: 0.8; min-width: 100px; }

/* 高级参数折叠 */
.inline-adv-section { margin-top: 4px; }
.inline-adv-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: #6361ce; user-select: none; font-weight: 500; transition: color .15s;
}
.inline-adv-toggle:hover { color: #4a48c0; }
.inline-adv-toggle > i { font-size: 10px; transition: transform .25s cubic-bezier(.4,0,.2,1); width: 15px; text-align: center; }
.inline-adv-toggle > i.rotated { transform: rotate(90deg); }
.inline-adv-hint { margin-left: auto; color: #b0b5c8; font-size: 11px; }

.inline-adv-panel { display: none; margin-top: 10px; padding: 14px 16px;
  background: linear-gradient(135deg,#f7f8fc,#f3f4fa); border-radius: 8px;
  border: 1px solid #eef0f5;
}
.inline-adv-panel.show { display: block; }

.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; }
.adv-item label {
  display: block; font-size: 11px; color: #6b7280; margin-bottom: 3px; white-space: nowrap; font-weight: 500;
}
.adv-item input[type="number"] {
  width: 100%; height: 32px; box-sizing: border-box;
  border: 1.5px solid #dde1ea; border-radius: 6px;
  padding: 0 9px; font-size: 12px; background: #fff; outline: none; transition: all .14s;
}
.adv-item input:hover { border-color: #c0c6d8; }
.adv-item input:focus { border-color: #6361ce; box-shadow: 0 0 0 2.5px rgba(99,97,206,.09); }

/* 操作按钮栏 */
.inline-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef0f5;
}
.inline-actions-right { display: flex; gap: 8px; }

.btn-inline-save {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 18px; border: none; border-radius: 7px;
  background: linear-gradient(135deg, #6361ce, #5852e6); color: #fff;
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .18s; box-shadow: 0 2px 6px rgba(99,97,206,.25);
}
.btn-inline-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,97,206,.35); }
.btn-inline-cancel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border: 1.5px solid #dde1ea; border-radius: 7px;
  background: #fff; color: #6b7280; font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all .16s;
}
.btn-inline-cancel:hover { border-color: #c0c6d8; color: #2a2d3a; }
.btn-inline-delete {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 16px; border: 1.5px solid #f0c2c2; border-radius: 7px;
  background: #fff6f6; color: #dc2626; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .18s;
}
.btn-inline-delete:hover { background: #fee2e2; border-color: #fca5a5; transform: translateY(-1px); }

/* 状态标签 */
.col-status.key-ok,
.col-status.key-missing {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.col-status.key-ok { background: rgba(72,187,120,.1); color: #48bb78; }
.col-status.key-missing { background: rgba(245,158,11,.1); color: #d97706; }

/* 厂商标签 */
.provider-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.badge-doubao { background: #e8f5e9; color: #2e7d32; }
.badge-hunyuan { background: #fff3e0; color: #e65100; }
.badge-deepseek { background: #e3f2fd; color: #1565c0; }
.badge-openai { background: #fce4ec; color: #c62828; }
.badge-anthropic { background: #f3e5f5; color: #7b1fa2; }
.badge-google { background: #e8f5e9; color: #2e7d32; }
.badge-qwen { background: #fff3e0; color: #e65100; }
.badge-baidu { background: #e3f2fd; color: #1565c0; }
.badge-zhipu { background: #fce4ec; color: #ad1457; }
.badge-mistral { background: #ede7f6; color: #512da8; }
.badge-meta { background: #efebe9; color: #5d4037; }
.badge-stability { background: #e0f2f1; color: #00695c; }

/* 操作按钮（行内图标） */
.btn-row-edit,
.btn-row-delete,
.btn-row-test {
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all .16s ease;
  border: none;
  font-size: 11px;
  background: transparent;
}
.btn-row-edit { color: #6361ce; }
.btn-row-edit:hover { background: rgba(99,97,206,.14); }
.btn-row-delete { color: #f56565; }
.btn-row-delete:hover { background: rgba(245,101,101,.14); }
.btn-row-test { color: #48bb78; }
.btn-row-test:hover { background: rgba(72,187,120,.14); }

/* 编辑表单 - 弹窗模式 */
.model-modal-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15,17,29,.45); z-index: 10000;
  align-items: center; justify-content: center;
}
.model-modal-overlay.show { display: flex; }
.model-modal {
  width: 920px; max-width: 94vw;
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22), 0 8px 20px rgba(0,0,0,.12);
  overflow: hidden; animation: modalIn .25s cubic-bezier(.16,1,.3,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}
/* 弹窗主体内容区：统一内边距 */
.model-modal > #modalTypeChooser,
.model-modal > #modalImgForm,
.model-modal > #modalTxtForm {
  padding: 22px 28px;
}

.model-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; border-bottom: 1px solid #eef0f5;
  background: linear-gradient(180deg, rgba(99,97,206,.05) 0%, rgba(99,97,206,.01) 100%);
}
.model-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: #1a1d2e; display: flex; align-items: center; gap: 8px; letter-spacing: -0.2px; }
.model-modal-header h3 i { color: #6361ce; }
.model-modal-close {
  width: 30px; height: 30px; border: none; background: #f0f1f7;
  border-radius: 8px; font-size: 17px; cursor: pointer; color: #8890a4;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.model-modal-close:hover { background: #e4e6f0; color: #333; transform: rotate(90deg); }
.model-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-top: 1px solid #eef0f5;
  background: #fafbfe;
}
.model-modal-footer-right {
  display: flex; gap: 10px;
}
.btn-modal-delete {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border: 1px solid #f5c6c6; border-radius: 4px;
  background: #fff5f5; color: #e53e3e; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .15s ease;
}
.btn-modal-delete:hover {
  background: #fed7d7; border-color: #fc8181;
}

/* 弹窗内模型类型选择器 */
.modal-type-chooser {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 28px 18px;
  border-bottom: 1px solid #eef0f5;
  background: #fafbfe;
  font-size: 13px; color: #6b7280;
}
.modal-type-label { font-weight: 600; white-space: nowrap; color: #3a3e4e; }
.modal-type-radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #6b7280;
  cursor: pointer; transition: all .18s;
  border: 1.5px solid transparent; background: #fff;
}
.modal-type-radio:hover { background: #f3f4f9; color: #2a2d3a; }
.modal-type-radio.active {
  background: linear-gradient(135deg, #eef2ff, #f0f2ff); color: #4f46e5;
  border-color: #a5b4fc; font-weight: 600;
  box-shadow: 0 1px 4px rgba(99,97,206,.15);
}

/* 行内操作按钮 */
.btn-row-edit,
.btn-row-test {
  width: 26px; height: 26px;
  border: none; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 11px;
  transition: all .13s;
}
.btn-row-edit { background: #eef2ff; color: #4f46e5; }
.btn-row-edit:hover { background: #c7d2fe; }
.btn-row-test { background: #ecfdf5; color: #059669; }
.btn-row-test:hover { background: #a7f3d0; }
.col-test-na { color: #c8cad0; font-size: 12px; }

.model-modal-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-top: 1px solid #eef0f5;
  background: #fafbfe;
}
.model-modal-footer-right {
  display: flex; gap: 10px;
}
.btn-modal-delete {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border: 1.5px solid #f0c2c2; border-radius: 8px;
  background: #fff6f6; color: #dc2626; font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: all .18s ease;
}
.btn-modal-delete:hover {
  background: #fee2e2; border-color: #fca5a5;
  transform: translateY(-1px);
}

/* ========== 高级参数（可折叠）========== */
.adv-params-section { margin-top: 18px; border-top: 1.5px solid #eef0f5; padding-top: 16px; }
.adv-params-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; color: #6361ce; user-select: none;
  transition: color .15s; font-weight: 500;
}
.adv-params-toggle:hover { color: #4a48c0; }
.adv-params-toggle > i { font-size: 10px; transition: transform .25s cubic-bezier(.4,0,.2,1); width: 16px; text-align: center; }
.adv-params-hint { margin-left: auto; color: #b0b5c8; font-size: 11.5px; }

.adv-params-panel { display: none; margin-top: 14px; padding: 16px 18px; background: linear-gradient(135deg,#f7f8fc,#f3f4fa); border-radius: 10px; border: 1px solid #eef0f5; }
.adv-params-panel.show { display: block; }

.adv-params-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px;
}
.adv-param-item label {
  display: block; font-size: 11.5px; color: #6b7280; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
}
.adv-param-item input[type="number"] {
  width: 100%; height: 34px; box-sizing: border-box; border: 1.5px solid #dde1ea; border-radius: 7px;
  padding: 0 10px; font-size: 12.5px; background: #fff; outline: none; transition: all .15s;
}
.adv-param-item input[type="number"]:hover { border-color: #c0c6d8; }
.adv-param-item input[type="number"]:focus { border-color: #6361ce; box-shadow: 0 0 0 2.5px rgba(99,97,206,.10); }

/* ========== 功能模型分配面板样式 ========== */
.features-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* ★ 统一5列：图标 | 功能 | 提示词 | 模型 | 状态 */
.feature-header-row,
.feature-row-content {
  display: grid;
  grid-template-columns: 28px 70px 1fr 20px 220px 22px;
  gap: 10px;
  align-items: center;
}
.feature-header-row {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #8b92a5;
  border-bottom: 1px solid #e8eaf0;
}
.feature-header-icon  { text-align:center; }
.feature-header-label { }
.feature-header-prompt { text-align:left; }
.feature-header-model { }
.feature-header-status { text-align:center; }

.feature-row {
  padding: 8px 10px;
  border-radius: 4px;
  background: #fff;
  transition: background .15s ease;
  font-size: 12px;
}
.feature-row:hover {
  background: #f7f8fb;
}

/* 单行：图标 + 功能 + 提示词textarea + 模型 + 状态 */
.feature-row-content > .feat-col-icon    { grid-column: 1; }
.feature-row-content > .feat-col-label   { grid-column: 2; }
.feature-row-content > .feat-col-prompt-area { grid-column: 3; }
.feature-row-content > .feat-col-model   { grid-column: 5; }
.feature-row-content > .feat-col-status  { grid-column: 6; }

.feat-col-icon {
  text-align:center;
  font-size:12px; color:#8b87f5;
}
.feature-row.type-text .feat-col-icon { color:#10b981; }
.feat-col-label {
  font-size:12px; font-weight:600; color:#2a2d3a;
  white-space: nowrap;
}
.feat-col-model select {
  width:100%;
  padding:4px 24px 4px 8px;
  border-radius:4px; border:1px solid #dde0ea; background:#f8f9fc;
  font-size:12.5px; color:#2a2d3a; cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23949eb2' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:12px;
  transition:border-color .15s;
}
.feat-col-model select:focus { border-color:#6361ce; }
.feat-col-model select:disabled { opacity:.5; cursor:not-allowed; }
.feat-col-status { text-align:center; font-size:11px; }
.feat-price-input {
  width: 58px;
  padding: 3px 5px;
  border: 1px solid #dde0ea;
  border-radius: 4px;
  background: #f8f9fc;
  font-size: 12px;
  color: #2a2d3a;
  text-align: center;
  outline: none;
  transition: border-color .15s;
}
.feat-price-input:focus { border-color: #6361ce; }
.feat-price-input:disabled { opacity: .4; cursor: not-allowed; background: #eef0f5; }

.feat-col-prompt-area {
  display: flex;
  align-items: center;
  gap: 6px;
}
.feat-col-prompt-area textarea {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  background: #f8f9fc;
  border: 1px solid #e2e6ef;
  border-radius: 4px;
  font-size: 12px;
  color: #555b70;
  outline: none;
  box-sizing: border-box;
  resize: none;
  font-family: inherit;
  line-height: 1.4;
  height: 34px;
  transition: border-color .15s, box-shadow .15s;
}
.feat-col-prompt-area textarea:focus {
  border-color: #6361ce;
  box-shadow: 0 0 0 2px rgba(99,97,206,.08);
  background: #fff;
  height: auto;
  min-height: 60px;
}
.feat-col-prompt-area textarea::placeholder {
  color: #b0b8c9;
  font-size: 11px;
}
.feat-prompt-hint {
  font-size: 10px;
  color: #8b92a5;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 8px;
}
.feat-prompt-custom {
  color: #6361ce;
  font-weight: 600;
}

.feat-col-icon {
  width: 28px; min-width:28px; flex-shrink:0; text-align:center;
  font-size:12px; color:#8b87f5;
}
.feature-row.type-text .feat-col-icon { color:#10b981; }

.feat-col-label {
  width:80px; min-width:80px; flex-shrink:0;
  font-size:12px; font-weight:600; color:#2a2d3a;
}

.feat-col-model select {
  width:100%;
  padding:4px 24px 4px 8px;
  border-radius:4px; border:1px solid #dde0ea; background:#f8f9fc;
  font-size:12.5px; color:#2a2d3a; cursor:pointer; outline:none;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23949eb2' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:12px;
  transition:border-color .15s;
}
.feat-col-model select:focus { border-color:#6361ce; }
.feat-col-model select:disabled { opacity:.5; cursor:not-allowed; }

.feat-status { display:inline-block; }
.feat-ok    { color:#10b981; }
.feat-inherit{ color:#f59e0b; }
.feat-warn   { color:#ef4444; }
.feat-none   { color:#c8cad0; }

/* 底部操作栏 */
.settings-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #e8eaf0;
  background: rgba(242,244,250,.7);
  flex-shrink: 0;
}

/* ========== 数据安全面板样式（浅色）========== */
.sec-overview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(99,97,206,.06);
  border: 1px solid rgba(99,97,206,.15);
  border-radius: 10px;
  margin-bottom: 4px;
}
.sec-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6361ce;
  white-space: nowrap;
}
.sec-status-badge i { font-size: 14px; }
.sec-status-desc {
  font-size: 12px;
  color: #8890a4;
}

/* 存储用量条 */
.sec-storage-bar {
  position: relative;
  height: 24px;
  background: #eceef4;
  border: 1px solid #dde0ea;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.sec-storage-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #7c78ea, #a78bfa);
  border-radius: 5px;
  transition: width .5s ease;
}
.sec-storage-fill.warning { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.sec-storage-fill.danger { background: linear-gradient(90deg, #ef4444, #f87171); }
.sec-storage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9.5px;
  font-weight: 600;
  color: #3a3e4e;
  white-space: nowrap;
}

/* 健康度网格 */
.sec-health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.sec-health-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  font-size: 12.5px;
}
.sec-health-icon {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 11px;
  flex-shrink: 0;
}
.sec-health-icon.ok { background: rgba(34,197,94,.12); color: #16a34a; }
.sec-health-icon.warn { background: rgba(245,158,11,.12); color: #d97706; }
.sec-health-icon.err { background: rgba(239,68,68,.12); color: #dc2626; }
.sec-health-name { color: #555b70; flex: 1; min-width: 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sec-health-size { color: #8890a4; font-size: 11px; flex-shrink: 0; }

/* 操作按钮组 */
.sec-action-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.sec-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .2s;
  border: 1px solid transparent;
  white-space: nowrap;
  font-family: inherit;
}
.sec-btn i { font-size: 12px; }
.sec-btn-primary { background: #6361ce; color: #fff; border-color: #6361ce; }
.sec-btn-primary:hover { background: #5553b8; border-color: #5553b8; }
.sec-btn-secondary { background: #eceef4; color: #555b70; border-color: #dde0ea; }
.sec-btn-secondary:hover { background: #dde0ea; color: #2a2d3a; }
.sec-btn-outline { background: transparent; color: #6361ce; border-color: rgba(99,97,206,.25); }
.sec-btn-outline:hover { background: rgba(99,97,206,.06); }
.sec-btn-warning { background: rgba(245,158,11,.1); color: #f59e0b; border-color: rgba(245,158,11,.25); }
.sec-btn-warning:hover { background: rgba(245,158,11,.18); }
.sec-btn-danger { background: rgba(239,68,68,.08); color: #f87171; border-color: rgba(239,68,68,.25); }
.sec-btn-danger:hover { background: rgba(239,68,68,.15); }

/* 诊断结果 */
.sec-diag-result {
  margin-top: 10px;
  padding: 12px 14px;
  background: #f0f1f6;
  border: 1px solid #e2e4ec;
  border-radius: 8px;
  font-size: 12.5px;
  color: #555b70;
  line-height: 1.7;
  max-height: 200px;
  overflow-y: auto;
}
.sec-diag-result pre {
  margin: 0;
  font-family: 'SF Mono', Monaco, Consolas, monospace;
  font-size: 11.5px;
  color: #3a3e4e;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 备份列表 */
.sec-backup-list { margin-top: 8px; }
.sec-backup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f7f8fb;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12.5px;
  transition: background .15s;
}
.sec-backup-item:hover { background: #eef0f6; }
.sec-backup-name {
  font-weight: 600;
  color: #2a2d3a;
  flex: 1;
  min-width: 0;
}
.sec-backup-time { color: #8890a4; font-size: 11px; flex-shrink: 0; }
.sec-backup-size { color: #8890a4; font-size: 11px; flex-shrink: 0; }
.sec-backup-del {
  color: #f87171;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background .15s;
  flex-shrink: 0;
}
.sec-backup-del:hover { background: rgba(239,68,68,.1); }
.sec-backup-empty { color: #8890a4; font-size: 12px; padding: 12px 0; }

/* 危险区域 */
.sec-danger-zone {
  margin-top: 4px;
  padding: 14px 16px;
  background: rgba(239,68,68,.03);
  border: 1px solid rgba(239,68,68,.1);
  border-radius: 10px;
}
.sec-danger-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #dc2626;
  margin-bottom: 10px;
}

/* ==========================================
   场景A：图像处理工具面板
   换背景 / 局部重绘 / 移除物体 / 超分 / 增强抠图
   ========================================== */

/* 图像处理下拉菜单（工具栏内） */
.imgproc-dropdown { position: relative; display: inline-block; flex-shrink: 0; }
.imgproc-trigger {
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: 1px solid #3a3e4d !important;
  border-radius: 4px !important;
  padding: 0 !important;
  font-size: 12px;
  transition: all .2s;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.imgproc-trigger:hover {
  border-color: #8b87f5; color: #8b87f5;
}
.imgproc-menu {
  display: none !important; position: absolute; top: 100%; right: 0;
  z-index: 200; min-width: 200px;
  background: #fff; border: 1.5px solid #e2e5f0;
  border-radius: 12px; box-shadow: 0 8px 32px rgba(26,27,46,0.15);
  padding: 6px 0; margin-top: 4px;
  animation: imgprocFadeIn .18s ease;
}
@keyframes imgprocFadeIn { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.imgproc-dropdown.open .imgproc-menu { display: block !important; }

.imgproc-group-title {
  padding: 8px 14px 4px; font-size: 11px; font-weight: 700;
  color: #8b87f5; text-transform: uppercase; letter-spacing: .5px;
}
.imgproc-sep { height: 1px; background: #eef0f6; margin: 4px 10px; }
.imgproc-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 16px; border: none; background: none;
  cursor: pointer; font-size: 13px; color: #374151;
  text-align: left; transition: all .15s;
}
.imgproc-item:hover { background: linear-gradient(90deg, rgba(139,135,245,.08), transparent); color: #6366f1; }
.imgproc-item i { width: 16px; text-align: center; font-size: 12px; color: #8b87f5; }
.imgproc-item i.fa-search-plus { color: #06b6d4; }
.imgproc-item i.fa-scissors { color: #f59e0b; }
.imgproc-item i.fa-ban { color: #ef4444; }
.imgproc-item i.fa-band-aid { color: #10b981; }

/* 增强抠图子菜单（多平台选择） */
.imgproc-item.has-sub { position: relative; }
.imgproc-item.has-sub .sub-arrow { margin-left: auto; font-size: 10px; color: #6b7280; transition: transform .15s; }
.imgproc-item.has-sub:hover .sub-arrow { transform: translateX(2px); }
.imgproc-submenu {
  display: none; position: absolute; left: 100%; top: -4px; min-width: 180px;
  background: #1e1e2e; border: 1px solid rgba(139,135,245,0.25); border-radius: 8px;
  padding: 4px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.imgproc-item.has-sub:hover > .imgproc-submenu,
.imgproc-item.has-sub.active > .imgproc-submenu { display: block; }
.imgproc-sub-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
  background: none; border: none; border-radius: 6px; color: #d1d5db;
  font-size: 12px; cursor: pointer; text-align: left; transition: all .15s; white-space: nowrap;
}
.imgproc-sub-item:hover { background: rgba(139,135,245,0.12); color: #e2e5f0; }
.imgproc-sub-item i { width: 14px; text-align: center; font-size: 11px; }
.imgproc-sub-item[data-provider="baidu"] i { color: #2932E1; }
.imgproc-sub-item[data-provider="volcengine"] i { color: #FF7D00; }
.imgproc-sub-item[data-provider="tencent"] i { color: #006EFF; }
.imgproc-sub-item[data-provider="alibaba"] i { color: #FF6A00; }
.imgproc-sub-item[data-provider="builtin"] i { color: #8b87f5; }
.imgproc-sub-item .config-trigger {
  margin-left: auto; color: #6b7280; font-size: 10px; padding: 2px 4px;
  border-radius: 4px; cursor: pointer; transition: color .15s;
}
.imgproc-sub-item .config-trigger:hover { color: #8b87f5; }

/* 抠图平台内联编辑面板（在 model-edit-row 内使用） */
.cutout-edit-row { margin-bottom: 12px; }
.cutout-edit-row label {
  display: block; font-size: 11px; color: #9ca3af; margin-bottom: 4px; font-weight: 400;
}
.cutout-edit-row input {
  width: 100%; padding: 8px 12px; background: #ffffff; border: 1px solid #dde0ea;
  border-radius: 8px; color: #2a2d3a; font-size: 13px; outline: none;
  transition: border-color .15s; box-sizing: border-box;
}
.cutout-edit-row input:focus { border-color: rgba(139,135,245,0.5); }
.cutout-edit-info {
  margin-top: 10px; padding: 10px 14px; background: rgba(139,135,245,0.06);
  border-radius: 8px; font-size: 11px; color: #9ca3af; line-height: 1.6;
}
.cutout-edit-info strong { color: #d1d5db; }
.cutout-edit-info a { color: #8b87f5; text-decoration: none; }
.cutout-edit-info a:hover { text-decoration: underline; }
.cutout-edit-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px;
}
.btn-cp-save {
  padding: 7px 20px; background: #6366f1; color: white; border: none;
  border-radius: 8px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.btn-cp-save:hover { background: #5558e6; }
.btn-cp-cancel {
  padding: 7px 20px; background: rgba(255,255,255,0.08); color: #d1d5db; border: none;
  border-radius: 8px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.btn-cp-cancel:hover { background: rgba(255,255,255,0.12); }

/* 抠图平台配置弹窗 — 已废弃，保留兼容 */
#cutoutConfigModal .modal-box {
  background: #1e1e2e; border: 1px solid rgba(139,135,245,0.25);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#cutoutConfigModal .modal-header h3 { color: #e2e5f0; font-size: 15px; font-weight: 500; }
#cutoutConfigModal .modal-close { color: #9ca3af; }
#cutoutConfigModal .modal-body { padding: 20px 24px; }
.cutout-config-row {
  margin-bottom: 16px;
}
.cutout-config-row label {
  display: block; font-size: 12px; color: #9ca3af; margin-bottom: 4px; font-weight: 400;
}
.cutout-config-row input {
  width: 100%; padding: 8px 12px; background: #12121a; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; color: #e2e5f0; font-size: 13px; outline: none; transition: border-color .15s;
  box-sizing: border-box;
}
.cutout-config-row input:focus { border-color: rgba(139,135,245,0.5); }
.cutout-config-info {
  margin-top: 12px; padding: 10px 14px; background: rgba(139,135,245,0.08);
  border-radius: 8px; font-size: 12px; color: #9ca3af; line-height: 1.6;
}
.cutout-config-info strong { color: #d1d5db; }
.cutout-config-info a { color: #8b87f5; text-decoration: none; }
.cutout-config-info a:hover { text-decoration: underline; }
#cutoutConfigModal .modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.btn-primary {
  padding: 7px 20px; background: #6366f1; color: white; border: none; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: #5558e6; }
.btn-secondary {
  padding: 7px 20px; background: rgba(255,255,255,0.08); color: #d1d5db; border: none;
  border-radius: 8px; font-size: 13px; cursor: pointer; transition: background .15s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* 区域编辑控制面板 */
.regionedit-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 25;
  background: linear-gradient(180deg, rgba(30,30,46,0) 0%, rgba(30,30,46,0.96) 20%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(139,135,245,0.25);
  border-radius: 0 0 12px 12px; padding: 10px 16px 12px;
  animation: reSlideUp .22s ease;
}
@keyframes reSlideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
.re-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.re-title { font-size: 13px; font-weight: 700; color: #e2e5f0; }
.re-close-btn {
  background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 6px;
  color: #9ca3af; cursor: pointer; padding: 3px 8px; font-size: 12px;
  transition: all .15s;
}
.re-close-btn:hover { background: rgba(239,68,68,.2); color: #ef4444; border-color: rgba(239,68,68,.35); }

.re-body { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.re-row { display: flex; align-items: center; gap: 8px; }
.re-row label {
  font-size: 11px; color: #9ca3af; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.re-row label i { font-size: 11px; color: #8b87f5; }
.re-slider { width: 100px; accent-color: #8b87f5; }
.re-size-val { font-size: 12px; font-weight: 600; color: #d1d5db; min-width: 24px; text-align: center; }

.re-prompt-row { width: 100%; margin-top: 4px; }
.re-prompt-input {
  flex: 1; min-width: 240px; max-width: 380px;
  padding: 6px 12px; border: 1px solid rgba(139,135,245,.35);
  border-radius: 7px; background: rgba(0,0,0,.25); color: #e2e5f0;
  font-size: 12px; outline: none; transition: all .15s;
}
.re-prompt-input:focus { border-color: #8b87f5; box-shadow: 0 0 0 3px rgba(139,135,245,.15); }
.re-prompt-input::placeholder { color: #555; }

.re-actions { display: flex; gap: 8px; margin-left: auto; }
.re-btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px;
  border: none; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .18s; white-space: nowrap;
}
.re-btn-apply {
  background: linear-gradient(135deg,#8b87f5,#a78bfa); color: #fff;
  box-shadow: 0 2px 8px rgba(139,135,245,.3);
}
.re-btn-apply:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(139,135,245,.4); }
.re-btn-clear {
  background: rgba(255,255,255,.08); color: #9ca3af; border: 1px solid rgba(255,255,255,.12);
}
.re-btn-clear:hover { background: rgba(255,255,255,.14); color: #e2e5f0; }

.re-hint {
  width: 100%; font-size: 11px; color: #666; margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}

/* 区域选择Canvas层 */
.regionedit-canvas-layer {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 24; pointer-events: none;
  transition: opacity .2s;
}
.regionedit-canvas-layer.active { pointer-events: auto; cursor: crosshair; }
.regionedit-canvas-layer canvas { width: 100%; height: 100%; }

/* 区域编辑光标预览 */
.regionedit-cursor {
  position: fixed; pointer-events: none; z-index: 9999; border-radius: 50%;
  border: 2px solid #8b87f5; background: rgba(139,135,245,.15);
  display: none; transform: translate(-50%,-50%);
  transition: width .1s,height .1s;
}

/* 超分进度提示 */
.superres-toast {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%);
  z-index: 50; background: rgba(26,27,46,.92); backdrop-filter: blur(12px);
  border: 1px solid rgba(139,135,245,.3); border-radius: 14px;
  padding: 28px 36px; text-align: center; color: #e2e5f0; animation: superresPop .3s ease;
}
@keyframes superresPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.9)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.superres-toast i { font-size: 32px; color: #8b87f5; margin-bottom: 10px; display: block; }
.superres-toast p { font-size: 15px; font-weight: 600; margin: 6px 0 2px; }
.superres-toast span { font-size: 12px; color: #9ca3af; }

/* ===== 操作目标图片高亮（虚线流动框 marching ants） ===== */
.marching-ants-svg {
  pointer-events: none;
  z-index: 999;
  overflow: visible;
}
@keyframes dashMove {
  to { stroke-dashoffset: -13; }
}
/* 处理中标签 */
.processing-badge {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  padding: 1px 8px;
  border-radius: 8px;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  animation: badgePulse 1s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ==================== 工具栏分组 ==================== */
.tb-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  padding: 2px 4px;
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
}
.tb-group-end { margin-left: auto; }
/* 工具栏按钮 hover 时显示快捷键提示 */
.icon-btn[data-kbd]:hover::after,
.zoom-btn[data-kbd]:hover::after,
.imgproc-trigger[data-kbd]:hover::after,
.export-trigger[data-kbd]:hover::after {
  content: attr(data-kbd);
  position: absolute; top: 110%; left: 50%; transform: translateX(-50%);
  background: #1a1c24; color: #8b87f5; font-size: 10px; font-weight: 600;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
  border: 1px solid #3a3e4d; z-index: 999; pointer-events: none;
}
/* 已关闭的快捷键不显示 hover 提示 */
.icon-btn[data-kbd-hidden]:hover::after,
.zoom-btn[data-kbd-hidden]:hover::after,
.imgproc-trigger[data-kbd-hidden]:hover::after,
.export-trigger[data-kbd-hidden]:hover::after {
  display: none;
}
.icon-btn[data-kbd], .zoom-btn[data-kbd], .imgproc-trigger[data-kbd], .export-trigger[data-kbd] {
  position: relative;
}

/* ==================== 加载预计剩余时间 ==================== */
.loading-text-row {
  display: flex; align-items: center; justify-content: center; gap: 0; line-height: 1;
}
.loading-eta {
  font-size: 11px; color: #6b7085; white-space: nowrap; letter-spacing: .3px;
  min-height: 16px; margin: 0; margin-left: 8px; display: inline; vertical-align: middle;
}

/* ==================== 快捷键设置面板 ==================== */
.shortcut-settings-list {
  display: flex; flex-direction: column; gap: 2px;
}
.shortcut-setting-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.shortcut-setting-row:hover { background: #f5f6fa; }
.shortcut-setting-key kbd {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; background: #eef0f6;
  border: 1px solid #d1d5e4; border-bottom-width: 2px;
  border-radius: 6px; font-size: 13px; font-weight: 700;
  font-family: 'SF Mono', 'Fira Code', monospace; color: #374151;
}
.shortcut-setting-label {
  flex: 1; font-size: 13px; color: #374151;
}
.toggle-switch {
  position: relative; width: 38px; height: 20px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #d1d5e4;
  border-radius: 10px; cursor: pointer; transition: all .2s;
}
.toggle-slider::before {
  content: ''; position: absolute; width: 16px; height: 16px;
  left: 2px; bottom: 2px; background: #fff;
  border-radius: 50%; transition: all .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.toggle-switch input:checked + .toggle-slider { background: #8b87f5; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ==================== 历史面板 ==================== */
.history-panel {
  position: fixed; top: 0; right: -340px; width: 320px; height: 100%;
  background: #1a1c24; border-left: 1px solid #2a2d38;
  z-index: 1000; transition: right .28s ease;
  display: flex; flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,.4);
}
.history-panel.open { right: 0; }
.history-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #2a2d38;
  font-size: 14px; font-weight: 600; color: #c7cad4;
}
.history-panel-actions { display: flex; gap: 4px; align-items: center; }
.history-panel-actions .icon-btn:hover { border-color: #8b87f5; color: #8b87f5; }
.history-close-btn {
  width: 24px; height: 24px; border: none; background: transparent;
  color: #6b7085; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; border-radius: 4px;
  transition: all .15s;
}
.history-close-btn:hover { color: #e2e5f0; background: #34384a; }
.history-list {
  flex: 1; overflow-y: auto; padding: 8px;
  scrollbar-width: thin; scrollbar-color: #3a3e4d transparent;
}
.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.history-empty {
  text-align: center; color: #6b6f7d; font-size: 13px;
  padding: 40px 20px; line-height: 1.8;
}
.history-empty i { font-size: 32px; margin-bottom: 8px; color: #3a3e4d; display: block; }
.history-item {
  display: flex; gap: 10px; padding: 8px; border-radius: 6px;
  cursor: pointer; transition: background .15s; margin-bottom: 4px;
}
.history-item:hover { background: rgba(139,135,245,.08); }
.history-item-img {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 4px;
  overflow: hidden; background: #23252e;
}
.history-item-img img { width: 100%; height: 100%; object-fit: cover; }
.history-item-info { flex: 1; min-width: 0; }
.history-item-name { font-size: 12px; color: #c7cad4; font-weight: 500; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-time { font-size: 10px; color: #5a5e72; margin-bottom: 2px; }
.history-item-type { font-size: 10px; padding: 1px 6px; border-radius: 3px; background: #252836; color: #6b7085; }
.history-item-type.compose { color: #8b87f5; background: rgba(139,135,245,.12); }
.history-item-type.cutout { color: #06b6d4; background: rgba(6,182,212,.12); }
.history-item-type.edit { color: #f59e0b; background: rgba(245,158,11,.12); }
.history-panel-footer {
  padding: 10px 14px; border-top: 1px solid #2a2d38;
  display: flex; justify-content: center;
}
.history-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.35); z-index: 999;
}

/* ==================== 键盘快捷键面板 ==================== */
.shortcut-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5); z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: shortcutFadeIn .2s ease;
}
@keyframes shortcutFadeIn { from { opacity: 0; } to { opacity: 1; } }
.shortcut-panel {
  width: 420px; max-width: 92vw; max-height: 80vh;
  background: #1a1c24; border: 1px solid #2a2d38;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.shortcut-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #2a2d38;
  font-size: 14px; font-weight: 600; color: #c7cad4;
}
.shortcut-header i { color: #8b87f5; margin-right: 6px; }
.shortcut-close {
  width: 28px; height: 28px; border: none; background: transparent;
  color: #6b7085; cursor: pointer; font-size: 14px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.shortcut-close:hover { color: #e2e5f0; background: #34384a; }
.shortcut-body {
  flex: 1; overflow-y: auto; padding: 12px 18px 18px;
  scrollbar-width: thin; scrollbar-color: #3a3e4d transparent;
}
.shortcut-body::-webkit-scrollbar { width: 4px; }
.shortcut-body::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
.shortcut-section { margin-bottom: 14px; }
.shortcut-section:last-child { margin-bottom: 0; }
.shortcut-section-title {
  font-size: 11px; font-weight: 600; color: #5a5e72;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid #252836;
}
.shortcut-row {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 0; font-size: 12px;
}
.shortcut-row span { color: #6b7085; font-size: 12px; }
.shortcut-row .shortcut-desc { color: #9ca0b5; margin-left: 8px; font-size: 12px; }
.shortcut-row kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px; padding: 0 6px;
  background: #252836; border: 1px solid #3a3e4d; border-radius: 4px;
  color: #c7cad4; font-size: 11px; font-weight: 600;
  font-family: inherit; box-shadow: 0 1px 0 #1a1c24;
}

/* ================================================================
   批量配对矩阵面板 — 按草图布局：左侧缩略图条保留 | 右侧N×2配对网格
   ================================================================ */

/* 面板容器 — 占据整个 studio-mid */
.batch-panel {
  display: none;
  flex-direction: row !important;
  height: 100%;
  min-height: 400px;
  background: #1e1f26;
  border-radius: 8px;
  overflow: hidden;
}
.batch-panel.active {
  display: flex !important;
}

/* ====== 左侧边栏：产品图 + 背景图缩略图条（已禁用/隐藏） ====== */
.batch-left-sidebar {
  display: none;
}
.batch-ls-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid #2a2d38;
  padding-bottom: 8px;
}
.batch-ls-section:last-child { border-bottom: none; }
.batch-ls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 6px 3px;
  color: #9aa0b0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: #22252f;
  border-bottom: 1px solid #2a2d38;
}
.batch-ai-rec-btn {
  padding: 1px 6px; font-size: 9px; color: #8b87f5;
  background: rgba(139,135,245,0.12);
  border: 1px solid rgba(139,135,245,0.25);
  border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.batch-ai-rec-btn:hover {
  background: rgba(139,135,245,0.22);
  box-shadow: 0 1px 4px rgba(139,135,245,0.15);
}
#batchFurnList, #batchBgList {
  padding: 6px 5px;
  display: flex; flex-direction: column; gap: 5px;
  overflow-y: auto; overflow-x: hidden;
  flex: 1; min-height: 0;
}
#batchFurnList::-webkit-scrollbar,
#batchBgList::-webkit-scrollbar { width: 3px; }
#batchFurnList::-webkit-scrollbar-thumb,
#batchBgList::-webkit-scrollbar-thumb { background: #3a3e4d; border-radius: 2px; }
#batchFurnList .thumbs-strip-item,
#batchBgList .bg-thumb-item {
  width: 66px;
  flex-shrink: 0;
}
#batchFurnList .thumbs-strip-item {
  height: 52px;
}
#batchBgList .bg-thumb-item {
  height: 62px;
}
#batchFurnList .thumbs-strip-item,
#batchBgList .bg-thumb-item {
  cursor: pointer; border-radius: 7px; overflow: hidden;
  border: 2px solid transparent; transition: all 0.15s;
  position: relative; background: #16171d;
}
#batchFurnList .thumbs-strip-item:hover,
#batchBgList .bg-thumb-item:hover {
  transform: scale(1.03); border-color: #555870;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
#batchFurnList .thumbs-strip-item.selected,
#batchBgList .bg-thumb-item.selected {
  border-color: #8b87f5;
  box-shadow: 0 0 0 2px rgba(139,135,245,0.25);
}
#batchFurnList .thumbs-strip-item img,
#batchBgList .bg-thumb-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; pointer-events: none;
}

/* ====== 右侧主区域 ====== */
.batch-main-area {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.batch-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: #252836;
  border-bottom: 1px solid #32363e; flex-shrink: 0;
}
.batch-toolbar .btn-group-left { display: flex; gap: 4px; }
.batch-toolbar .btn-group-right { display: flex; gap: 4px; }
/* 视图切换按钮 */
#batchViewBtn {
  color: #8b87f5;
}
#batchViewBtn:hover {
  background: rgba(139,135,245,0.15);
}
/* 分类筛选 */
.batch-filter {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 7px 10px; border-bottom: 1px solid #2a2d38;
  flex-shrink: 0; background: #23252f;
}
.batch-filter .mini-tag {
  padding: 3px 10px; font-size: 10.5px; cursor: pointer;
  border-radius: 10px; background: #2a2d38; color: #9aa0b0;
  transition: all 0.15s; border: 1px solid transparent;
}
.batch-filter .mini-tag:hover { background: #363a4a; color: #c7cad4; }
.batch-filter .mini-tag.active {
  background: linear-gradient(135deg,#8b87f5,#7c78e8); color: #fff;
  box-shadow: 0 2px 6px rgba(139,135,245,0.25);
}

/* ====== N×2 配对网格（核心） ====== */
.batch-grid {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 10px 20px 10px 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  align-content: start; min-height: 0;
}
/* 行包装器 - 每行占满两列 */
.batch-row-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 4px 2px 0;
  position: relative;
}
/* 行内元素：序号（小图模式→产品图框左边居中；大图模式→框内左上角） + 状态点 + 实物框 + 背景框 + 删除 */
.batch-row-num {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%; background: rgba(26,28,35,0.85);
  color: #9aa0b0; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  border: 1.5px solid #444861;
  pointer-events: none;
}
.row-status-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background 0.2s;
}
.batch-row-wrap.running .row-status-dot { background: #4a90d9; animation: bpPulse 1s infinite; }
.batch-row-wrap.done .row-status-dot { background: #34d399; }
.batch-row-wrap.error .row-status-dot { background: #f87171; }

/* 产品图与背景图之间的加号 */
.batch-row-plus {
  flex-shrink: 0;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555a78;
  font-size: 12px;
}
@keyframes bpPulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.35; }
}
/* 选择器框 */
.batch-picker-box {
  flex: 1 1 0%; min-width: 0;
  height: 92px;
  border: 2px dashed #444861; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background-color 0.18s, border-color 0.18s;
  position: relative; overflow: hidden; background: #181a22;
  box-sizing: border-box;
}
/* 确保两个框始终等宽，不随内容变化 */
.batch-picker-box:hover {
  border-color: #8b87f5; background: #1c1e28;
}
.batch-picker-box.filled {
  border-style: solid; border-color: #45485c;
  padding: 3px; background: #15161e;
}
.batch-picker-box.filled:hover { border-color: #8b87f5; }

/* ===== 批量模式：锁定状态（虚线框 + 可点击解锁徽标） ===== */
.batch-picker-box.batch-locked {
  border: 2px dashed #8b87f5 !important;
  background: rgba(139,135,245,0.08) !important;
  overflow: visible !important;
}
.batch-lock-badge {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 3px 9px !important;
  background: linear-gradient(135deg, #7c6ff0, #5b4ce0) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 5px 0 5px 0 !important;
  pointer-events: auto !important; /* ★ 徽标可点击 */
  cursor: pointer !important;
  box-shadow: 0 2px 12px rgba(107,92,232,0.55) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  letter-spacing: 0.5px !important;
  transition: opacity 0.15s, transform 0.1s !important;
}
.batch-lock-badge:hover { opacity: 0.85 !important; transform: scale(1.03) !important; }

/* ===== 批量模式：拖拽视觉反馈 ===== */
.batch-picker-box[draggable="true"] { cursor: grab; }
.batch-picker-box[draggable="true"]:active { cursor: grabbing; }
.batch-picker-box.batch-dragging {
  opacity: 0.4; transform: scale(0.96);
  border-color: #8b87f5 !important;
}
.batch-picker-box.batch-drop-target {
  border: 2px solid #22c55e !important;
  box-shadow: 0 0 12px rgba(34,197,94,0.35), inset 0 0 20px rgba(34,197,94,0.08);
  transform: scale(1.02);
}

.batch-picker-box img {
  max-width: 100%; max-height: 84px;
  object-fit: contain; border-radius: 4px;
  display: block; margin: 0 auto;
}
.batch-picker-box .bp-placeholder {
  color: #565a70; font-size: 11.5px;
  text-align: center; pointer-events: none; user-select: none;
}
.bp-placeholder i { display: block; font-size: 20px; margin-bottom: 3px; opacity: 0.35; }
.batch-picker-box .bp-remove {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(240,60,60,0.88); color: #fff;
  border: none; font-size: 11px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  z-index: 2;
}
.batch-picker-box.filled:hover .bp-remove { display: flex; }
/* ★ 行选择按钮 — 圆形勾选（与序号徽标同尺寸 22px） */
.batch-row-sel-btn {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #555a70;
  background: #1e2030;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  position: relative;
  /* ✓ 勾选标记（默认透明，选中后显示） */
}
.batch-row-sel-btn::after {
  content: '\2713';
  font-size: 13px; font-weight: 900;
  color: transparent;
  text-shadow: none;
  transition: color .15s;
}
/* 未配对时：半透明但可见（不隐藏） */
.batch-row-sel-btn.sel-disabled {
  opacity: 0.25;
  cursor: not-allowed;
  border-color: #3a3e4d;
}
/* hover（未选中+可点击） */
.batch-row-sel-btn:hover:not(.sel-disabled):not(.sel-active) {
  border-color: #8b87f5;
  background: rgba(139,135,245,0.12);
}
/* 已选中态：深紫底 + 白色 ✓ */
.batch-row-sel-btn.sel-active {
  border-color: #7c6ff0;
  background: linear-gradient(135deg,#7c6ff0,#6b5ce8);
  box-shadow: 0 2px 10px rgba(124,111,240,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.batch-row-sel-btn.sel-active::after {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 行被选中时的整体高亮 */
.batch-row-wrap.row-selected .batch-picker-box {
  border-color: rgba(139,135,245,0.7) !important;
  box-shadow: 0 0 0 1px rgba(139,135,245,0.3), 0 0 8px rgba(139,135,245,0.2) !important;
}
/* 行状态样式 */
.batch-row-wrap.running { opacity: 0.85; }
.batch-row-wrap.done .batch-picker-box { border-color: rgba(52,211,153,0.35); }
.batch-row-wrap.error .batch-picker-box { border-color: rgba(248,113,113,0.35); }

/* 底部操作栏 */
.batch-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid #32363e;
  background: #252836; flex-shrink: 0;
}
.batch-count { color: #8b90a0; font-size: 12px; }
/* ★ P1-7: 全选/清空控制链接 */
.batch-sel-ctrl { font-size: 11.5px; margin-left: 10px; color: #6b6f7d; }
.batch-sel-ctrl a { color: #8b87f5; text-decoration: none; cursor: pointer; }
.batch-sel-ctrl a:hover { color: #a5a1ff; text-decoration: underline; }
.batch-execute-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 22px;
  background: linear-gradient(135deg,#8b87f5,#7c78e8);
  border: none; border-radius: 8px; color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.batch-execute-btn:hover:not(:disabled) {
  background: linear-gradient(135deg,#9b97ff,#8b87f5);
  box-shadow: 0 3px 14px rgba(139,135,245,0.38);
  transform: translateY(-1px);
}
.batch-execute-btn:disabled {
  background: #33364a; color: #5a5e72; cursor: not-allowed;
}
/* 批量模式退出按钮 */
.batch-exit-btn {
  position: absolute; top: 8px; right: 10px; z-index: 20;
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: rgba(60,63,78,0.7); color: #8b90a0;
  font-size: 14px; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.batch-exit-btn:hover { background: #e74c5e; color: #fff; }
.batch-main-area { position: relative; }

/* ====== 大图组合视图模式 ====== */
/* 大图模式下隐藏左侧缩略图栏，最大化组合预览区 */
.batch-panel.view-large .batch-left-sidebar {
  display: none;
}
.batch-panel.view-large .batch-picker-box {
  height: 220px;
  padding: 4px !important; box-sizing: border-box;
}
.batch-panel.view-large .batch-picker-box img {
  max-height: 212px !important;
}
.batch-panel.view-large .batch-row-num {
  position: absolute;
  width: 24px; height: 24px; font-size: 11px;
  top: 5px; left: 6px;
}
.batch-panel.view-large .batch-row-plus {
  font-size: 12px; width: 16px;
}
.batch-panel.view-large .bp-placeholder {
  font-size: 14px; padding: 90px 14px;
}
.batch-panel.view-large .batch-grid {
  gap: 6px 10px;
  padding: 14px 18px;
}
/* 大图模式下缩略图保持与小图模式相同尺寸，不再放大 */

/* ====== 批量/极速模式：工具栏 + 内容区 合并为无缝卡片 ====== */
/* ====== 三列各自独立卡片，列间保留间隙 ====== */
/* studio 不做卡片，保持原有黑色背景+间隙 */
.studio {
  background: #000000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  gap: 4px;
  padding: 6px;
}

/* 三列恢复独立卡片样式（但 studio-right 透明，让子卡片间间隙露出黑色背景） */
.studio-mid,
.zone-gallery {
  background: #23252e !important;
  border: 1px solid #2f3240 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
}
.studio-right {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* zone-label 保留标题栏样式 */
.zone-label {
  background: #2a2d38;
  border-bottom: 1px solid #34384a;
  border-radius: 0;
}

/* ====== 左边区域：zone-current + zone-bg 合并为一张卡片（实线分隔） ====== */
.studio-mid {
  gap: 0;
  overflow: hidden;
}
/* 子元素去掉独立卡片样式 */
.studio-mid > .zone-current,
.studio-mid > .zone-bg {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* zone-bg 顶部实线分隔 */
.studio-mid > .zone-bg {
  border-top: 1px solid #34384a !important;
}

/* studio-right 内部间隙：子卡片之间 3px 真空 */
.studio-right {
  gap: 3px;
}
/* zone-prompt 去掉多余的 margin-top（gap 已处理间距） */
.zone-prompt {
  margin-top: 0;
}

/* zone-result 内部 zone-label 也用统一标题栏样式 */
.zone-result > .zone-label {
  background: #2a2d38;
  border-bottom: 1px solid #34384a;
}

/* ====== 批量/极速模式：在全局合并基础上，隐藏 zone-bg、调整背景色 ====== */
.studio-mid:has(.batch-panel.active) {
  background: #1e1f26 !important;
}
/* batch-panel 去掉独立卡片样式 */
.studio-mid:has(.batch-panel.active) > .batch-panel {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 批量模式下隐藏 zone-bg */
.studio-mid:has(.batch-panel.active) > .zone-bg {
  display: none;
}
/* ★ 批量模式下隐藏标准模式底部输出栏 */
.studio-mid:has(.batch-panel.active) > .std-output-bar {
  display: none;
}

/* ====== 标准模式底部输出设置栏（std-output-bar）====== */
.std-output-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid #34384a;
  background: #252836;
  flex-shrink: 0;
}
.sob-title {
  display: inline-flex; align-items: center; gap: 5px;
  color: #9ca0b5; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.sob-title i { color: #8b87f5; font-size: 11.5px; }
.sob-items {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: nowrap;
}
.sob-item {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.sob-lbl {
  color: #6c6e7a; font-size: 11px; white-space: nowrap;
}
.sob-select {
  height: 28px; padding: 0 7px; min-width: 68px;
  background: #23252e; border: 1px solid #34384a; border-radius: 5px;
  color: #c7cad4; font-size: 11px; cursor: pointer;
  transition: all .15s; outline: none;
}
.sob-select:hover { border-color: #454a5e; }
.sob-select:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }

/* ★ 影像生成提示词同步显示区（只读，位于提示词输入框上方 prompt-quick 区域） */
#promptQuick .sob-prompt-view,
.prompt-quick .sob-prompt-view {
  flex: 1;
  min-width: 0;
  max-height: 46px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  padding: 4px 8px;
  background: #1c1d24;
  border: 1px solid #2a2d38;
  border-radius: 5px;
  color: #8890a0;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: default;
  user-select: text;
}
.sob-prompt-view::-webkit-scrollbar { width: 4px; }
.sob-prompt-view::-webkit-scrollbar-thumb { background: #3a3d4a; border-radius: 2px; }
/* ★ 灰色禁用时保留占位：即使内容为空也保持固定高度，不塌陷 */
#promptQuick .sob-prompt-view,
.prompt-quick .sob-prompt-view {
  min-height: 46px;
}
.sob-prompt-view:empty::before,
.sob-prompt-view.is-empty {
  color: #4a4d5a; font-style: italic;
}
.sob-num {
  width: 56px; height: 30px; padding: 0 4px;
  background: #23252e; border: 1px solid #34384a; border-radius: 6px;
  color: #c7cad4; font-size: 12px; text-align: center; outline: none;
  transition: all .15s;
}
.sob-num::-webkit-inner-spin-button { -webkit-appearance: none; }
.sob-num:hover { border-color: #454a5e; }
.sob-num:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.sob-num-short {
  width: 50px; height: 30px; padding: 0 4px;
  background: #23252e; border: 1px solid #34384a; border-radius: 6px;
  color: #c7cad4; font-size: 12px; text-align: center; outline: none;
  transition: all .15s;
}
.sob-num-short::-webkit-inner-spin-button { -webkit-appearance: none; }
.sob-num-short:hover { border-color: #454a5e; }
.sob-num-short:focus { border-color: #8b87f5; box-shadow: 0 0 0 2px rgba(139,135,245,.15); }
.sob-x { color: #555a6e; font-size: 13px; user-select: none; }
.sob-unit { color: #6c6e7a; font-size: 12px; }
.sob-lock-btn {
  width: 28px; height: 28px; border: 1px solid #34384a; border-radius: 6px;
  background: #23252e; color: #6c6e7a; font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sob-lock-btn:hover { border-color: #454a5e; color: #c7cad4; }
.sob-lock-btn.active {
  border-color: #8b87f5; color: #8b87f5; background: rgba(139,135,245,.1);
}

/* ====== 区域激活指示器：仅在图片预览框上显示（不含画册区域） ====== */
.current-view.preview-active,
.bg-preview.preview-active,
.result-view.preview-active {
  outline: 1.5px solid rgba(139,135,245,.55);
  outline-offset: -1.5px;
  border-radius: 4px;
}

/* ====== 图片选择弹窗 ====== */
.batch-picker-overlay {
  position: fixed; inset: 0; z-index: 9999; display: none;
  background: rgba(0,0,0,0.3);
}
.batch-picker-popup {
  /* ★ 宽度等关键属性已由安全区(!important)版本控制，此处仅保留animation */
  animation: bpFadeInCenter 0.22s ease-out;
}
@keyframes bpFadeInCenter {
  from { opacity: 0; transform: translate(-30%, -45%) scale(0.97); }
  to { opacity: 1; transform: translate(-30%, -50%) scale(1); }
}
/* 弹窗拖动中 */
.batch-picker-popup.picker-dragging {
  animation: none;
  transition: none;
}
.batch-picker-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #32363e;
  background: #252836; flex-shrink: 0;
  cursor: grab; /* 拖拽手柄 */
}
.batch-picker-head:active {
  cursor: grabbing;
}
.batch-picker-head span { font-size: 13.5px; font-weight: 600; color: #e0e0e0; }
/* 弹窗内分类筛选栏（仅背景图选择时显示） */
.picker-filter-bar {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 8px 12px; border-bottom: 1px solid #2a2d38;
  background: #1f222c; flex-shrink: 0;
  pointer-events: auto;
}
.picker-filter-bar .mini-tag {
  padding: 3px 10px; font-size: 10.5px; cursor: pointer;
  border-radius: 10px; background: #2a2d38; color: #9aa0b0;
  transition: all 0.15s; border: 1px solid transparent;
}
.picker-filter-bar .mini-tag:hover { background: #363a4a; color: #c7cad4; }
.picker-filter-bar .mini-tag.active {
  background: linear-gradient(135deg,#8b87f5,#7c78e8); color: #fff;
  box-shadow: 0 2px 6px rgba(139,135,245,0.25);
}
.batch-picker-close {
  width: 28px; height: 28px; border: none; background: #35384a;
  color: #aaa; border-radius: 50%; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.batch-picker-close:hover { background: #f87171; color: #fff; }
.batch-picker-body {
  flex: 1; overflow-y: auto; padding: 16px;
  display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr));
  gap: 12px; align-content: start;
  pointer-events: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.batch-picker-body::-webkit-scrollbar { display: none; /* Chrome/Safari */ }
.batch-picker-item {
  aspect-ratio: 4/3; border: 2px solid #33364a; border-radius: 7px;
  overflow: hidden; cursor: pointer; transition: all 0.15s;
  background: #15161e; position: relative;
  pointer-events: auto;
}
.batch-picker-item:hover { border-color: #8b87f5; transform: translateY(-2px); }
.batch-picker-item.selected { border-color: #8b87f5; box-shadow: inset 0 0 0 1px rgba(139,135,245,0.25); }
.batch-picker-item img { width:100%;height:100%;object-fit:cover;pointer-events:none; }
.batch-picker-empty {
  grid-column: 1/-1;text-align:center;padding:36px;color:#666a80;font-size:13.5px;
}
.batch-picker-empty i{display:block;font-size:32px;margin-bottom:10px;opacity:0.35;}
/* 多选底部栏 */
.batch-picker-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid #32363e;
  background: #252836; flex-shrink: 0;
  pointer-events: auto;
}
.picker-sel-count { font-size: 12.5px; color: #8b87f5; font-weight: 600; }
.picker-confirm-btn {
  padding: 5px 22px; font-size: 13px; font-weight: 600;
  color: #fff; background: linear-gradient(135deg,#8b87f5,#7c78e8);
  border: none; border-radius: 8px; cursor: pointer;
  transition: all 0.15s;
}
.picker-confirm-btn:hover { box-shadow: 0 3px 12px rgba(139,135,245,0.4); }
.picker-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* 多选勾选标记 */
.batch-picker-item .picker-check {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(139,135,245,0.85); color: #fff;
  font-size: 9px; display: none; align-items: center;
  justify-content: center; z-index: 2;
  pointer-events: none;
}
.batch-picker-item.selected .picker-check { display: flex; }

/* ====== 批量结果网格 ====== */
.batch-result-grid-wrap {
  margin-top: 6px;border: 1px solid #33364a;border-radius: 7px;
  background: #1e1f26;overflow:hidden;
}
.brg-head {
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;background:#252836;border-bottom:1px solid #32363e;
  font-size:11.5px;font-weight:600;color:#c7cad4;
}
.brg-close{
  width:22px;height:22px;border:none;background:transparent;color:#888;
  font-size:15px;cursor:pointer;border-radius:5px;line-height:1;
}
.brg-close:hover{background:#f87171;color:#fff;}
.batch-result-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:7px;padding:9px;max-height:210px;overflow-y:auto;
}
.batch-result-item{
  aspect-ratio:4/3;border:1.5px solid #3a3e4d;border-radius:6px;
  overflow:hidden;cursor:pointer;position:relative;transition:all 0.15s;background:#15161e;
}
.batch-result-item:hover{border-color:#8b87f5;transform:scale(1.04);}
.batch-result-item img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.batch-result-item .bri-index{
  position:absolute;bottom:3px;left:3px;padding:1px 6px;
  background:rgba(0,0,0,0.7);color:#ccc;font-size:9px;border-radius:3px;
}
.batch-result-item .bri-done-icon{
  position:absolute;top:3px;right:3px;width:17px;height:17px;
  background:rgba(52,211,153,0.88);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;
}
/* ★ P1-1: 批量结果 - 失败错误卡片 */
.batch-result-item.error-card {
  border-color: #5a3a3a !important; background: #2a1a1a !important; cursor: default;
}
.batch-result-item.error-card .bri-error-body {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px 8px;height:100%;color:#e27a7a;font-size:11px;text-align:center;
}
.batch-result-item.error-card .bri-error-body i { font-size:20px;color:#e24b4a;margin-bottom:2px; }
.batch-result-item.error-card .bri-err-msg { max-width:100%;word-break:break-all;line-height:1.35; }
.batch-result-item.error-card .bri-retry-btn {
  margin-top:4px;padding:4px 14px;font-size:11px;border:1px solid #8b5a5a;
  background:#4a2c2c;color:#f0b8b8;border-radius:5px;cursor:pointer;transition:all 0.15s;
}
.batch-result-item.error-card .bri-retry-btn:hover { background:#6a3c3c; border-color:#e27a7a; }
/* ★ P2-4: 结果网格图片 hover 下载按钮 */
.bri-dl-btn {
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);color:#ccc;
  display:none;align-items:center;justify-content:center;cursor:pointer;font-size:10px;
  transition:all 0.15s;z-index:4;
}
.batch-result-item.success:hover .bri-dl-btn { display:flex; }
.bri-dl-btn:hover { background:rgba(139,135,245,.85); color:#fff; border-color:rgba(139,135,245,.9); }

/* ============================================================
   ★ v166: 双圆点就绪指示器（产品图+背景图，居中，不同颜色）
   两图都选中时连线激活+圆点呼吸光晕
   ============================================================ */
.link-dots {
  display: flex;
  align-items: center;
  justify-content: center;   /* ★ 内部居中 */
  gap: 6px;
  flex: 1;                  /* ★ 占满剩余宽度，使 justify-content: center 生效 */
  min-width: 0;             /* 防止 flex 子项溢出 */
  user-select: none;
}
.ld-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid #475569;
  background: transparent;
  transition: all 0.35s ease;
  flex-shrink: 0;
}
/* 产品图圆点：青绿色系 */
.ld-dot.ld-furn {
  border-color: #1D9E75;
}
.ld-dot.ld-furn.active {
  background: #1D9E75;
  border-color: #1D9E75;
  box-shadow: 0 0 6px rgba(29,158,117,0.6);
}
/* 背景图圆点：紫色系 */
.ld-dot.ld-bg {
  border-color: #7F77DD;
}
.ld-dot.ld-bg.active {
  background: #7F77DD;
  border-color: #7F77DD;
  box-shadow: 0 0 6px rgba(127,119,221,0.6);
}
/* ★ v167: 去掉连线和呼吸动画，只保留两个圆点 */

/* ====== 多图组角标（画册缩略图 + 缩略图条）====== */
.gallery-multi-badge,
.rt-multi-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8b87f5, #7c78e8);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(139,135,245,0.5);
  z-index: 3;
  pointer-events: none;
}
.rt-multi-badge { font-size: 9px; min-width: 14px; height: 14px; line-height: 14px; }

/* ====== 多图组分页控件（影像预览框底部）====== */
.image-pager {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(30,31,38,0.92);
  border: 1px solid #3a3d4a;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 15;
  backdrop-filter: blur(6px);
}
.ip-arrow {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #2a2d38;
  color: #9ca0b5;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ip-arrow:hover:not(:disabled) {
  background: #8b87f5;
  color: #fff;
}
.ip-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.ip-dot {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border: 1.5px solid #3a3d4a;
  border-radius: 50%;
  background: transparent;
  color: #6c6e7a;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ip-dot:hover {
  border-color: #8b87f5;
  color: #c4b8ff;
}
.ip-dot.active {
  background: linear-gradient(135deg, #8b87f5, #7c78e8);
  border-color: #8b87f5;
  color: #fff;
  box-shadow: 0 2px 8px rgba(139,135,245,0.5);
}
.ip-del-page {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(231,76,94,0.15);
  color: #e74c5e;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-left: 4px;
}
.ip-del-page:hover {
  background: #e74c5e;
  color: #fff;
}

/* ====== 机位控制按钮 + 面板 ====== */
.camera-pos-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: rgba(30,31,38,0.9);
  color: #8b87f5;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 14;
  transition: all 0.2s;
  backdrop-filter: blur(6px);
}
.camera-pos-btn:hover {
  background: #8b87f5;
  color: #fff;
  transform: scale(1.08);
}
.camera-pos-btn.active {
  background: #8b87f5;
  color: #fff;
}

.camera-pos-panel {
  position: absolute;
  bottom: 52px;
  right: 10px;
  width: 300px;
  background: #1e1f26;
  border: 1px solid #34384a;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 20;
  overflow: hidden;
  animation: cppFadeIn 0.18s ease;
}
@keyframes cppFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cpp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #2a2d38;
  font-size: 13px;
  font-weight: 600;
  color: #c7cad4;
}
.cpp-header i { color: #8b87f5; margin-right: 5px; }
.cpp-close {
  width: 24px; height: 24px;
  border: none; border-radius: 5px;
  background: transparent; color: #6c6e7a;
  font-size: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.cpp-close:hover { background: #2a2d38; color: #e74c5e; }

.cpp-body { padding: 12px 14px; }
.cpp-section { margin-bottom: 14px; }
.cpp-section:last-child { margin-bottom: 0; }
.cpp-section-label {
  font-size: 11px;
  color: #6c6e7a;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cpp-section-label span {
  color: #8b87f5;
  font-weight: 600;
  font-size: 12px;
}

/* 俯视图圆盘 */
.cpp-disc-wrap {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  overflow: visible;
}
.cpp-disc {
  width: 260px;
  height: 200px;
  overflow: visible;
}
#cppYawDot:hover { cursor: grab; }
#cppYawDot:active { cursor: grabbing; }

/* 滑块 */
.cpp-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cpp-slider-tag {
  font-size: 11px;
  color: #6c6e7a;
  min-width: 16px;
  text-align: center;
}
.cpp-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: #2a2d38;
  outline: none;
  cursor: pointer;
}
.cpp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b87f5;
  cursor: pointer;
  border: 2px solid #1e1f26;
  box-shadow: 0 1px 4px rgba(139,135,245,0.4);
}
.cpp-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8b87f5;
  cursor: pointer;
  border: 2px solid #1e1f26;
}

/* ★ 俯仰滑块：0°位置颜色标记 */
.cpp-pitch-slider {
  background: linear-gradient(to right,
    #3a3d4a 0%, #3a3d4a 32%,        /* 仰（-30~0）暗色 */
    #8b87f5 32%, #8b87f5 36%,        /* 0°位置紫色标记 */
    #3a3d4a 36%, #3a3d4a 100%        /* 俯（0~60）暗色 */
  );
}

/* 预设按钮 */
.cpp-presets {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}
.cpp-preset-btn {
  padding: 6px 4px;
  border: 1px solid #34384a;
  border-radius: 6px;
  background: #23252e;
  color: #9ca0b5;
  font-size: 10.5px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.cpp-preset-btn:hover {
  border-color: #5a5d72;
  color: #c7cad4;
}
.cpp-preset-btn.active {
  border-color: #8b87f5;
  background: rgba(139,135,245,0.15);
  color: #8b87f5;
  font-weight: 600;
}



/* ── 输入框清晰度/格式选择器（从底部输出栏移入） ── */
.prompt-clarity-picker,
.prompt-format-picker {
  position: relative;
  flex-shrink: 0;
}
.pcp-btn, .pfp-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  background: #1e2128; border: 1px solid #34384a;
  border-radius: 7px; color: #c7cad4;
  font-size: 12px; cursor: pointer;
  transition: all .15s;
}
.pcp-btn:hover, .pfp-btn:hover { border-color: #8b87f5; color: #fff; }
.pcp-btn i, .pfp-btn i { font-size: 11px; color: #8b87f5; }
.pcp-dropdown, .pfp-dropdown {
  position: absolute; bottom: 100%; left: 0;
  min-width: 130px;
  background: #1e2128; border: 1px solid #34384a;
  border-radius: 8px; padding: 4px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.4);
  z-index: 100;
}
.pcp-item, .pfp-item {
  padding: 7px 10px; border-radius: 5px;
  font-size: 12px; color: #c7cad4;
  cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.pcp-item:hover, .pfp-item:hover { background: rgba(139,135,245,.1); }
.pcp-item.active, .pfp-item.active { background: rgba(139,135,245,.2); color: #8b87f5; font-weight: 500; }