/* =====================================================
   暗色模式（默认）— html.dark 或无类名时生效
   ===================================================== */
:root,
html.dark {
  --bg-page:       #0f0f12;
  --bg-card:       #18181b;
  --bg-inner:      #1c1c1e;
  --bg-hover:      #27272a;
  --border-color:  #27272a;
  --border-muted:  #3f3f46;
  --text-primary:  #e4e4e7;
  --text-bright:   #fafafa;
  --text-muted:    #a1a1aa;
  --text-subtle:   #71717a;
  --text-faint:    #52525b;
  --shadow:        0 2px 12px rgba(0,0,0,.4);
}

/* =====================================================
   亮色模式 — html.light 时生效
   ===================================================== */
html.light {
  --bg-page:       #f4f4f5;
  --bg-card:       #ffffff;
  --bg-inner:      #fafafa;
  --bg-hover:      #f0f0f1;
  --border-color:  #e4e4e7;
  --border-muted:  #d4d4d8;
  --text-primary:  #18181b;
  --text-bright:   #09090b;
  --text-muted:    #52525b;
  --text-subtle:   #71717a;
  --text-faint:    #a1a1aa;
  --shadow:        0 2px 12px rgba(0,0,0,.08);
}

/* ── 通用基础 ── */
html, body, #app, .app {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

/* ── 各页面结构 ── */
html.light .film-list,
html.light .film-create,
html.light .drama-detail,
html.light .drama-canvas-page {
  background: var(--bg-page);
  color: var(--text-primary);
}

/* header */
html.light .header {
  background: var(--bg-card) !important;
  border-bottom-color: var(--border-color) !important;
}
html.light .logo { color: var(--text-bright) !important; }
html.light .page-title { color: var(--text-muted) !important; }

/* card / section */
html.light .card,
html.light .section.card {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html.light .section-title { color: var(--text-bright) !important; }

/* project card (FilmList) */
html.light .project-card {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}
html.light .project-card:hover { border-color: var(--el-color-primary) !important; }
html.light .project-title { color: var(--text-bright) !important; }
html.light .project-desc { color: var(--text-muted) !important; }
html.light .project-meta { color: var(--text-faint) !important; }

/* episode card */
html.light .episode-card {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}
html.light .episode-title { color: var(--text-bright) !important; }
html.light .episode-num,
html.light .episode-preview { color: var(--text-muted) !important; }

/* quick-nav */
html.light .quick-nav {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html.light .nav-item:hover { background: var(--bg-hover) !important; }
html.light .nav-label { color: var(--text-primary) !important; }
html.light .nav-sub-item:hover { background: var(--bg-hover) !important; }

/* asset / library items */
html.light .asset-cover {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}
html.light .library-item {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}
html.light .library-item-name { color: var(--text-bright) !important; }
html.light .library-item-desc { color: var(--text-muted) !important; }
html.light .library-empty { color: var(--text-subtle) !important; }

/* storyboard */
html.light .sb-card,
html.light .storyboard-row {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html.light .sb-panel {
  border-color: var(--border-color) !important;
}
html.light .sb-panel-title { color: var(--text-bright) !important; }
html.light .sb-video-placeholder {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}

/* collapse / blocks */
html.light .resource-block,
html.light .block-header {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}

/* textarea / input overrides */
html.light .story-textarea textarea {
  background: var(--bg-inner) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* progress / pipeline */
html.light .pipeline-panel {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
}
html.light .pipeline-error-item { color: #dc2626 !important; }

/* ── Element Plus 亮色覆盖 ── */
html.light {
  --el-bg-color: var(--bg-card);
  --el-bg-color-page: var(--bg-page);
  --el-bg-color-overlay: var(--bg-card);
  --el-text-color-primary: var(--text-primary);
  --el-text-color-regular: var(--text-primary);
  --el-text-color-secondary: var(--text-muted);
  --el-text-color-placeholder: var(--text-faint);
  --el-border-color: var(--border-color);
  --el-border-color-light: var(--border-muted);
  --el-border-color-lighter: var(--border-muted);
  --el-fill-color: var(--bg-inner);
  --el-fill-color-blank: var(--bg-card);
  --el-fill-color-light: var(--bg-hover);
  --el-fill-color-lighter: var(--bg-hover);
  --el-mask-color: rgba(255,255,255,.7);
}

html.light .el-card,
html.light .el-dialog {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.light .el-dialog__header { border-bottom-color: var(--border-color) !important; }
html.light .el-dialog__title { color: var(--text-bright) !important; }

html.light .el-input__wrapper,
html.light .el-textarea,
html.light .el-textarea__wrapper {
  background: var(--bg-inner) !important;
  box-shadow: 0 0 0 1px var(--border-color) !important;
}
html.light .el-input__inner,
html.light .el-textarea__inner {
  background: transparent !important;
  color: var(--text-primary) !important;
}

html.light .el-select-dropdown {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html.light .el-select-dropdown__item { color: var(--text-primary) !important; }
html.light .el-select-dropdown__item.hover,
html.light .el-select-dropdown__item:hover { background: var(--bg-hover) !important; }

html.light .el-collapse-item__header,
html.light .el-collapse-item__wrap {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

html.light .el-table,
html.light .el-table__header-wrapper,
html.light .el-table tr {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}
html.light .el-table td,
html.light .el-table th { border-color: var(--border-color) !important; }

html.light .el-pagination { color: var(--text-primary) !important; }
html.light .el-pager li { background: var(--bg-inner) !important; color: var(--text-primary) !important; }

html.light .el-radio-button__inner {
  background: var(--bg-inner) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.light .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: var(--el-color-primary) !important;
  color: #fff !important;
}

html.light .el-message-box {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
html.light .el-message-box__title { color: var(--text-bright) !important; }
html.light .el-message-box__content { color: var(--text-primary) !important; }

/* 标签、小字 */
html.light span, html.light label, html.light p {
  color: inherit;
}

/* AI 配置字段帮助提示框 */
.cfg-tip-popper.el-popper {
  max-width: 300px;
}
.cfg-tip-content {
  font-size: 12px;
  line-height: 1.7;
}

/* =====================================================
   亮色模式增强 — 更现代的视觉效果
   ===================================================== */

/* 主色改为紫色系 */
html.light {
  --el-color-primary: #7c3aed;
  --el-color-primary-light-3: #a78bfa;
  --el-color-primary-light-5: #c4b5fd;
  --el-color-primary-light-7: #ddd6fe;
  --el-color-primary-light-8: #ede9fe;
  --el-color-primary-light-9: #f5f3ff;
  --el-color-primary-dark-2: #6d28d9;
}

/* 卡片升级 */
html.light .card,
html.light .el-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important;
  border-color: #e8e8ef !important;
  border-radius: 14px !important;
}

/* 页面标题区美化 */
html.light .header {
  background: linear-gradient(135deg, #ffffff 0%, #faf9ff 100%) !important;
  border-bottom: 1px solid #e8e8ef !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.05) !important;
}

/* Logo 加紫色渐变 */
html.light .logo {
  background: linear-gradient(135deg, #7c3aed, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* 项目卡片美化 */
html.light .project-card {
  background: #ffffff !important;
  border: 1px solid #e8e8ef !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.04) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
html.light .project-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(124,58,237,.12), 0 12px 32px rgba(124,58,237,.06) !important;
  border-color: #a78bfa !important;
}

/* 操作卡片（快速开始）美化 */
html.light .action-card {
  background: linear-gradient(135deg, #faf5ff 0%, #f5f3ff 100%) !important;
  border: 2px dashed #c4b5fd !important;
}
html.light .action-card:hover {
  border-color: #a78bfa !important;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important;
}
html.light .action-card-title {
  color: #7c3aed !important;
}

/* Section card 美化 */
html.light .section.card {
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.03) !important;
}

/* 资源库 library-item 美化 */
html.light .library-item {
  background: #fafafa !important;
  border: 1px solid #ebebf0 !important;
  border-radius: 10px !important;
  transition: box-shadow 0.15s, border-color 0.15s !important;
}
html.light .library-item:hover {
  box-shadow: 0 2px 8px rgba(124,58,237,.1) !important;
  border-color: #c4b5fd !important;
}

/* Storyboard 卡片 */
html.light .sb-card,
html.light .storyboard-row {
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}

/* 表格美化 */
html.light .el-table {
  border-radius: 10px !important;
  overflow: hidden !important;
}
html.light .el-table th.el-table__cell {
  background: #f8f7ff !important;
  color: #4c1d95 !important;
  font-weight: 600 !important;
}
html.light .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #fdfcff !important;
}

/* 表格内 link 按钮颜色恢复（防被 tr color !important 覆盖） */
html.light .el-table tr .el-button.is-link,
html.light .el-table tr .el-button.is-link span {
  color: var(--el-color-primary) !important;
}
html.light .el-table tr .el-button.is-link.el-button--danger,
html.light .el-table tr .el-button.is-link.el-button--danger span {
  color: var(--el-color-danger) !important;
}

/* 按钮通用圆角 */
html.light .el-button {
  border-radius: 8px !important;
}
/* 勿作用于 is-plain：否则背景被强制为实色渐变而字色仍为 plain 主色，对比度丢失 */
html.light .el-button--primary:not(.is-link):not(.is-plain) {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(124,58,237,.25) !important;
}
html.light .el-button--primary:not(.is-link):not(.is-plain):hover {
  background: linear-gradient(135deg, #6d28d9, #5b21b6) !important;
  box-shadow: 0 4px 12px rgba(124,58,237,.35) !important;
}
html.light .el-button.is-link {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 输入框 */
html.light .el-input__wrapper {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px #ddd6fe !important;
  transition: box-shadow 0.2s !important;
}
html.light .el-input__wrapper:hover {
  box-shadow: 0 0 0 1px #a78bfa !important;
}
html.light .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 2px #7c3aed !important;
}
html.light .el-textarea__wrapper {
  border-radius: 8px !important;
  box-shadow: 0 0 0 1px #ddd6fe !important;
}
html.light .el-textarea__wrapper:hover {
  box-shadow: 0 0 0 1px #a78bfa !important;
}

/* 对话框 */
html.light .el-dialog {
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.12) !important;
}

/* 分集卡片 */
html.light .episode-card {
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
}
html.light .episode-card:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.1) !important;
  border-color: #a78bfa !important;
}

/* page bg 更细腻 */
html.light {
  --bg-page: #f4f2fa;
}
html.light html, html.light body, html.light #app, html.light .app {
  background: #f4f2fa !important;
}

/* 资产管理 header banner */
html.light .asset-cover {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* el-tabs 美化 */
html.light .el-tabs__item {
  color: #71717a !important;
  font-weight: 500 !important;
}
html.light .el-tabs__item.is-active {
  color: #7c3aed !important;
  font-weight: 600 !important;
}
html.light .el-tabs__active-bar {
  background: #7c3aed !important;
  border-radius: 2px !important;
}
html.light .el-tabs__nav-wrap::after {
  background: #ebebf0 !important;
}

/* 导航 tab（按钮型）美化 */
html.light .el-radio-button__inner {
  border-radius: 8px !important;
}

/* 页面整体内容区最大宽度限制样式 */
html.light .main {
  padding-top: 28px !important;
}

/* =====================================================
   全局 ElMessage：更大、更易读、略长停留（与 main.js message.duration 配合）
   placement=top 时横向已为居中，此处强化宽度与正文排版
   ===================================================== */
.el-message {
  min-width: min(92vw, 520px) !important;
  max-width: min(94vw, 720px) !important;
  padding: 14px 20px !important;
  box-sizing: border-box !important;
}
.el-message .el-message__content {
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-align: center !important;
  word-break: break-word;
}
.el-message .el-message__icon {
  font-size: 20px !important;
}
.el-message .el-message__closeBtn {
  font-size: 18px !important;
}
html.dark .el-message--error {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
html.light .el-message--error {
  box-shadow: 0 4px 20px rgba(245, 108, 108, 0.18);
}
