/* ==========================================================================
   OPC社区 · AI 商品套图 / A+详情页 / 图片工具箱  浅色「大气」主题覆盖
   参照 /ai/video（AiVideoStudio）的视觉语言：浅灰底 + 白卡 + 柔和阴影 + 靛紫渐变主按钮
   仅作用于 .ec-page 容器，不影响其它页面；删除本文件引用即可完全还原。
   ========================================================================== */

/* ---------- 0. 页面底色 & 去掉深色视频背景 ---------- */
.ec-page {
  background: #f6f7fb !important;
  color: #1f2329 !important;
  background-image: none !important;
}
.ec-page .ai-dynamic-bg { display: none !important; }
.ec-page .aidb-video, .ec-page .aidb-veil, .ec-page .aidb-aurora,
.ec-page .aidb-orb, .ec-page .aidb-grid { display: none !important; }

/* ---------- 1. 顶部导航 ---------- */
.ec-page .ec-nav {
  background: #ffffffeb !important;
  border-bottom: 1px solid #ececf4 !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  padding: 14px 28px !important;
}
.ec-page .ec-nav-links a { color: #6b7280 !important; border-radius: 10px !important; }
.ec-page .ec-nav-links a:hover { color: #1f2329 !important; background: #f2f3f8 !important; }
.ec-page .ec-nav-links a.active {
  color: #4f46e5 !important;
  background: rgba(99, 102, 241, .1) !important;
  font-weight: 600 !important;
}
.ec-page .ec-key-ok { color: #16a34a !important; background: #e8f7ef !important; }
.ec-page .ec-key-warn { color: #b45309 !important; background: #fef4e6 !important; }
.ec-page .ec-login-btn {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, .3) !important;
}
.ec-page .ec-login-btn:hover { box-shadow: 0 10px 28px rgba(99, 102, 241, .4) !important; }

/* ---------- 2. 主容器 / 面板：白卡 + 柔和阴影 ---------- */
.ec-page .ec-main { max-width: 1320px !important; gap: 24px !important; margin-top: 28px !important; }
.ec-page .ec-sub-pane { max-width: 1320px !important; }
.ec-page .ec-settings,
.ec-page .ec-results,
.ec-page .edp-settings,
.ec-page .edp-stage,
.ec-page .eit-panel,
.ec-page .eit-stage {
  background: #ffffff !important;
  border: 1px solid #ececf4 !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 24px rgba(20, 26, 51, .06) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.ec-page .ec-settings { padding: 26px 28px !important; }
.ec-page .ec-results,
.ec-page .eit-stage { min-height: 460px !important; }

/* ---------- 3. 文字层级 ---------- */
.ec-page .ec-title,
.ec-page .ec-section-title,
.ec-page .ec-results-head h2,
.ec-page .ec-cases-title,
.ec-page .edp-title,
.ec-page .edp-section-title,
.ec-page .edp-stage-head h3,
.ec-page .edp-modules-title,
.ec-page .edp-recent-title,
.ec-page .eit-panel-title,
.ec-page .eit-name,
.ec-page .eit-empty h3,
.ec-page .eit-loading h3,
.ec-page .eit-text-title { color: #1f2329 !important; }
.ec-page .ec-title { font-size: 26px !important; }
.ec-page .ec-tip,
.ec-page .ec-tip b,
.ec-page .ec-count,
.ec-page .ec-optional,
.ec-page .ec-results-sub,
.ec-page .ec-gen-sub,
.ec-page .ec-ai-note,
.ec-page .ec-recent-sub,
.ec-page .edp-sub,
.ec-page .edp-stage-sub,
.ec-page .edp-opt,
.ec-page .edp-count,
.ec-page .edp-module-desc,
.ec-page .edp-recent-sub,
.ec-page .edp-recent-none,
.ec-page .eit-desc,
.ec-page .eit-hint,
.ec-page .eit-empty p,
.ec-page .eit-loading p,
.ec-page .eit-result-tag { color: #6b7280 !important; }
.ec-page .ec-tip b { color: #4f46e5 !important; }

/* ---------- 4. 输入区 ---------- */
.ec-page .ec-info-box,
.ec-page .edp-info-box {
  background: #f8f9fc !important;
  border: 1px solid #e7e9f2 !important;
  border-radius: 14px !important;
}
.ec-page .ec-info-input,
.ec-page .edp-info-input { color: #1f2329 !important; }
.ec-page .ec-info-input::placeholder,
.ec-page .edp-info-input::placeholder { color: #9aa0b0 !important; }
.ec-page .ec-info-foot,
.ec-page .edp-info-foot { border-top: 1px solid #ececf4 !important; }
.ec-page .ec-ai-write,
.ec-page .edp-ai-write {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, .28) !important;
}

/* ---------- 5. 选项：组图方式 / 目标市场 / 分辨率 ---------- */
.ec-page .ec-pill,
.ec-page .ec-res {
  background: #f8f9fc !important;
  border: 1px solid #e7e9f2 !important;
  color: #4b5563 !important;
  border-radius: 12px !important;
}
.ec-page .ec-pill:hover,
.ec-page .ec-res:hover { border-color: #c7c9f7 !important; }
.ec-page .ec-pill.active {
  background: rgba(99, 102, 241, .1) !important;
  border-color: #6366f1 !important;
  color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.ec-page .ec-res.active {
  background: rgba(168, 85, 247, .1) !important;
  border-color: #a855f7 !important;
  color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .12) !important;
}

/* ---------- 6. 组图样式卡片 ---------- */
.ec-page .ec-style {
  background: #f8f9fc !important;
  border: 1px solid #e7e9f2 !important;
  border-radius: 14px !important;
}
.ec-page .ec-style:hover { border-color: #d9b8f7 !important; }
.ec-page .ec-style.active {
  background: rgba(168, 85, 247, .09) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .12) !important;
}
.ec-page .ec-style-name { color: #4b5563 !important; }
.ec-page .ec-style-badge {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
}
.ec-page .ec-add-style {
  background: rgba(99, 102, 241, .1) !important;
  border: 1px solid rgba(99, 102, 241, .35) !important;
  color: #4f46e5 !important;
}
.ec-page .ec-add-style:hover { background: rgba(99, 102, 241, .18) !important; }

/* ---------- 7. 上传位 ---------- */
.ec-page .ec-upload-item,
.ec-page .ec-upload-slot,
.ec-page .edp-up-item,
.ec-page .edp-up-slot,
.ec-page .eit-upload {
  background: #fafbff !important;
  border: 1.5px dashed #d9dcea !important;
  border-radius: 14px !important;
}
.ec-page .ec-upload-slot:hover,
.ec-page .edp-up-slot:hover,
.ec-page .eit-upload:hover {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, .06) !important;
}
.ec-page .ec-plus,
.ec-page .edp-plus,
.ec-page .eit-upload-ico { color: #9aa0b0 !important; }
.ec-page .eit-upload-text { color: #6b7280 !important; }

/* ---------- 8. 主按钮 ---------- */
.ec-page .ec-generate-btn,
.ec-page .edp-gen,
.ec-page .eit-gen {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
  box-shadow: 0 10px 26px rgba(99, 102, 241, .3) !important;
  border-radius: 14px !important;
}
.ec-page .ec-generate-btn:hover:not(:disabled),
.ec-page .edp-gen:hover:not(:disabled),
.ec-page .eit-gen:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(99, 102, 241, .4) !important;
}

/* ---------- 9. 空态 / 生成中 / 进度 ---------- */
.ec-page .ec-empty-art,
.ec-page .edp-empty-art,
.ec-page .eit-empty-art { opacity: .95; }
.ec-page .ec-generating p,
.ec-page .edp-loading p,
.ec-page .eit-loading p { color: #6b7280 !important; }
.ec-page .ec-spinner,
.ec-page .edp-spinner,
.ec-page .eit-spinner { border-color: #ececf4 !important; border-top-color: #6366f1 !important; }
.ec-page .ec-progress,
.ec-page .edp-progress { background: #ececf4 !important; }
.ec-page .ec-progress-fill,
.ec-page .edp-progress-fill {
  background: linear-gradient(90deg, #6366f1, #a855f7) !important;
}

/* ---------- 10. 结果区 / 案例 ---------- */
.ec-page .ec-result-card,
.ec-page .eit-result-card,
.ec-page .edp-recent-card {
  background: #ffffff !important;
  border: 1px solid #ececf4 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(20, 26, 51, .05) !important;
}
.ec-page .ec-result-media { background: #f1f2f6 !important; }
.ec-page .eit-result-img { background: #f1f2f6 !important; }
.ec-page .ec-dl,
.ec-page .eit-mini-btn {
  background: #f4f5f9 !important;
  border: 1px solid #e7e9f2 !important;
  color: #4b5563 !important;
}
.ec-page .ec-dl:hover,
.ec-page .eit-mini-btn:hover { background: #eceef5 !important; color: #1f2329 !important; }
.ec-page .ec-save,
.ec-page .ec-op-btn.primary,
.ec-page .edp-op-btn.primary {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
}
.ec-page .ec-op-btn,
.ec-page .edp-op-btn {
  background: #f4f5f9 !important;
  border: 1px solid #e7e9f2 !important;
  color: #4b5563 !important;
}
.ec-page .ec-op-btn:hover,
.ec-page .edp-op-btn:hover { background: #eceef5 !important; color: #1f2329 !important; }
.ec-page .ec-case {
  border: 1px solid #ececf4 !important;
  background: #f8f9fc !important;
  border-radius: 14px !important;
}
.ec-page .ec-case:hover { box-shadow: 0 12px 26px rgba(20, 26, 51, .12) !important; }
.ec-page .ec-case-imgempty {
  background: linear-gradient(135deg, #eef1ff, #f7f0ff) !important;
}
.ec-page .ec-case-name {
  background: linear-gradient(transparent, rgba(17, 24, 39, .72)) !important;
}
.ec-page .ec-cases { margin-top: 26px !important; }

/* ---------- 11. Element Plus 组件 ---------- */
.ec-page .el-input__wrapper,
.ec-page .el-textarea__inner,
.ec-page .el-select__wrapper {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
.ec-page .el-input__inner,
.ec-page .el-textarea__inner { color: #1f2329 !important; }
.ec-page .el-input__inner::placeholder,
.ec-page .el-textarea__inner::placeholder { color: #9aa0b0 !important; }
.ec-page .ec-dialog .el-dialog {
  background: #ffffff !important;
  border: 1px solid #ececf4 !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(20, 26, 51, .18) !important;
}
.ec-page .ec-dialog .el-dialog__title { color: #1f2329 !important; }

/* ---------- 12. 发布弹窗 / 账号列表 ---------- */
.ec-page .form-item label { color: #6b7280 !important; }
.ec-page .account-list { color: #4b5563 !important; }
.ec-page .no-account { color: #b45309 !important; background: #fef4e6 !important; }
.ec-page .ec-cancel {
  background: #f4f5f9 !important;
  border: 1px solid #e7e9f2 !important;
  color: #4b5563 !important;
}
.ec-page .ec-confirm {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
}
.ec-page .publish-media { background: #f1f2f6 !important; }

/* ---------- 13. 图片工具箱（eit-*）文字 ---------- */
.ec-page .eit-card {
  background: #ffffff !important;
  border: 1px solid #ececf4 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(20, 26, 51, .05) !important;
}
.ec-page .eit-card:hover { border-color: #c7c9f7 !important; }
.ec-page .eit-card.active {
  background: rgba(99, 102, 241, .08) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.ec-page .eit-card .eit-name { color: #1f2329 !important; }
.ec-page .eit-panel-title { border-bottom: 1px solid #ececf4 !important; }
.ec-page .eit-form-item label { color: #6b7280 !important; }
.ec-page .eit-preset-tag { color: #4f46e5 !important; }
.ec-page .eit-text-body {
  background: #f8f9fc !important;
  border: 1px solid #ececf4 !important;
  color: #374151 !important;
}
.ec-page .eit-ghost {
  background: #f4f5f9 !important;
  border: 1px solid #e7e9f2 !important;
  color: #4b5563 !important;
}
.ec-page .eit-primary {
  background: linear-gradient(135deg, #6366f1, #a855f7) !important;
}

/* ---------- 14. 详情页（edp-*）文字 ---------- */
.ec-page .edp-form-item label { color: #6b7280 !important; }
.ec-page .edp-module {
  background: #f8f9fc !important;
  border: 1px solid #e7e9f2 !important;
  border-radius: 12px !important;
}
.ec-page .edp-module:hover { border-color: #c7c9f7 !important; }
.ec-page .edp-module.active {
  background: rgba(99, 102, 241, .09) !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .12) !important;
}
.ec-page .edp-module-name { color: #1f2329 !important; }
.ec-page .edp-agree,
.ec-page .edp-agree-link,
.ec-page .ec-agree-label,
.ec-page .ec-agree-link { color: #6b7280 !important; }
.ec-page .edp-agree-link,
.ec-page .ec-agree-link { color: #4f46e5 !important; }
.ec-page .edp-module-card { background: #ffffff !important; border: 1px solid #ececf4 !important; }
.ec-page .edp-module-card-name { color: #4b5563 !important; }
.ec-page .edp-module-card-dl { color: #6366f1 !important; }
.ec-page .edp-long-wrap { border: 1px solid #ececf4 !important; border-radius: 14px !important; }
.ec-page .edp-recent-empty { background: linear-gradient(135deg, #eef1ff, #f7f0ff) !important; }