/**
 * tushengtu merged_ui skin (ONLY styles)
 * Goal: remove legacy inline styles from templates/tushengtu.html and drive layout via tokens + this file.
 * Notes:
 * - Keep functionality untouched (JS/IDs remain). This is visual/layout only.
 * - If any module looks unstyled after removal, we will add new styles here (not back into inline <style>).
 */

body[data-weveeee-page="tushengtu"] {
  --primary-rgb: 45 19 80;
  --primary: rgb(var(--primary-rgb));

  --brand-primary: var(--primary);
  --brand-primary-hover: var(--primary);
  --brand-primary-active: var(--primary);
  --brand-primary-ring: rgba(45, 19, 80, 0.15);
  --brand-subtle: rgba(45, 19, 80, 0.06);
  --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary) 100%);

  --ds-shadow-brand: 0 14px 34px rgba(45, 19, 80, 0.24);
  --shadow-glow: 0 0 12px rgba(45, 19, 80, 0.20);
}

/* ========================================================================
   按用户需求：说明文字/提示词区 默认隐藏，仅悬停/聚焦/（提示词有内容）时展开
   - 仅对 hover 设备启用（触屏无 hover，否则会导致“永远看不到/无法操作”）
   - 该段放在文件靠后位置，用更高优先级覆盖之前的“默认显示”兜底
   ======================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* 1) 左侧参数面板内：说明文字默认隐藏，悬停到卡片才显示 */
  #controlPanel .clean-card .info-description,
  #controlPanel .clean-card .info-tip,
  #controlPanel .param-box .info-description,
  #controlPanel .param-box .info-tip,
  .control-panel .clean-card .info-description,
  .control-panel .clean-card .info-tip,
  .control-panel .param-box .info-description,
  .control-panel .param-box .info-tip {
    display: none !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
  }

  #controlPanel .clean-card:hover .info-description,
  #controlPanel .clean-card:hover .info-tip,
  #controlPanel .clean-card:focus-within .info-description,
  #controlPanel .clean-card:focus-within .info-tip,
  #controlPanel .param-box:hover .info-description,
  #controlPanel .param-box:hover .info-tip,
  #controlPanel .param-box:focus-within .info-description,
  #controlPanel .param-box:focus-within .info-tip,
  .control-panel .clean-card:hover .info-description,
  .control-panel .clean-card:hover .info-tip,
  .control-panel .clean-card:focus-within .info-description,
  .control-panel .clean-card:focus-within .info-tip,
  .control-panel .param-box:hover .info-description,
  .control-panel .param-box:hover .info-tip,
  .control-panel .param-box:focus-within .info-description,
  .control-panel .param-box:focus-within .info-tip {
    display: block !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 2) 提示词设置：默认收缩为一个“提示词设置”按钮（复用 section-header），悬停/聚焦/有内容/手动打开时展开 */
  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open),
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) {
    padding: 18px !important;
    overflow: visible !important;
  }

  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .section-header,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .section-header {
    display: flex !important;
    margin: 0 auto !important;
    max-width: 360px !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 18px !important;
    border-radius: 24px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-title,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-title {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
    color: var(--text-main) !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-text,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-text {
    color: var(--text-main) !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor !important;
    white-space: nowrap !important;
  }

  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-icon,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    flex: 0 0 auto !important;
  }

  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-arrow,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-arrow {
    display: none !important;
  }

  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .action-links,
  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) textarea#prompt,
  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .info-description,
  #controlPanel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) #templateSelectionArea,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .action-links,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) textarea#prompt,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) .info-description,
  .control-panel #promptInputArea:not(:hover):not(:focus-within):not(.has-prompt-content):not(.prompt-manual-open) #templateSelectionArea {
    display: none !important;
  }

  #controlPanel #promptInputArea:hover,
  #controlPanel #promptInputArea:focus-within,
  #controlPanel #promptInputArea.has-prompt-content,
  #controlPanel #promptInputArea.prompt-manual-open,
  .control-panel #promptInputArea:hover,
  .control-panel #promptInputArea:focus-within,
  .control-panel #promptInputArea.has-prompt-content,
  .control-panel #promptInputArea.prompt-manual-open {
    padding: 28px !important;
    border-radius: 36px !important;
    overflow: visible !important;
  }

  #controlPanel #promptInputArea:hover .section-header,
  #controlPanel #promptInputArea:focus-within .section-header,
  #controlPanel #promptInputArea.has-prompt-content .section-header,
  #controlPanel #promptInputArea.prompt-manual-open .section-header,
  .control-panel #promptInputArea:hover .section-header,
  .control-panel #promptInputArea:focus-within .section-header,
  .control-panel #promptInputArea.has-prompt-content .section-header,
  .control-panel #promptInputArea.prompt-manual-open .section-header {
    padding: 0 0 16px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: default !important;
    justify-content: space-between !important;
  }

  #controlPanel #promptInputArea:hover .prompt-collapsed-arrow,
  #controlPanel #promptInputArea:focus-within .prompt-collapsed-arrow,
  #controlPanel #promptInputArea.has-prompt-content .prompt-collapsed-arrow,
  #controlPanel #promptInputArea.prompt-manual-open .prompt-collapsed-arrow,
  .control-panel #promptInputArea:hover .prompt-collapsed-arrow,
  .control-panel #promptInputArea:focus-within .prompt-collapsed-arrow,
  .control-panel #promptInputArea.has-prompt-content .prompt-collapsed-arrow,
  .control-panel #promptInputArea.prompt-manual-open .prompt-collapsed-arrow {
    display: none !important;
  }

  #controlPanel #promptInputArea:hover .action-links,
  #controlPanel #promptInputArea:focus-within .action-links,
  #controlPanel #promptInputArea.has-prompt-content .action-links,
  #controlPanel #promptInputArea.prompt-manual-open .action-links,
  .control-panel #promptInputArea:hover .action-links,
  .control-panel #promptInputArea:focus-within .action-links,
  .control-panel #promptInputArea.has-prompt-content .action-links,
  .control-panel #promptInputArea.prompt-manual-open .action-links {
    display: flex !important;
  }

  #controlPanel #promptInputArea:hover textarea#prompt,
  #controlPanel #promptInputArea:focus-within textarea#prompt,
  #controlPanel #promptInputArea.has-prompt-content textarea#prompt,
  #controlPanel #promptInputArea.prompt-manual-open textarea#prompt,
  .control-panel #promptInputArea:hover textarea#prompt,
  .control-panel #promptInputArea:focus-within textarea#prompt,
  .control-panel #promptInputArea.has-prompt-content textarea#prompt,
  .control-panel #promptInputArea.prompt-manual-open textarea#prompt {
    display: block !important;
  }

  #controlPanel #promptInputArea:hover .info-description,
  #controlPanel #promptInputArea:focus-within .info-description,
  #controlPanel #promptInputArea.has-prompt-content .info-description,
  #controlPanel #promptInputArea.prompt-manual-open .info-description,
  .control-panel #promptInputArea:hover .info-description,
  .control-panel #promptInputArea:focus-within .info-description,
  .control-panel #promptInputArea.has-prompt-content .info-description,
  .control-panel #promptInputArea.prompt-manual-open .info-description {
    display: block !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open),
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) {
    padding: 18px !important;
    overflow: visible !important;
  }

  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .section-header,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .section-header {
    display: flex !important;
    margin: 0 auto !important;
    max-width: 360px !important;
    width: 100% !important;
    height: 56px !important;
    padding: 0 18px !important;
    border-radius: 24px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-title,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-title {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
    color: var(--text-main) !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-text,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-text {
    color: var(--text-main) !important;
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-text-fill-color: currentColor !important;
    white-space: nowrap !important;
  }

  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-icon,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--primary) !important;
    flex: 0 0 auto !important;
  }

  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-arrow,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .prompt-collapsed-arrow {
    display: none !important;
  }

  #controlPanel #promptInputArea.has-prompt-content .prompt-collapsed-arrow,
  #controlPanel #promptInputArea.prompt-manual-open .prompt-collapsed-arrow,
  .control-panel #promptInputArea.has-prompt-content .prompt-collapsed-arrow,
  .control-panel #promptInputArea.prompt-manual-open .prompt-collapsed-arrow {
    display: none !important;
  }

  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .action-links,
  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) textarea#prompt,
  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .info-description,
  #controlPanel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) #templateSelectionArea,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .action-links,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) textarea#prompt,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) .info-description,
  .control-panel #promptInputArea:not(.has-prompt-content):not(.prompt-manual-open) #templateSelectionArea {
    display: none !important;
  }

  #controlPanel #promptInputArea.has-prompt-content,
  #controlPanel #promptInputArea.prompt-manual-open,
  .control-panel #promptInputArea.has-prompt-content,
  .control-panel #promptInputArea.prompt-manual-open {
    padding: 28px !important;
    border-radius: 36px !important;
    overflow: visible !important;
  }
}

/* Hide legacy nav/overlay shells (old base layout) */
.app-sidebar,
.sidebar-hover-zone,
.sidebar-overlay,
.mobile-menu-btn,
.top-nav-bar {
  display: none !important;
}

/* merged_ui skeleton: black app background + light main container */
html {
  background: var(--sidebar-bg) !important;
}

body {
  display: flex !important;
  height: 100vh !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--sidebar-bg) !important;
  font-family: var(--ds-font-sans) !important;
}

/* Sidebar is a flex item (not fixed). Expansion works via width + flex-basis. */
#newSidebar.new-nav-sidebar {
  position: relative !important;
  inset: auto !important;
  height: 100vh !important;
  width: 80px !important;
  flex: 0 0 80px !important;
  min-width: 80px !important;
  max-width: 260px !important;
  z-index: 9999 !important;
  background: #000 !important;
  overflow: hidden !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#newSidebar.new-nav-sidebar:hover,
#newSidebar.new-nav-sidebar:focus-within,
#newSidebar.new-nav-sidebar.expanded {
  width: 260px !important;
  flex-basis: 260px !important;
  min-width: 260px !important;
}

/* Main container is the second flex item */
#newMainContainer.new-main-container {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  background: var(--bg-app) !important;
  border-radius: 40px 0 0 40px !important;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.30) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Header sits in normal flow (avoid absolute/left hacks from legacy) */
#newHeaderInner.new-nav-header {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 72px !important;
  height: 72px !important;
  border-radius: 40px 0 0 0 !important;
}

/* Content fills remaining space */
.new-content-area {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.app-wrapper,
.app-main {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* ===== App main layout (left panel + canvas + right panel) ===== */
.app-main {
  display: flex !important;
  flex-direction: row !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 16px !important;
  gap: 16px !important;
  position: relative !important; /* for panel expand button absolute positioning */
}

/* Left control panel */
.control-panel {
  flex: 0 0 460px !important;
  width: 460px !important;
  max-width: 460px !important;
  height: 100% !important;
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 40px !important;
  box-shadow: var(--shadow-panel) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.control-panel .panel-tabs {
  height: 72px !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: rgba(255, 255, 255, 0.86) !important;
}

.control-panel .panel-tabs .tab-btn {
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: var(--text-sub) !important;
  border-bottom: 2px solid transparent !important;
  padding: 0 6px !important;
  cursor: pointer !important;
}

.control-panel .panel-tabs .tab-btn.active {
  color: var(--primary) !important;
  border-bottom-color: var(--primary) !important;
  font-weight: 600 !important;
}

.control-panel .panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.control-panel .scroll-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 32px 32px 160px 32px !important;
}

/* 滚动条视觉隐藏（仍可滚动）：参数面板主滚动区 */
.control-panel .scroll-content {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Legacy Edge */
}

.control-panel .scroll-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Tab content visibility (legacy CSS removed) */
.tab-content {
  display: none !important;
}

.tab-content.active {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Collapse button (X) */
.panel-collapse-btn {
  margin-left: auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.50) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.panel-collapse-btn:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

/* Section action links */
.action-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 12px !important;
  /* 在 flex-wrap 场景下保证按钮组仍然靠右，避免被挤压错位 */
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

.link-action {
  color: rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}

.link-action:hover {
  color: var(--primary) !important;
}

.link-action.danger,
.link-action.text-danger {
  color: rgba(239, 68, 68, 0.75) !important;
}

.link-action.danger:hover,
.link-action.text-danger:hover {
  color: #ef4444 !important;
}

/* Info description */
.info-description {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.info-description i {
  color: rgba(var(--primary-rgb), 0.55) !important;
  margin-right: 6px !important;
}

/* Reference template button */
.btn-reference-library {
  width: 100% !important;
  height: 56px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 18px !important;
  gap: 12px !important;
}

.btn-reference-library:hover {
  background: rgba(var(--primary-rgb), 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.10) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06) !important;
}

.btn-reference-library:focus,
.btn-reference-library:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.06) !important;
}

.btn-reference-library-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary) !important;
}

.btn-reference-library-text {
  flex: 1 1 auto !important;
  text-align: left !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
}

.btn-reference-library-arrow {
  color: rgba(0, 0, 0, 0.25) !important;
}

.wb-template-hint {
  margin-top: 10px !important;
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.40) !important;
}

/* Upload zone */
.upload-zone {
  width: 100% !important;
  height: 190px !important;
  border-radius: 28px !important;
  border: 1px dashed rgba(0, 0, 0, 0.10) !important;
  background: rgba(0, 0, 0, 0.015) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.upload-zone:hover {
  background: rgba(var(--primary-rgb), 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.14) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06) !important;
  transform: translateY(-1px) !important;
}

.upload-zone:focus,
.upload-zone:focus-visible {
  outline: none !important;
}

.upload-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  box-shadow: var(--shadow-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(var(--primary-rgb), 0.6) !important;
}

.upload-text {
  font-size: 12px !important;
  color: var(--text-main) !important;
  font-weight: 500 !important;
}

.upload-sub {
  font-size: 10px !important;
  color: rgba(0, 0, 0, 0.35) !important;
  margin-top: 4px !important;
}

.preview-grid {
  margin-top: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

@media (max-width: 720px) {
  .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 420px) {
  .preview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 选择模板模块：让“已选择模板预览”有明确的分割框与留白 */
.reference-library-block {
  padding: 18px !important;
}

/* 统一：计数行（已选择模板 / 已选图片）——字号/间距/对齐一致 */
.selection-count-line {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  line-height: 1.2 !important;
}

.selection-count-line-right {
  text-align: right !important;
}

.selection-count-strong {
  font-weight: 800 !important;
  color: rgba(0, 0, 0, 0.78) !important;
}

/* 对齐：模板计数行与模板缩略图内容（selected-whitebg-preview 内边距为 14px） */
#selectedWhiteBackgroundsInfo.selection-count-line {
  padding: 0 14px !important;
}

/* 对齐：图片计数行与图片预览容器（#imagePreviews padding 为 12px） */
#tab-config-content .selection-count-line-right {
  padding: 0 12px !important;
}

/* 选择模板：无内容时不显示不占位；有内容时才显示带边框的预览容器 */
#selectedWhiteBackgroundsPreview.selected-whitebg-preview:empty {
  display: none !important;
}

#selectedWhiteBackgroundsPreview.selected-whitebg-preview:not(:empty) {
  display: flex !important;
  padding: 14px !important;
  background: rgba(0, 0, 0, 0.012) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 24px !important;
}

/* 图片上传：已选图片缩略图（thumb-item）补齐样式，避免“像没样式/没框/很乱” */
/* 图片上传：无图片时预览区不显示不占位；有图片时才显示容器框 */
#imagePreviews.preview-grid:empty {
  display: none !important;
}

#imagePreviews.preview-grid:not(:empty) {
  padding: 12px !important;
  background: rgba(0, 0, 0, 0.012) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 24px !important;
}

/* 图片上传预览：对齐“选择模板”的小缩略图风格（避免单列大卡片导致面板变乱） */
#tab-config-content #imagePreviews.preview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important;
  gap: 10px !important;
  max-height: 320px !important;
  overflow: auto !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#tab-config-content #imagePreviews.preview-grid::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#imagePreviews .thumb-item {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: var(--shadow-soft) !important;
  aspect-ratio: 1 / 1 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

#imagePreviews .thumb-item:hover {
  border-color: rgba(var(--primary-rgb), 0.20) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.10), 0 0 22px rgba(var(--primary-rgb), 0.06) !important;
  transform: translateY(-1px) !important;
}

#imagePreviews .thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#imagePreviews .thumb-mask {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.00) 40%, rgba(0,0,0,0.45) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
  pointer-events: none !important;
}

#imagePreviews .thumb-item:hover .thumb-mask {
  opacity: 1 !important;
}

#imagePreviews .thumb-del {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
  pointer-events: auto !important;
}

#imagePreviews .thumb-del:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
  color: rgba(239, 68, 68, 0.95) !important;
}

#imagePreviews .thumb-item.dragging {
  opacity: 0.85 !important;
  transform: scale(0.985) !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.20) !important;
}

#imagePreviews .thumb-item.drag-over {
  border-color: rgba(var(--primary-rgb), 0.40) !important;
  border-width: 2px !important;
  border-style: dashed !important;
}

/* Param box */
.param-box {
  padding: 28px !important;
}

.param-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.param-item .param-label,
.param-label {
  display: block !important;
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.55) !important;
  font-weight: 500 !important;
  margin: 0 0 8px 2px !important;
}

.advanced-content {
  display: none;
}

/* When JS toggles, it usually switches style.display, but also allow class-based open */
.advanced-content.open {
  display: block !important;
}

/* ========================================================================
   尺寸/清晰度折叠标题：统一字号/字重/颜色（跨页面一致）
   用法：在可点击行上加 .advanced-size-toggle，并把标题/数值分别套 .advanced-size-label/.advanced-size-value
   ======================================================================== */
.advanced-size-toggle {
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.advanced-size-toggle .advanced-size-left {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.advanced-size-toggle .advanced-size-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  line-height: 1.2 !important;
}

.advanced-size-toggle .advanced-size-value {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.40) !important;
  line-height: 1.2 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  white-space: nowrap !important;
}

.advanced-size-toggle .advanced-size-icon {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.35) !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* ========================================================================
   New UI Modal Skin（统一模态框视觉：圆角/阴影/间距/按钮/表单控件）
   用法：在 modal 根节点加 class="weveeee-modal"
   ======================================================================== */
.weveeee-modal .modal-dialog {
  max-width: min(980px, calc(100vw - 32px)) !important;
}

/* 确保模态框永远盖住新壳的 fixed 元素（侧栏 z=9999 / 边缘按钮等），避免出现“叠出第二个 X”的错觉 */
.weveeee-modal.modal {
  z-index: 10050 !important;
}

/* Image Preview Modal：必须高于全局 .modal-backdrop（本文件把 backdrop 提到了 10040）
   否则会出现“只看到 backdrop，页面全被挡住且无法关闭”的假死现象 */
.image-preview-modal.modal {
  z-index: 10050 !important;
}

.modal-backdrop {
  z-index: 10040 !important;
  background: transparent !important; /* 取消黑/灰遮罩 */
}

.modal-backdrop.show {
  opacity: 0 !important; /* 保留遮罩层用于点击关闭，但不压暗 */
}

/* ========================================================================
   历史库：取消灰色遮罩（仍保留点击遮罩关闭）
   说明：仅在打开 #historyGalleryModal 时由 JS 给 body 加 class 生效
   ======================================================================== */
body.weveeee-history-gallery-open .modal-backdrop {
  background: transparent !important;
}
body.weveeee-history-gallery-open .modal-backdrop.show {
  opacity: 0 !important;
}

.weveeee-modal .modal-content {
  border: none !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.18) !important;
}

.weveeee-modal .modal-header {
  padding: 18px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.weveeee-modal .modal-title {
  font-size: 14px !important;
  font-weight: 650 !important;
  color: rgba(0, 0, 0, 0.88) !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

.weveeee-modal .btn-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

.weveeee-modal .btn-close:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
}

.weveeee-modal .modal-body {
  padding: 20px 22px !important;
  background: #ffffff !important;
}

.weveeee-modal .modal-footer {
  padding: 16px 22px 20px 22px !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.weveeee-modal .modal-footer .btn {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.weveeee-modal .modal-footer .btn.btn-primary {
  background: var(--primary) !important;
  border-color: transparent !important;
  box-shadow: 0 18px 50px -18px rgba(var(--primary-rgb), 0.55) !important;
}

.weveeee-modal .btn.btn-outline-primary {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(var(--primary-rgb), 0.18) !important;
  background: rgba(var(--primary-rgb), 0.06) !important;
  color: rgba(var(--primary-rgb), 0.92) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
}

.weveeee-modal .btn.btn-outline-primary:hover {
  background: rgba(var(--primary-rgb), 0.10) !important;
  border-color: rgba(var(--primary-rgb), 0.26) !important;
}

.weveeee-modal .modal-footer .btn.btn-secondary,
.weveeee-modal .modal-footer .btn.btn-outline-secondary {
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: transparent !important;
  color: rgba(0, 0, 0, 0.75) !important;
}

.weveeee-modal .form-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  margin-bottom: 6px !important;
}

.weveeee-modal .form-control,
.weveeee-modal .form-select,
.weveeee-modal textarea.form-control {
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  font-size: 12px !important;
  padding: 12px 14px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.weveeee-modal .form-control:focus,
.weveeee-modal .form-select:focus {
  border-color: rgba(var(--primary-rgb), 0.22) !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08) !important;
  background: rgba(0, 0, 0, 0.01) !important;
}

.weveeee-modal .upload-zone {
  cursor: pointer !important;
  border: 2px dashed rgba(0, 0, 0, 0.12) !important;
  border-radius: 22px !important;
  padding: 22px !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.015) !important;
}

.weveeee-modal .upload-zone i {
  color: rgba(0, 0, 0, 0.22) !important;
}

.weveeee-modal small.text-muted {
  color: rgba(0, 0, 0, 0.38) !important;
  font-size: 11px !important;
}

/* ========================================================================
   Template Library（选择模板：模板库模态框 & OS 资产库模板页）统一视觉
   目标：全站“选择模板”相关弹窗/面板圆角一致、按钮一致、搜索/标签/列表一致
   ======================================================================== */

/* (A) 模板库模态框：#templateModal（各页面通用） */
#templateModal.weveeee-modal .modal-body {
  background: #ffffff !important;
}

#templateModal.weveeee-modal #loadTemplateForm > div:first-child {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

#templateModal.weveeee-modal #templateSearchInput.ui-input {
  border-radius: 999px !important;
}

#templateModal.weveeee-modal #templateList.tpl-grid-view {
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

#templateModal.weveeee-modal #confirmSelectionBtn {
  border-radius: 999px !important;
  background: var(--primary) !important;
  border-color: transparent !important;
  color: #fff !important;
  height: 44px !important;
  padding: 0 18px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
}

#templateModal.weveeee-modal #confirmSelectionBtn:hover {
  filter: brightness(1.02) !important;
}

/* (B) AI Creative OS：右侧资产库面板（包含“模板库”tab） */
.asset-library-panel#assetLibraryPanel {
  border-top-left-radius: 28px !important;
  border-bottom-left-radius: 28px !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.asset-library-panel#assetLibraryPanel .asset-library-header {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.asset-library-panel#assetLibraryPanel .asset-library-close {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

.asset-library-panel#assetLibraryPanel .asset-library-close:hover {
  background: rgba(0, 0, 0, 0.06) !important;
}

.asset-library-panel#assetLibraryPanel .asset-btn {
  height: 36px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.asset-library-panel#assetLibraryPanel .asset-search input {
  border-radius: 999px !important;
}

/* Sticky footer CTA area */
.panel-footer {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 24px 32px 28px 32px !important;
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0)) !important;
  margin-top: auto !important;
}

.btn-cost-badge {
  height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}

/* Cards (clean-card) */
.clean-card,
.param-box,
.param-config,
.config-group,
.settings-container {
  background: var(--panel-bg) !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
  border-radius: 36px !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 28px !important;
  margin: 0 0 24px 0 !important;
}

.section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
  /* 避免右侧按钮组被挤压导致中文逐字换行/错位 */
  flex-wrap: wrap !important;
}

.section-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
}

/* Inputs */
.ui-input,
.form-control,
.form-select,
textarea.ui-input {
  width: 100% !important;
  border-radius: 28px !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  padding: 14px 18px !important;
  font-size: 13px !important;
  color: var(--text-main) !important;
  outline: none !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.ui-input:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgb(var(--primary-rgb) / 0.22) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08) !important;
}

textarea.ui-input {
  min-height: 110px !important;
  resize: none !important;
  line-height: 1.6 !important;
}

/* Primary CTA (generate) */
.btn-primary-lg {
  width: 100% !important;
  height: 56px !important;
  border-radius: 20px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--ds-shadow-brand) !important;
  letter-spacing: 0.12em !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.btn-primary-lg i {
  font-size: 16px !important;
}

.btn-primary-lg:hover:not(:disabled) {
  filter: brightness(1.02) !important;
  transform: translateY(-1px) !important;
}

.btn-primary-lg:active:not(:disabled) {
  transform: translateY(0) scale(0.99) !important;
}

.btn-primary-lg:disabled,
.btn-primary-lg[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
}

/* 立即生成：右侧算力 badge（可选，不加也不影响对齐） */
.btn-primary-lg .btn-cost-badge {
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Canvas wrapper + main canvas */
.canvas-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  gap: 16px !important;
  overflow: hidden !important;
  position: relative !important; /* for right edge toggle absolute positioning */
}

.canvas-area {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 32px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden !important;
}

/* Right task queue shell */
.task-queue-sidebar {
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 320px !important;
  height: 100% !important;
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 40px !important;
  box-shadow: var(--shadow-panel) !important;
  overflow: hidden !important;
}

/* Canvas area padding (merged_ui has p-6 inside) */
.canvas-area .result-viewport,
#resultViewport {
  height: 100% !important;
  width: 100% !important;
  position: relative !important; /* 让内部抽屉/遮罩只在预览框内定位 */
}

/* ========================================================================
   (1) 参考图库侧栏：资产模板库（whiteBackgroundSidePanel）
   目标：对齐 merged_ui 的 “右侧抽屉 + 头部 120 + pill tabs + 搜索 + 网格 + 底部CTA”
   ======================================================================== */

#whiteBackgroundOverlay.white-background-overlay {
  position: absolute !important;
  inset: 0 !important; /* 仅覆盖预览结果框（#resultViewport） */
  background: rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease !important;
  z-index: 220 !important;
}

#whiteBackgroundOverlay.white-background-overlay.open {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#whiteBackgroundSidePanel.white-background-side-panel {
  position: absolute !important;
  top: 24px !important;   /* 图2：给顶部留更充足的安全间距，避免被遮挡 */
  bottom: 24px !important;
  right: 24px !important;
  width: min(560px, calc(100% - 32px)) !important; /* 自适应预览框宽度 */
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 32px !important;
  box-shadow: var(--shadow-panel) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(110%) !important;
  opacity: 0 !important;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease !important;
  z-index: 230 !important;
}

#whiteBackgroundSidePanel.white-background-side-panel.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

.white-background-side-panel-header {
  height: 120px !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

.white-background-side-panel-header h5 {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-main) !important;
  margin: 0 !important;
}

.panel-action-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 图1：资产模板库抽屉头部按钮更小（仅限抽屉内） */
#whiteBackgroundSidePanel .panel-action-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
}

.panel-action-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.14) !important;
}

/* 顶部 “通用公开/内部 + 添加模板” 行：变成 pill bar */
#whiteBackgroundSidePanel .d-flex.gap-2 {
  background: rgba(0, 0, 0, 0.04) !important;
  padding: 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.white-background-tab-btn {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(0, 0, 0, 0.55) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}

.white-background-tab-btn:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--text-main) !important;
}

.white-background-tab-btn.active {
  background: #ffffff !important;
  color: var(--primary) !important;
  border-color: rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.upload-template-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
  box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb), 0.25) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

/* 图1：抽屉“添加模板”按钮小一点（仅限抽屉内） */
#whiteBackgroundSidePanel .upload-template-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
}

.upload-template-btn:hover {
  opacity: 0.95 !important;
}

/* 风格标签行 */
#styleTagsFilter.white-background-tabs {
  padding: 10px 24px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
  background: rgba(0, 0, 0, 0.01) !important;
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
}

#styleTagsFilter.white-background-tabs::-webkit-scrollbar {
  display: none;
}

#styleTagsFilter.white-background-tabs .white-background-tab-btn {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#styleTagsFilter.white-background-tabs .white-background-tab-btn.active {
  background: rgba(var(--primary-rgb), 0.06) !important;
  border-color: rgba(var(--primary-rgb), 0.10) !important;
  box-shadow: none !important;
}

/* body */
.white-background-side-panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 18px 24px 0 24px !important;
  background: rgba(0, 0, 0, 0.01) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.white-background-side-panel-search .face-search-box {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 14px !important;
  /* 高度减半：收紧上下 padding，整体更“薄” */
  padding: 5px 10px !important;
  min-height: 36px !important;
}

.white-background-side-panel-search .face-search-icon {
  color: rgba(0, 0, 0, 0.25) !important;
  /* 与 flex 布局一致：不要用模板里绝对定位的写法 */
  position: static !important;
  transform: none !important;
  font-size: 14px !important;
}

.white-background-side-panel-search .face-search-input {
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  width: 100% !important;
  font-size: 12px !important;
  color: var(--text-main) !important;
  /* 覆盖各页面模板里 .face-search-input 的大 padding（高度来源） */
  padding: 0 !important;
  line-height: 1.2 !important;
}

.white-background-side-panel-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: auto !important;
  padding: 10px 0 18px 0 !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* 滚动条视觉隐藏：资产模板库列表区（仍可滚动） */
.white-background-side-panel-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.white-background-side-panel-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.white-background-side-panel-content .face-grid-view {
  display: grid !important;
  /* 目标：侧栏约半屏时一行能显示 4 列卡片 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 16px !important;
}

.white-background-side-panel-footer {
  padding: 18px 24px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  border-radius: 0 0 40px 40px !important;
}

/* footer bar：迁移掉 inline style */
#whiteBackgroundSidePanel .wb-panel-footer {
  padding: 16px 28px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #f9fafb !important;
  border-radius: 0 0 24px 24px !important;
}

#whiteBackgroundSidePanel .wb-panel-footer .btn-primary-lg {
  border-radius: 14px !important;
}

.white-background-side-panel-footer .btn-primary-lg {
  border-radius: 20px !important;
}

/* ========================================================================
   (2) 画布区工具栏 + 一键同款卡片（canvas-toolbar + same-img carousel）
   ======================================================================== */

.canvas-area {
  position: relative !important;
}

.canvas-toolbar {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  z-index: 40 !important;
}

.canvas-toolbar .tool-btn {
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 12px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease !important;
}

.canvas-toolbar .tool-btn:hover:not(:disabled) {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.14) !important;
  transform: translateY(-1px) !important;
}

.canvas-toolbar .tool-btn:active:not(:disabled) {
  transform: scale(0.97) !important;
}

.canvas-toolbar .tool-btn:disabled,
.canvas-toolbar .tool-btn[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.canvas-toolbar .tool-btn i {
  font-size: 18px !important;
}

.canvas-toolbar .tool-sep {
  width: 1px !important;
  height: 22px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  margin: 0 4px !important;
}

.canvas-toolbar .tool-btn .btn-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  max-width: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  margin-left: 0 !important;
  transition: max-width 0.45s ease, opacity 0.25s ease, margin-left 0.45s ease !important;
}

/* 所有按钮：默认只显示图标，悬停/键盘聚焦才展示文字 */
.canvas-toolbar .tool-btn:hover .btn-text,
.canvas-toolbar .tool-btn:focus-visible .btn-text {
  max-width: 180px !important;
  opacity: 1 !important;
  margin-left: 2px !important;
}

/* 一键同款卡片（居中玻璃卡） */
.white-background-same-img-carousel-container {
  position: absolute !important;
  inset: 0 !important;
  /* 默认不展示，交给 JS 通过切换 .d-none 控制显示 */
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 30 !important;
  /* 必须可点击：否则内部的配置/关闭/箭头按钮全部失效 */
  pointer-events: auto !important;
  background: transparent !important;
}

/* JS 会移除 .d-none 来显示；这里用更高优先级确保显示能打开/关闭 */
.white-background-same-img-carousel-container:not(.d-none) {
  display: flex !important;
}

.white-background-same-img-carousel-wrapper {
  width: min(1000px, calc(100% - 64px)) !important;
  background: rgba(255, 255, 255, 0.40) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
  border-radius: 56px !important;
  box-shadow: var(--shadow-panel) !important;
  padding: 36px 40px 28px 40px !important;
  position: relative !important;
  pointer-events: auto !important;
}

.white-background-same-img-carousel-wrapper.is-empty {
  /* 空态不要过小：保持“同款模块”存在感，但不挡住画布 */
  width: min(920px, calc(100% - 64px)) !important;
  border-radius: 32px !important;
  padding: 26px 26px 20px 26px !important;
}

.white-background-same-img-carousel-content {
  width: 100% !important;
  min-height: 360px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 92px 0 92px !important; /* 给两侧箭头留出空间 */
}

.white-background-same-img-carousel-wrapper.is-empty .white-background-same-img-carousel-content {
  min-height: 220px !important;
  padding: 0 72px 0 72px !important;
}

.same-img-empty-state {
  width: 100% !important;
  text-align: center !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.same-img-empty-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--shadow-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.same-img-empty-icon i { font-size: 18px !important; opacity: 0.9 !important; }

.same-img-empty-title {
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
  color: rgba(0, 0, 0, 0.78) !important;
}

.same-img-empty-desc {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.50) !important;
}

.white-background-same-img-carousel-item {
  width: 100% !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.white-background-same-img-images-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  margin-top: 10px !important;
}

.white-background-same-img-image-wrapper {
  width: min(240px, 26vw) !important;
  aspect-ratio: 3 / 4 !important;
  border-radius: 32px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
  position: relative !important;
}

.white-background-same-img-image-wrapper .white-background-same-img-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.white-background-same-img-label {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.35) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
}

.white-background-same-img-plus,
.white-background-same-img-equals {
  color: rgba(0, 0, 0, 0.20) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  user-select: none !important;
}

.white-background-same-img-carousel-arrow,
.white-background-same-img-carousel-config-btn,
.white-background-same-img-carousel-close-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: var(--shadow-soft) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.white-background-same-img-carousel-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
}

.white-background-same-img-carousel-arrow.white-background-same-img-carousel-prev {
  left: 18px !important;
}

.white-background-same-img-carousel-arrow.white-background-same-img-carousel-next {
  right: 18px !important;
}

.white-background-same-img-carousel-config-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 6 !important;
}

.white-background-same-img-carousel-close-btn {
  position: absolute !important;
  top: 18px !important;
  right: 70px !important;
  z-index: 6 !important;
}

.white-background-same-img-carousel-arrow:hover,
.white-background-same-img-carousel-config-btn:hover,
.white-background-same-img-carousel-close-btn:hover {
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.16) !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.white-background-same-img-apply-btn {
  height: 56px !important;
  padding: 0 48px !important;
  border-radius: 20px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: var(--shadow-glow) !important;
  font-size: 14px !important;
  letter-spacing: 0.30em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

.white-background-same-img-carousel-indicators {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 18px !important;
  z-index: 4 !important;
  display: flex !important;
  gap: 10px !important;
}

.white-background-same-img-carousel-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(var(--primary-rgb), 0.16) !important;
}

.white-background-same-img-carousel-dot.active {
  background: rgba(var(--primary-rgb), 0.85) !important;
}

/* ========================================================================
   (3) 右侧任务队列（task-queue-sidebar）
   ======================================================================== */

#taskQueueSidebar.task-queue-sidebar {
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-header-bar {
  height: 64px !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

.sidebar-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: var(--text-main) !important;
  font-weight: 500 !important;
}

.task-count-badge {
  height: 22px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  color: var(--primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border: 1px solid rgba(var(--primary-rgb), 0.10) !important;
}

.sidebar-toggle-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.50) !important;
}

.sidebar-toggle-btn:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-color: rgba(var(--primary-rgb), 0.14) !important;
}

.sidebar-content-expanded {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 16px 16px 0 16px !important; /* 底部由贴底操作栏负责，避免留白 */
  background: rgba(0, 0, 0, 0.01) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* 滚动条视觉隐藏：任务队列主滚动区 */
.sidebar-content-expanded {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-content-expanded::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.task-statistics-panel {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
  border-radius: 24px !important;
  padding: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.task-statistics-panel .statistics-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.45) !important;
  margin-bottom: 10px !important;
}

.task-statistics-panel .statistics-content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.task-statistics-panel .stat-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 18px !important;
  padding: 12px 10px !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.task-statistics-panel .stat-label {
  font-size: 10px !important;
  color: rgba(0, 0, 0, 0.35) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.task-statistics-panel .stat-value {
  margin-top: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.task-search-filter-panel {
  margin-top: 12px !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.02) !important;
  border-radius: 24px !important;
  padding: 14px !important;
}

.search-box-container {
  position: relative !important;
}

.task-search-input {
  width: 100% !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 0 14px 0 38px !important;
  font-size: 12px !important;
}

.search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(0, 0, 0, 0.25) !important;
}

.filter-controls {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.filter-select {
  height: 40px !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}

.task-list-container {
  margin-top: 12px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 2px 14px 2px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.task-list-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Task Card (任务条目) */
#taskQueueSidebar .task-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

#taskQueueSidebar .task-card:hover {
  border-color: rgba(var(--primary-rgb), 0.22) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10), 0 0 22px rgba(var(--primary-rgb), 0.06) !important;
  transform: translateY(-1px) !important;
}

#taskQueueSidebar .task-card[draggable="true"] { cursor: grab !important; }
#taskQueueSidebar .task-card[draggable="true"]:active { cursor: grabbing !important; }

#taskQueueSidebar .task-card.dragging {
  opacity: 0.55 !important;
  transform: scale(0.985) !important;
}

#taskQueueSidebar .task-card.drag-over {
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  border-width: 2px !important;
  border-style: dashed !important;
  background-color: rgba(var(--primary-rgb), 0.05) !important;
}

#taskQueueSidebar .task-card.active {
  border-color: rgba(var(--primary-rgb), 0.40) !important;
  border-width: 2px !important;
  background-color: rgba(var(--primary-rgb), 0.05) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10), 0 0 26px rgba(var(--primary-rgb), 0.10) !important;
}

#taskQueueSidebar .task-card.waiting { opacity: 0.78 !important; }
#taskQueueSidebar .task-card.completed { border-color: rgba(34, 197, 94, 0.55) !important; }
#taskQueueSidebar .task-card.failed { border-color: rgba(239, 68, 68, 0.55) !important; }

/* Task Card Header */
#taskQueueSidebar .task-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  gap: 10px !important;
}

#taskQueueSidebar .task-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#taskQueueSidebar .task-drag-handle {
  width: 22px !important;
  height: 22px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}

#taskQueueSidebar .task-name {
  font-size: 13px !important;
  font-weight: 650 !important;
  color: rgba(0, 0, 0, 0.86) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 1 !important;
  min-width: 0 !important;
}

#taskQueueSidebar .task-progress-text {
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.46) !important;
  white-space: nowrap !important;
  margin-left: 4px !important;
}

#taskQueueSidebar .task-card-actions {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

#taskQueueSidebar .task-action-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.12s ease !important;
  font-size: 12px !important;
}

#taskQueueSidebar .task-action-btn:hover {
  background-color: rgba(var(--primary-rgb), 0.06) !important;
  border-color: rgba(var(--primary-rgb), 0.18) !important;
  color: rgba(var(--primary-rgb), 0.95) !important;
  transform: translateY(-1px) !important;
}

#taskQueueSidebar .task-action-btn.danger:hover {
  background-color: rgba(239, 68, 68, 0.10) !important;
  border-color: rgba(239, 68, 68, 0.22) !important;
  color: rgba(239, 68, 68, 0.95) !important;
}

/* Task Card Progress */
#taskQueueSidebar .task-card-progress {
  margin-top: 10px !important;
}

#taskQueueSidebar .task-progress-bar {
  width: 100% !important;
  height: 4px !important;
  background-color: rgba(0, 0, 0, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
}

#taskQueueSidebar .task-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.92), rgba(var(--primary-rgb), 0.58)) !important;
  border-radius: 999px !important;
  transition: width 0.3s ease !important;
}

#taskQueueSidebar .task-progress-info {
  display: flex !important;
  justify-content: flex-end !important;
  font-size: 10px !important;
  color: rgba(0, 0, 0, 0.46) !important;
}

/* Task Thumbnails */
#taskQueueSidebar .task-thumbnails {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 4px 0 !important;
  margin-top: 8px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#taskQueueSidebar .task-thumbnails::-webkit-scrollbar { height: 0; }

#taskQueueSidebar .task-thumbnail {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  position: relative !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.15s ease, border-color 0.2s ease !important;
}

#taskQueueSidebar .task-thumbnail:hover {
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  transform: scale(1.04) !important;
}

#taskQueueSidebar .task-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

#taskQueueSidebar .task-thumbnail.generating {
  border-color: rgba(var(--primary-rgb), 0.55) !important;
  animation: tq-pulse-border 1.5s infinite;
}

#taskQueueSidebar .task-thumbnail.success { border-color: rgba(34, 197, 94, 0.70) !important; }
#taskQueueSidebar .task-thumbnail.failed { border-color: rgba(239, 68, 68, 0.70) !important; }
#taskQueueSidebar .task-thumbnail.retrying { border-color: rgba(59, 130, 246, 0.70) !important; }

@keyframes tq-pulse-border {
  0%, 100% { border-color: rgba(var(--primary-rgb), 0.65); }
  50% { border-color: rgba(var(--primary-rgb), 0.28); }
}

#taskQueueSidebar .task-thumbnail-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.55) !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 14px !important;
  border-radius: 14px !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

#taskQueueSidebar .task-thumbnail-loading {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(255, 255, 255, 0.86) !important;
}

#taskQueueSidebar .task-thumbnail-loading i {
  color: rgba(var(--primary-rgb), 0.92) !important;
}

/* Batch mode (可选：批量选择) */
#taskQueueSidebar .task-card.batch-mode { cursor: pointer !important; }
#taskQueueSidebar .task-card.batch-mode.selected {
  border-color: rgba(var(--primary-rgb), 0.45) !important;
  background: rgba(var(--primary-rgb), 0.06) !important;
}

#taskQueueSidebar .task-checkbox {
  width: 14px !important;
  height: 14px !important;
  accent-color: var(--primary) !important;
}

/* 让“展开操作”始终贴在任务队列面板底部 */
.collapsible-actions-panel {
  margin-top: auto !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
}

.tq-empty {
  padding: 34px 16px !important;
  text-align: center !important;
  color: rgba(0, 0, 0, 0.48) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
}

.tq-empty-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.03) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.tq-empty-icon i {
  font-size: 22px !important;
  color: rgba(0, 0, 0, 0.38) !important;
}

.tq-empty-title {
  font-size: 13px !important;
  font-weight: 650 !important;
  color: rgba(0, 0, 0, 0.82) !important;
  margin: 0 !important;
}

.tq-empty-desc {
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.48) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 220px !important;
}

.tq-empty-desc .tq-empty-cta {
  color: var(--primary) !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
}

/* ========================================================================
   提示词设置：默认折叠为“按钮”，hover/focus 才展开（仅 hover 设备启用）
   说明：触屏设备没有 hover，为避免无法输入，触屏保持默认展开。
   需要在提示词卡片上加 class: .prompt-settings-collapsible
   ======================================================================== */
@media (hover: hover) and (pointer: fine) {
  .prompt-settings-collapsible {
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* 默认只显示 header，且像一个按钮 */
  .prompt-settings-collapsible .section-header {
    margin: 0 !important;
    padding: 14px 18px !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.03) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .prompt-settings-collapsible .action-links {
    display: none !important;
  }

  /* 默认仅折叠“输入区”(textarea/模板状态)，说明文字默认可见（避免用户以为功能缺失） */
  .prompt-settings-collapsible textarea,
  .prompt-settings-collapsible #templateStatus {
    display: none !important;
  }

  /* 悬停/聚焦展开：恢复卡片形态 */
  .prompt-settings-collapsible:hover,
  .prompt-settings-collapsible:focus-within {
    padding: 28px !important;
    border-radius: 36px !important;
  }

  .prompt-settings-collapsible:hover .section-header,
  .prompt-settings-collapsible:focus-within .section-header {
    padding: 0 0 16px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    justify-content: space-between !important;
  }

  .prompt-settings-collapsible:hover .action-links,
  .prompt-settings-collapsible:focus-within .action-links {
    display: flex !important;
  }

  .prompt-settings-collapsible:hover textarea,
  .prompt-settings-collapsible:focus-within textarea,
  .prompt-settings-collapsible:hover .info-description,
  .prompt-settings-collapsible:focus-within .info-description,
  .prompt-settings-collapsible:hover .info-tip,
  .prompt-settings-collapsible:focus-within .info-tip,
  .prompt-settings-collapsible:hover #templateStatus,
  .prompt-settings-collapsible:focus-within #templateStatus {
    display: block !important;
  }
}

/* ========================================================================
   提示词设置：全端默认展开（不再依赖 hover 才可见）
   说明：用户反馈“文字默认隐藏、悬停才展开”易造成困惑；因此桌面端也改为默认展开。
   ======================================================================== */
@media (hover: hover) and (pointer: fine) {
  .prompt-settings-collapsible {
    padding: 28px !important;
    border-radius: 36px !important;
    overflow: visible !important;
  }

  .prompt-settings-collapsible .section-header {
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: default !important;
    justify-content: space-between !important;
  }

  .prompt-settings-collapsible .action-links {
    display: flex !important;
  }

  .prompt-settings-collapsible textarea,
  .prompt-settings-collapsible .info-description,
  .prompt-settings-collapsible .info-tip,
  .prompt-settings-collapsible #templateStatus {
    display: block !important;
  }
}

/* ========================================================================
   说明文字：全端默认可见（不依赖悬停）
   - 处理“看起来隐藏”的两类情况：display:none / 被裁切（overflow/height/max-height）
   - 只作用于左侧参数面板（control panel），避免误伤画布区的其它浮层/卡片。
   ======================================================================== */
#controlPanel .info-description,
#controlPanel .info-tip,
.control-panel .info-description,
.control-panel .info-tip {
  display: block !important;
  opacity: 1 !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* 提示词设置：兜底确保输入框默认可见（哪怕页面内联样式/旧规则仍在） */
#controlPanel .prompt-settings-collapsible textarea#prompt,
#controlPanel .prompt-settings-collapsible textarea,
#controlPanel .prompt-settings-collapsible #templateStatus,
.control-panel .prompt-settings-collapsible textarea#prompt,
.control-panel .prompt-settings-collapsible textarea,
.control-panel .prompt-settings-collapsible #templateStatus {
  display: block !important;
}

#controlPanel .prompt-settings-collapsible .action-links,
.control-panel .prompt-settings-collapsible .action-links {
  display: flex !important;
}

/* 容器兜底：避免卡片因某些旧规则被压成“只有标题行” */
#controlPanel .clean-card,
#controlPanel .param-box,
#controlPanel .param-config,
#controlPanel .config-group,
#controlPanel .settings-container,
.control-panel .clean-card,
.control-panel .param-box,
.control-panel .param-config,
.control-panel .config-group,
.control-panel .settings-container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ========================================================================
   Action Links → White Chips（白色小卡片按钮）
   目标：把 `.action-links` 里的 `.link-action` 做成更精致的“白色小卡片 chip”。
   复用方式：
   - 在需要变成 chip 的容器上加：`.weveeee-chip-actions`
   - 子项仍然复用现有：`span.link-action`（含 `.danger` 变体）
   注意：这是“按需启用”的样式，避免全局污染所有 `.action-links`。
   ======================================================================== */
.weveeee-chip-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}

.weveeee-chip-actions .link-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.22) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  color: rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  user-select: none !important;
  /* 不要把中文/按钮文案按字拆开换行（会看起来像“竖排/跑位”） */
  white-space: nowrap !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}
/* gap 已负责间距，避免叠加 bootstrap 的 ms-2 造成不一致 */
.weveeee-chip-actions .ms-2 { margin-left: 0 !important; }

.weveeee-chip-actions .link-action i {
  opacity: 0.65 !important;
}

.weveeee-chip-actions .link-action:hover {
  background: rgba(var(--primary-rgb), 0.06) !important;
  border-color: rgba(var(--primary-rgb), 0.18) !important;
  color: rgba(var(--primary-rgb), 0.95) !important;
}

.weveeee-chip-actions .link-action:active {
  transform: scale(0.98) !important;
}

.weveeee-chip-actions .link-action.danger {
  color: rgba(239, 68, 68, 0.78) !important;
}

.weveeee-chip-actions .link-action.danger:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
  color: rgba(239, 68, 68, 0.92) !important;
}

/* Mobile: hide sidebar, make main full-bleed */
@media (max-width: 768px) {
  #newSidebar.new-nav-sidebar {
    display: none !important;
  }

  #newMainContainer.new-main-container {
    border-radius: 0 !important;
  }

  #newHeaderInner.new-nav-header {
    border-radius: 0 !important;
  }
}

/* ========================================================================
   任务队列底部：展开操作 / 批量操作
   ======================================================================== */

.collapsible-actions-panel {
  margin-top: auto !important;
  /* 图1效果：嵌入式贴底栏（不做“漂浮卡片”） */
  margin-left: -16px !important;
  margin-right: -16px !important;
  padding: 12px 16px 16px 16px !important;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.92) 60%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 0 0 40px 40px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 6 !important;
}

.actions-panel-toggle {
  height: 52px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.45) !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06) !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
}

.actions-panel-toggle:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-color: rgba(var(--primary-rgb), 0.12) !important;
}

.actions-panel-content {
  padding: 12px 0 0 0 !important;
  background: transparent !important;
}

.queue-management-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.queue-action-btn {
  height: 52px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.queue-action-btn i {
  opacity: 0.85 !important;
}

.queue-action-btn:hover {
  background: rgba(0, 0, 0, 0.02) !important;
  /* 统一为“参数配置卡片”风格：不出现黑色实线边框 */
  border-color: rgba(0, 0, 0, 0.04) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(var(--primary-rgb), 0.03) !important;
  transform: translateY(-1px) !important;
}

.queue-action-btn.danger {
  color: #ef4444 !important;
}

.queue-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
}

.batch-operations-toolbar {
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--shadow-soft) !important;
  /* 强制纵向布局：避免某些页面/容器样式导致 info 与按钮“挤在同一行” */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

.batch-toolbar-info {
  /* 修复：中文在 letter-spacing + uppercase 下会显得“像错误”，且窄宽度更容易断行 */
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: rgba(0, 0, 0, 0.50) !important;
  text-align: center !important;
  margin-bottom: 10px !important;
  white-space: nowrap !important;
  width: 100% !important;
}

.batch-toolbar-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  width: 100% !important;
}

.batch-action-btn {
  height: 40px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  /* 修复：窄宽度下中文逐字换行导致“竖排/重叠” */
  white-space: nowrap !important;
  min-width: 118px !important;
}

/* 不再用 last-child：不同页面按钮数量不一致，会导致“批量复制/批量删除”误占整行 */

.batch-action-btn:hover {
  background: rgba(0, 0, 0, 0.02) !important;
}

.batch-action-btn.danger {
  color: #ef4444 !important;
}

.batch-action-btn.danger:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
}

.batch-action-btn.batch-exit-btn {
  margin-top: 10px !important;
  width: 100% !important;
  justify-content: center !important;
  /* 退出按钮需要独占一行 */
  grid-column: 1 / -1 !important;
}

/* ========================================================================
   参考图库卡片：face-card-modern + 已选缩略图 + 管理模式
   ======================================================================== */

.face-card-modern {
  position: relative !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.face-card-modern:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.10),
    0 0 0 1px rgba(var(--primary-rgb), 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.08) !important;
}

.face-card-modern.selected {
  border-color: rgba(var(--primary-rgb), 0.22) !important;
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.10), 0 18px 50px rgba(0, 0, 0, 0.10) !important;
}

.face-card-image {
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  display: block !important;
}

.face-card-body {
  padding: 10px 12px !important;
  background: #ffffff !important;
}

.face-card-name {
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  text-align: center !important;
}

.face-checkbox-modern {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.face-checkbox-modern.checked {
  border-color: rgba(var(--primary-rgb), 0.55) !important;
  background: rgba(var(--primary-rgb), 0.90) !important;
}

.face-checkbox-modern.checked::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  margin: auto !important;
  width: 10px !important;
  height: 6px !important;
  border-left: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
  transform: rotate(-45deg) !important;
  top: 7px !important;
  left: 6px !important;
}

#manageToolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
  box-shadow: var(--shadow-soft) !important;
  margin-bottom: 12px !important;
}

#manageToolbar .selected-count {
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.45) !important;
  margin-left: 10px !important;
}

.manage-btn {
  height: 36px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.manage-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--primary) !important;
}

.manage-btn-danger {
  color: #ef4444 !important;
}

.manage-btn-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
}

.manage-btn-edit:hover {
  background: rgba(var(--primary-rgb), 0.06) !important;
}

.face-card-modern.selected-for-delete {
  outline: 2px solid rgba(239, 68, 68, 0.35) !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.10), 0 18px 50px rgba(0, 0, 0, 0.10) !important;
}

#whiteBackgroundSidePanelList.manage-mode .face-checkbox-modern {
  display: none !important;
}

.white-background-selected-preview {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.white-background-selected-item {
  position: relative !important;
  width: clamp(68px, 4.8vw, 88px) !important;
  height: clamp(68px, 4.8vw, 88px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.white-background-selected-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.white-background-selected-item .remove-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.white-background-selected-item .remove-btn:hover {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

/* ========================================================================
   充值模块：rechargeModalOverlay / rechargeModal
   ======================================================================== */

#rechargeModalOverlay.recharge-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.60) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
  z-index: 10000 !important;
}

#rechargeModalOverlay.recharge-modal-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
}

#rechargeModal.recharge-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.98) !important;
  width: min(1100px, calc(100vw - 48px)) !important;
  max-height: min(90vh, 860px) !important;
  background: #ffffff !important;
  border-radius: 48px !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease !important;
  overflow: hidden !important;
  z-index: 10001 !important;
  display: flex !important;
  flex-direction: column !important;
}

#rechargeModal.recharge-modal.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.recharge-modal-close {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.03) !important;
  color: rgba(0, 0, 0, 0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.recharge-modal-close:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

.recharge-modal-header {
  padding: 44px 48px 18px 48px !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.recharge-modal-subtitle {
  margin: 0 0 10px 0 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(var(--primary-rgb), 0.9) !important;
}

.recharge-modal-title {
  margin: 0 0 10px 0 !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.02em !important;
}

.recharge-modal-desc {
  margin: 0 auto !important;
  max-width: 720px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.recharge-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 28px 48px 20px 48px !important;
}

.recharge-packages {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.recharge-package {
  position: relative !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 32px !important;
  padding: 28px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.recharge-package:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(var(--primary-rgb), 0.12) !important;
}

.recharge-package.featured {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: rgba(var(--primary-rgb), 0.35) !important;
  box-shadow: 0 40px 120px rgba(var(--primary-rgb), 0.30) !important;
  transform: translateY(-6px) scale(1.04) !important;
  z-index: 1 !important;
}

.package-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12) !important;
}

.package-name {
  margin: 0 0 20px 0 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.recharge-package.featured .package-name {
  color: rgba(255,255,255,0.55) !important;
}

.package-credits {
  font-size: 44px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-main) !important;
}

.recharge-package.featured .package-credits {
  color: #ffffff !important;
}

.package-credits-label {
  margin: 6px 0 18px 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.35) !important;
}

.recharge-package.featured .package-credits-label {
  color: rgba(255,255,255,0.55) !important;
}

.package-bonus {
  display: inline-block !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  background: rgba(34, 197, 94, 0.10) !important;
  color: #16a34a !important;
  margin-bottom: 18px !important;
}

.recharge-package.featured .package-bonus {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.9) !important;
}

.package-price-label {
  margin: auto 0 6px 0 !important;
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.recharge-package.featured .package-price-label {
  color: rgba(255,255,255,0.55) !important;
}

.package-price {
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-bottom: 16px !important;
  color: var(--text-main) !important;
}

.recharge-package.featured .package-price {
  color: #ffffff !important;
}

.package-btn {
  width: 100% !important;
  height: 48px !important;
  border-radius: 16px !important;
  border: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.package-btn-primary {
  background: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.18) !important;
}

.recharge-package.featured .package-btn-primary {
  background: #ffffff !important;
  color: var(--primary) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.18) !important;
}

.recharge-modal-footer {
  padding: 18px 48px 26px 48px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.footer-info {
  display: flex !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.footer-info-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.footer-links {
  font-size: 10px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.footer-links a {
  color: var(--primary) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

.footer-links a:hover {
  text-decoration: underline !important;
}

@media (max-width: 1100px) {
  .recharge-packages {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .recharge-modal-header,
  .recharge-modal-body,
  .recharge-modal-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .recharge-packages {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================================
   Header: 用户头像下拉菜单（#userDropdownMenu）
   ======================================================================== */

.user-dropdown-menu {
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  width: 220px !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-8px) scale(0.98) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease, transform 0.22s ease, visibility 0.18s ease !important;
  z-index: 10050 !important;
}

.user-dropdown-menu.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.user-dropdown-menu .dropdown-user-info {
  padding: 10px 12px 8px 12px !important;
}

.user-dropdown-menu .dropdown-username {
  margin: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.user-dropdown-menu .dropdown-divider {
  height: 1px !important;
  background: rgba(0, 0, 0, 0.05) !important;
  margin: 6px 2px !important;
}

.user-dropdown-menu .dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease !important;
}

.user-dropdown-menu .dropdown-item .material-icons {
  font-size: 18px !important;
  color: rgba(0, 0, 0, 0.50) !important;
}

.user-dropdown-menu .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.03) !important;
  color: var(--primary) !important;
}

.user-dropdown-menu .dropdown-item:hover .material-icons {
  color: var(--primary) !important;
}

.user-dropdown-menu .dropdown-item:active {
  transform: scale(0.98) !important;
}

.user-dropdown-menu .dropdown-item-danger {
  color: rgba(239, 68, 68, 0.85) !important;
}

.user-dropdown-menu .dropdown-item-danger .material-icons {
  color: rgba(239, 68, 68, 0.85) !important;
}

.user-dropdown-menu .dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.08) !important;
  color: #ef4444 !important;
}

.user-dropdown-menu .dropdown-item-danger:hover .material-icons {
  color: #ef4444 !important;
}

/* ========================================================================
   Canvas: 右侧生成中遮罩（#rightSideLoading.loading-overlay）
   ======================================================================== */

.loading-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: rgba(249, 249, 247, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease, visibility 0.25s ease !important;
  z-index: 60 !important;
}

.loading-overlay.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.loader-spinner {
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 3px solid rgba(var(--primary-rgb), 0.18) !important;
  border-top-color: rgba(var(--primary-rgb), 0.85) !important;
  animation: wbSpin 0.9s linear infinite !important;
}

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

/* ========================================================================
   资产模板：上传模板弹窗（#uploadTemplateModal.upload-template-modal）
   说明：原本样式在旧 <style> 里，现在统一迁移到这里。
   ======================================================================== */

.upload-template-modal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.98) !important;
  width: min(860px, calc(100vw - 48px)) !important;
  max-height: min(90vh, 860px) !important;
  background: #ffffff !important;
  border-radius: 40px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
  z-index: 10060 !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
}

.upload-template-modal::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  /* 遮罩只压背景，不要让模态内容“发灰” */
  background: rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.upload-template-modal.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.upload-template-modal.open::before {
  opacity: 1 !important;
}

.upload-template-modal-header {
  height: 72px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

.upload-template-modal-header .header-indicator {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  background: rgba(var(--primary-rgb), 0.85) !important;
  box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.10) !important;
}

.upload-template-modal-header h5 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

.upload-template-modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 20px 28px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  /* 不透明背景：避免透出背后的遮罩导致“整块灰” */
  background: #F9FAFB !important;
}

/* ========================================================================
   通用：卡片悬停动画（旧样式禁用后补回）
   ======================================================================== */

.clean-card,
.param-box,
.param-config,
.config-group,
.settings-container,
.task-statistics-panel,
.task-search-filter-panel,
.batch-operations-toolbar,
.analysis-feature-card,
.ai-feature-header,
.ai-result-card,
.white-background-same-img-carousel-wrapper,
.white-background-same-img-image-wrapper {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease !important;
}

.clean-card:hover,
.param-box:hover,
.param-config:hover,
.config-group:hover,
.settings-container:hover,
.task-statistics-panel:hover,
.task-search-filter-panel:hover,
.batch-operations-toolbar:hover,
.analysis-feature-card:hover,
.ai-feature-header:hover,
.ai-result-card:hover,
.white-background-same-img-carousel-wrapper:hover,
.white-background-same-img-image-wrapper:hover {
  transform: translateY(-1px) !important;
  /* 取消 hover 时的“线框/ring”描边：只保留轻微阴影，避免出现黑色边框感 */
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.08),
    0 0 22px rgba(var(--primary-rgb), 0.06) !important;
  border-color: rgba(0, 0, 0, 0.02) !important;
  outline: none !important;
}

/* ========================================================================
   左侧控制面板（参数配置）折叠/展开：#panelExpandBtn + #controlPanel.collapsed
   JS 逻辑：toggleControlPanel() 切换 .collapsed，并在 #panelExpandBtn 上切 .visible
   ======================================================================== */

#panelExpandBtn.panel-expand-btn {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  z-index: 70 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-50%) translateX(-6px) scale(0.98) !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease, color 0.2s ease !important;
}

#panelExpandBtn.panel-expand-btn.visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(-50%) translateX(0) scale(1) !important;
}

#panelExpandBtn.panel-expand-btn:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-color: rgba(var(--primary-rgb), 0.16) !important;
}

#controlPanel.control-panel {
  transition: flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#controlPanel.control-panel.collapsed {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-10px) !important;
}

/* ========================================================================
   右侧任务队列折叠/展开：#taskQueueSidebar.collapsed + #rightEdgeToggle.collapsed
   JS 逻辑：toggleTaskQueueSidebar() 切换 sidebar.collapsed，并在 rightEdgeToggle 上切 .collapsed
   ======================================================================== */

#taskQueueSidebar.task-queue-sidebar {
  transition: flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#taskQueueSidebar.task-queue-sidebar.collapsed {
  flex: 0 0 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(10px) !important;
}

/* 侧边栏折叠时，内部内容不渲染（避免 tab 影响布局） */
#taskQueueSidebar.task-queue-sidebar.collapsed .sidebar-content-expanded {
  display: none !important;
}

/* 右侧边缘折叠按钮：固定在 canvas-wrapper 右侧中间 */
#rightEdgeToggle.right-edge-toggle.edge-toggle-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 70 !important;
}

/* 左侧边缘折叠按钮：位置与右侧统一（垂直居中）。注意：left 不能 !important，否则 JS 设置 left 失效 */
#leftEdgeToggle.left-edge-toggle.edge-toggle-btn {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 80 !important;
  left: 80px; /* 默认在侧栏右侧；JS 会在收起时改成 0 */
  transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 默认（侧边栏展开）：箭头应指向右（表示收起到右边）——原 icon 是 chevron-left，旋转 180° */
#rightEdgeToggle.right-edge-toggle.edge-toggle-btn i {
  transform: rotate(180deg) !important;
  transition: transform 0.2s ease !important;
}

/* collapsed（侧边栏已收起）：箭头指向左（表示展开侧边栏） */
#rightEdgeToggle.right-edge-toggle.collapsed i {
  transform: rotate(0deg) !important;
}

.upload-form-group {
  margin-bottom: 16px !important;
}

.upload-form-label {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.60) !important;
  margin-bottom: 10px !important;
}

.upload-image-zone {
  height: 180px !important;
  border-radius: 28px !important;
  border: 2px dashed rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
}

.upload-image-zone:hover {
  background: rgba(var(--primary-rgb), 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.22) !important;
  transform: translateY(-1px) !important;
}

.upload-image-zone i {
  color: rgba(var(--primary-rgb), 0.65) !important;
  font-size: 26px !important;
}

.upload-template-modal-footer {
  height: 72px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

.upload-template-modal-footer .modal-btn {
  height: 44px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  color: rgba(0, 0, 0, 0.65) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.upload-template-modal-footer .modal-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.upload-template-modal-footer .modal-btn-primary {
  background: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.25) !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.18) !important;
}

.upload-template-modal-footer .modal-btn-primary:hover {
  opacity: 0.96 !important;
}

.style-tags-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.style-tag-chip {
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: rgba(0, 0, 0, 0.02) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.style-tag-chip:hover {
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-color: rgba(var(--primary-rgb), 0.16) !important;
  color: var(--primary) !important;
}

.style-tag-chip.selected {
  background: rgba(var(--primary-rgb), 0.10) !important;
  border-color: rgba(var(--primary-rgb), 0.20) !important;
  color: var(--primary) !important;
}

/* ========================================================================
   Canvas 空态（#welcomeMessage）+ 浮动控件（floating-nav / zoom-controls / edge-toggle-btn）
   ======================================================================== */

#resultViewport,
.result-viewport {
  position: relative !important;
}

#welcomeMessage {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 24px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

#welcomeMessage i {
  font-size: 54px !important;
  color: rgba(0, 0, 0, 0.18) !important;
}

#welcomeMessage h5 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

#welcomeMessage p {
  margin: 0 !important;
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.40) !important;
}

/* 同款按钮：居中而不是漂浮在右侧 */
.white-background-same-img-apply-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 22px auto 0 auto !important;
  width: fit-content !important;
}

/* floating nav (上一张/下一张) */
.floating-nav {
  position: absolute !important;
  bottom: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 55 !important;
}

.nav-action {
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease !important;
}

.nav-action:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
}

.nav-action:active {
  transform: scale(0.96) !important;
}

.nav-action.disabled {
  opacity: 0.40 !important;
  cursor: not-allowed !important;
}

.nav-info {
  min-width: 60px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

/* zoom controls */
.zoom-controls {
  position: absolute !important;
  right: 18px !important;
  bottom: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 55 !important;
}

.zoom-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 0, 0, 0.55) !important;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.zoom-btn:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-color: rgba(var(--primary-rgb), 0.16) !important;
}

.zoom-btn:active {
  transform: scale(0.96) !important;
}

/* edge toggle buttons (左右折叠) */
.edge-toggle-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.10) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(0, 0, 0, 0.50) !important;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.edge-toggle-btn:hover {
  color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.05) !important;
  border-color: rgba(var(--primary-rgb), 0.16) !important;
}

.edge-toggle-btn:active {
  transform: scale(0.96) !important;
}

/* ========================================================================
   左侧面板：图像理解（ai-* / analysis-*）
   ======================================================================== */

#tab-analysis-content.ai-layout {
  flex-direction: column !important;
  gap: 18px !important;
}

/* 仅在切换到图像理解 Tab（.active）时显示；避免“参数配置里多出图像理解内容” */
#tab-analysis-content.ai-layout.active {
  display: flex !important;
}

/* 图1：图像理解 Tab 内“已选择模板”区域按需求隐藏（避免面板噪音） */
#templateSelectionArea {
  display: none !important;
}

/* 图像理解 Tab 不在 .scroll-content 内：这里补齐与配置 Tab 一致的滚动与内边距 */
#controlPanel #tab-analysis-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 32px 32px 160px 32px !important;
}

/* 滚动条视觉隐藏：图像理解 Tab */
#controlPanel #tab-analysis-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#controlPanel #tab-analysis-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#controlPanel #tab-analysis-content .ai-history-box {
  min-height: 0 !important;
}

/* 更软的卡片边框（避免出现“黑硬边框”的观感） */
#controlPanel .clean-card,
#controlPanel .param-box,
#controlPanel .param-config,
#controlPanel .config-group,
#controlPanel .settings-container {
  border-color: rgba(0, 0, 0, 0.03) !important;
}

.ai-history-box {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* 图像理解顶部说明区：内部块之间留出间距，避免与下面卡片拥挤 */
#imageUnderstandingFeatureInfo {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin-bottom: 6px !important;
}

#imageUnderstandingPromptManagement {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.ai-template-section {
  margin-top: 6px !important;
}

.ai-result-card {
  margin-top: 6px !important;
}

.ai-feature-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 18px !important;
  border-radius: 16px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.ai-feature-header-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background: rgba(var(--primary-rgb), 0.10) !important;
  color: var(--primary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ai-feature-header-content h5 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
}

.ai-feature-header-content p {
  margin: 4px 0 0 0 !important;
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.45) !important;
}

.ai-info-card {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: rgba(var(--primary-rgb), 0.04) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.08) !important;
}

.ai-info-card i {
  margin-top: 2px !important;
  color: rgba(var(--primary-rgb), 0.65) !important;
}

.ai-info-card-text {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.ai-manage-btn {
  width: 100% !important;
  height: 44px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.65) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
}

.ai-manage-btn:hover {
  color: var(--primary) !important;
  border-color: rgba(var(--primary-rgb), 0.16) !important;
  background: rgba(var(--primary-rgb), 0.04) !important;
}

.ai-manage-hint {
  margin-top: 8px !important;
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.40) !important;
}

.ai-result-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.ai-result-header {
  height: 54px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.45) !important;
  background: transparent !important;
}

.ai-result-card > div:not(.ai-result-header) {
  padding: 14px 16px !important;
}

.ai-waiting-state {
  padding: 22px 16px !important;
  text-align: center !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
}

.ai-waiting-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 10px auto !important;
  background: rgba(var(--primary-rgb), 0.06) !important;
  color: rgba(var(--primary-rgb), 0.75) !important;
}

.ai-waiting-title {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.65) !important;
}

.ai-waiting-desc {
  margin: 6px 0 0 0 !important;
  font-size: 11px !important;
  color: rgba(0, 0, 0, 0.40) !important;
}

.analysis-content-container {
  max-height: 320px !important;
  overflow: auto !important;
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
  border-radius: 24px !important;
  padding: 16px !important;
}

/* 滚动条视觉隐藏：图像理解分析结果滚动区 */
.analysis-content-container {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.analysis-content-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ========================================================================
   图1：资产模板库（白底抽屉）顶部区域拥挤/错位修复
   - 统一 header / 第二行（公开/内部+添加模板）/ 风格标签 / 管理工具栏的间距
   ======================================================================== */

/* header 标题两行：增加行距与间距 */
#whiteBackgroundSidePanel .white-background-side-panel-header p {
  margin: 4px 0 0 0 !important;
  line-height: 1.2 !important;
  opacity: 0.55 !important;
}

/* 资产模板库 header icon/title（迁移掉 inline style） */
#whiteBackgroundSidePanel .wb-panel-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary) !important;
}

#whiteBackgroundSidePanel .wb-panel-icon i {
  font-size: 16px !important;
  color: var(--primary) !important;
}

#whiteBackgroundSidePanel .wb-panel-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
  margin: 0 !important;
}

#whiteBackgroundSidePanel .wb-panel-subtitle {
  font-size: 11px !important;
  color: #4b5563 !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* header 下一行（公开/内部 + 添加模板）：去掉 inline 的“拥挤感”，统一成固定高度 */
#whiteBackgroundSidePanel .white-background-side-panel-header + div {
  height: 76px !important;
  padding: 14px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* 同上：第二行容器（迁移掉 inline style） */
#whiteBackgroundSidePanel .wb-panel-topbar {
  height: 76px !important;
  padding: 14px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* 风格标签行：与上下块拉开间距 */
#styleTagsFilter.white-background-tabs {
  padding: 12px 28px !important;
  margin: 0 0 10px 0 !important;
  gap: 10px !important;
}

/* 管理工具栏：增加上下间距 + 可换行，避免左右按钮/文字挤在一行 */
#manageToolbar.manage-toolbar {
  margin: 6px 0 12px 0 !important;
  flex-wrap: wrap !important;
}

#manageToolbar .manage-toolbar-left,
#manageToolbar .manage-toolbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

#manageToolbar .selected-count {
  font-size: 11px !important;
  line-height: 1.3 !important;
  margin-left: 2px !important;
}

/* ========================================================================
   图2：白底图轮播配置模态（Bootstrap modal）套用 merged_ui 的新模态语言
   ======================================================================== */

#whiteBackgroundSameImgConfigModal .modal-dialog {
  max-width: 1100px !important;
}

#whiteBackgroundSameImgConfigModal .modal-content {
  border: none !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.12) !important;
  height: min(860px, 86vh) !important;
  display: flex !important;
  flex-direction: column !important;
}

#whiteBackgroundSameImgConfigModal .modal-header {
  height: 80px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#whiteBackgroundSameImgConfigModal .modal-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

#whiteBackgroundSameImgConfigModal .btn-close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  opacity: 1 !important;
}

#whiteBackgroundSameImgConfigModal .btn-close:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.12) !important;
}

#whiteBackgroundSameImgConfigModal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 22px 32px 22px 32px !important;
  background: #F9FAFB !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#whiteBackgroundSameImgConfigModal .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 标题/分组文字：增加上下间距，避免“太拥挤” */
#whiteBackgroundSameImgConfigModal h6 {
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}

#whiteBackgroundSameImgConfigModal hr {
  border-color: rgba(0, 0, 0, 0.04) !important;
  margin: 4px 0 8px 0 !important;
}

/* 现有配置列表：把 bootstrap card 变成和参数卡片一致的“软卡片” */
#whiteBackgroundSameImgConfigModal .card {
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: var(--shadow-soft) !important;
  overflow: hidden !important;
}

#whiteBackgroundSameImgConfigModal .card-body {
  padding: 16px 18px !important;
}

#whiteBackgroundSameImgConfigModal .card .small.text-muted {
  margin-top: 6px !important;
  line-height: 1.4 !important;
}

/* 模态内上传区：覆盖 inline 的“黑硬虚线框”，对齐整体风格 */
#whiteBackgroundSameImgConfigModal .upload-zone {
  border: 2px dashed rgba(0, 0, 0, 0.08) !important;
  border-radius: 24px !important;
  padding: 18px !important;
  background: rgba(0, 0, 0, 0.01) !important;
}

#whiteBackgroundSameImgConfigModal .modal-footer {
  height: 80px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

#whiteBackgroundSameImgConfigModal .modal-footer .btn {
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
}

#whiteBackgroundSameImgConfigModal .modal-footer .btn-primary {
  background: var(--primary) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.20) !important;
  box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb), 0.25) !important;
}

#whiteBackgroundSameImgConfigModal .modal-footer .btn-secondary {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* ========================================================================
   图像理解提示词管理模态（imageUnderstandingPromptModal）— 对齐新模态语言
   ======================================================================== */

#imageUnderstandingPromptModal .modal-dialog {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#imageUnderstandingPromptModal .modal-content {
  border: none !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.12) !important;
  height: min(860px, 86vh) !important;
  display: flex !important;
  flex-direction: column !important;
}

#imageUnderstandingPromptModal .modal-header {
  height: 80px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#imageUnderstandingPromptModal .modal-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

#imageUnderstandingPromptModal .btn-close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  opacity: 1 !important;
}

#imageUnderstandingPromptModal .btn-close:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.12) !important;
}

#imageUnderstandingPromptModal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 22px 32px 22px 32px !important;
  background: #F9FAFB !important;
  overflow: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#imageUnderstandingPromptModal .modal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#imageUnderstandingPromptModal .form-label {
  margin-bottom: 10px !important;
}

/* 大文本区：用新皮肤的输入框风格，并在模态内自适应高度 */
#imageUnderstandingPromptModal #imageUnderstandingPromptText.form-control {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 16px 18px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  resize: none !important;
}

#imageUnderstandingPromptModal #imageUnderstandingPromptText.form-control:focus {
  border-color: rgb(var(--primary-rgb) / 0.18) !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08) !important;
  outline: none !important;
}

#imageUnderstandingPromptModal .form-text,
#imageUnderstandingPromptModal .text-muted {
  line-height: 1.4 !important;
}

#imageUnderstandingPromptModal .modal-footer {
  height: 80px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

#imageUnderstandingPromptModal .modal-footer .btn {
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
}

#imageUnderstandingPromptModal .modal-footer .btn-primary {
  background: var(--primary) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.20) !important;
  box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb), 0.25) !important;
}

#imageUnderstandingPromptModal .modal-footer .btn-secondary {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

/* ========================================================================
   配置轮播：选择白底参考图（Bootstrap modal）套用 merged_ui 的新模态语言
   HTML: #configWhiteBackgroundReferenceModal
   ======================================================================== */

#configWhiteBackgroundReferenceModal .modal-dialog {
  max-width: min(1240px, 92vw) !important;
}

#configWhiteBackgroundReferenceModal .modal-content {
  border: none !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.12) !important;
  height: min(860px, 86vh) !important;
  display: flex !important;
  flex-direction: column !important;
}

#configWhiteBackgroundReferenceModal .modal-header {
  height: 80px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#configWhiteBackgroundReferenceModal .modal-title {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--text-main) !important;
}

#configWhiteBackgroundReferenceModal .modal-title i {
  color: var(--primary) !important;
}

#configWhiteBackgroundReferenceModal .btn-close {
  width: 44px !important;
  height: 44px !important;
  border-radius: 18px !important;
  background-color: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  opacity: 1 !important;
}

#configWhiteBackgroundReferenceModal .btn-close:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(var(--primary-rgb), 0.12) !important;
}

#configWhiteBackgroundReferenceModal .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #F9FAFB !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 搜索条块：复用 p-4 bg-white border-bottom 的结构，但统一成新模态语言 */
#configWhiteBackgroundReferenceModal .modal-body > .p-4.bg-white.border-bottom {
  padding: 18px 32px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

#configWhiteBackgroundReferenceModal .input-group-text {
  height: 44px !important;
  border-radius: 16px 0 0 16px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-right: 0 !important;
  background: #ffffff !important;
  padding: 0 14px !important;
}

#configWhiteBackgroundReferenceModal input#configWhiteBackgroundReferenceSearch.form-control {
  height: 44px !important;
  border-radius: 0 16px 16px 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-left: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
  font-size: 12px !important;
}

#configWhiteBackgroundReferenceModal input#configWhiteBackgroundReferenceSearch.form-control:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.08) !important;
}

#configWhiteBackgroundReferenceGrid.face-grid-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 18px 32px 26px 32px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#configWhiteBackgroundReferenceGrid.face-grid-view::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#configWhiteBackgroundReferenceModal .modal-footer {
  height: 80px !important;
  padding: 0 32px !important;
  border: 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

#configWhiteBackgroundReferenceModal .modal-footer .btn {
  height: 44px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 0 16px !important;
}

#configWhiteBackgroundReferenceModal .modal-footer .btn-primary {
  background: var(--primary) !important;
  border: 1px solid rgba(var(--primary-rgb), 0.20) !important;
  box-shadow: 0 10px 30px -10px rgba(var(--primary-rgb), 0.25) !important;
}

#configWhiteBackgroundReferenceModal .modal-footer .btn-secondary {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

#confirmConfigWhiteBackgroundReferenceBtn[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

/* ========================================================================
   左侧参数面板：已选择模板缩略图预览（选择模板后图片过大修复）
   HTML: #selectedWhiteBackgroundsPreview.selected-whitebg-preview
   Items: .selected-whitebg-item > img + .selected-whitebg-remove
   ======================================================================== */

.selected-whitebg-preview {
  /* display 由 inline/JS 控制，避免空态也占位 */
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 12px !important;
  max-width: 100% !important;
}

.selected-whitebg-item {
  position: relative !important;
  width: clamp(78px, 5.2vw, 96px) !important;
  height: clamp(78px, 5.2vw, 96px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  box-shadow: var(--shadow-soft) !important;
  flex: 0 0 auto !important;
}

.selected-whitebg-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.selected-whitebg-remove {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  color: rgba(0, 0, 0, 0.55) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10) !important;
  cursor: pointer !important;
}

.selected-whitebg-remove:hover {
  background: rgba(239, 68, 68, 0.10) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.18) !important;
}

.selected-whitebg-more {
  height: clamp(78px, 5.2vw, 96px) !important;
  min-width: clamp(78px, 5.2vw, 96px) !important;
  border-radius: 18px !important;
  border: 1px dashed rgba(0, 0, 0, 0.08) !important;
  background: rgba(0, 0, 0, 0.01) !important;
  color: rgba(0, 0, 0, 0.45) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

.analysis-content {
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: rgba(0, 0, 0, 0.60) !important;
}

.analysis-content h1,
.analysis-content h2,
.analysis-content h3,
.analysis-content h4,
.analysis-content h5,
.analysis-content h6 {
  font-weight: 800 !important;
  color: rgba(0, 0, 0, 0.72) !important;
  margin: 14px 0 8px 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

.analysis-content ul,
.analysis-content ol {
  margin: 8px 0 10px 18px !important;
  padding: 0 !important;
}

.analysis-content li {
  margin: 6px 0 !important;
}

.analysis-features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.analysis-feature-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.analysis-feature-card .feature-card-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  color: rgba(var(--primary-rgb), 0.85) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.analysis-feature-card .feature-card-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0, 0, 0, 0.62) !important;
}

/* ========================================================================
   Image Preview Modal (统一：上传图片/缩略图点击预览)
   目标：替换各页面“黑底 + 乱按钮”的旧样式，统一为 weveeee 玻璃弹窗风格
   影响：tushengtu / mot_action / AIzishi / zhutu / changjing / buy_changjing / mot_chage_cholce / compose 等
   ======================================================================== */

.image-preview-modal .modal-dialog {
  max-width: min(1100px, 92vw) !important;
  margin: 1.75rem auto !important;
}

.image-preview-modal .modal-content {
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18) !important;
}

.image-preview-modal .modal-header {
  height: 56px !important;
  padding: 0 18px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.image-preview-modal .modal-title {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(0, 0, 0, 0.55) !important;
}

.image-preview-modal .btn-close,
.image-preview-modal .btn-close.btn-close-white {
  filter: none !important;
  opacity: 0.55 !important;
}
.image-preview-modal .btn-close:hover,
.image-preview-modal .btn-close.btn-close-white:hover {
  opacity: 0.85 !important;
}

.image-preview-modal .modal-body {
  padding: 16px 18px 18px 18px !important;
  background: transparent !important;
}

.image-preview-modal .image-preview-wrapper {
  position: relative !important;
  width: 100% !important;
  height: min(70vh, 680px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(45, 19, 80, 0.25), transparent 55%),
              radial-gradient(900px 450px at 90% 20%, rgba(45, 19, 80, 0.20), transparent 55%),
              #0b0b12 !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.image-preview-modal .image-preview-wrapper img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  transform-origin: center center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  user-select: none !important;
  cursor: grab !important;
  transition: transform 0.05s ease-out !important;
}
.image-preview-modal .image-preview-wrapper img.grabbing {
  cursor: grabbing !important;
}

.image-preview-modal .image-preview-hint {
  position: absolute !important;
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.image-preview-modal .image-preview-controls {
  position: absolute !important;
  bottom: 12px !important;
  right: 12px !important;
  display: flex !important;
  gap: 10px !important;
}

.image-preview-modal .image-preview-controls button,
.image-preview-modal .image-preview-controls .btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.30) !important;
  transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease !important;
}

.image-preview-modal .image-preview-controls button:hover,
.image-preview-modal .image-preview-controls .btn:hover {
  transform: translateY(-1px) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
}

.image-preview-modal .image-preview-controls button:active,
.image-preview-modal .image-preview-controls .btn:active {
  transform: translateY(0) scale(0.98) !important;
}

#newMainContainer :is(*, *::before, *::after) {
  border-color: transparent !important;
}