/* ============================================================
   珺珩AI工作台 · 全局深色主题（黑曜石水晶·紫晶版）
   依赖 element-plus/theme-chalk/dark/css-vars.css（在 main.js 引入），
   本文件在其后加载，用于把 Element 暗色变量进一步压成紫晶黑系，
   并覆盖各页面写死的浅色自定义类。
   仅替换视觉皮肤，不改变结构、间距、布局比例与交互逻辑。
   ============================================================ */

html.dark {
  /* 基础字号略放大（Element 默认 14px） */
  --el-font-size-base: 15px;

  /* 深黑蓝紫层级：页面 < 卡片 < 弹层 */
  --el-bg-color: #10121c;
  --el-bg-color-page: #05060c;
  --el-bg-color-overlay: #171427;

  /* 文字三级：冷白 / 灰紫 / 暗灰紫 */
  --el-text-color-primary: #f5f3ff;
  --el-text-color-regular: #c9c3d6;
  --el-text-color-secondary: #a8a2bd;
  --el-text-color-placeholder: #756f8c;

  /* 边框：暗紫系 */
  --el-border-color: #2a2a3f;
  --el-border-color-light: #26263a;
  --el-border-color-lighter: #222236;
  --el-border-color-extra-light: #1e1e30;

  --el-fill-color: #20202c;
  --el-fill-color-light: #1a1a26;
  --el-fill-color-lighter: #171724;
  --el-fill-color-extra-light: #151521;
  --el-fill-color-blank: #101020;

  --el-mask-color: rgba(0, 0, 0, 0.72);
  --el-color-info: #a8a2bd;
  /* 主品牌色：紫水晶 */
  --el-color-primary: #8b5cf6;
  --el-color-primary-light-3: #a78bfa;
  --el-color-primary-light-5: #c4b5fd;
  --el-color-primary-light-7: #ddd6fe;
  --el-color-primary-light-8: #e9e2fe;
  --el-color-primary-light-9: #f5f0ff;
  --el-color-primary-dark-2: #7c3aed;
  --el-color-success: #30d158;
  --el-color-warning: #ff9f0a;
  --el-color-danger: #ff453a;
  --el-color-error: #ff453a;
}

html,
body,
#app {
  background: #05060c !important;
  color: #f5f3ff !important;
  font-size: 15px;
}

h1, h2, h3, h4 { color: #f5f3ff; }

/* 侧边导航菜单整体压黑、字号略增 */
html.dark .el-menu {
  background-color: #080a14 !important;
  font-size: 15px;
  border-right-color: #1e1e30 !important;
}
html.dark .el-menu-item,
html.dark .el-sub-menu__title { color: #a8a2bd !important; }
html.dark .el-menu-item.is-active { color: #a855f7 !important; }
html.dark .el-menu-item:hover,
html.dark .el-sub-menu__title:hover { background-color: rgba(139, 92, 246, 0.1) !important; }
html.dark .el-sub-menu .el-menu { background-color: #06070e !important; }

/* ============ 主框架 MainLayout ============ */
.sidebar { background: #080a14 !important; }
.logo { color: #ffffff !important; }
.header { background: #0a0c16 !important; border-bottom: 1px solid #26263a !important; }
.page-title { color: #f5f3ff !important; }
.username { color: #c9c3d6 !important; }
.main-content { background: #05060c !important; }

/* ============ 登录 / 注册 ============ */
.login-container,
.register-container { background: #05060c !important; }
.login-box,
.register-box {
  background: #10121c !important;
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65) !important;
}
.login-header h1,
.register-header h1 { color: #f5f3ff !important; }
.login-header p,
.register-header p,
.login-footer,
.register-footer { color: #a8a2bd !important; }
.login-footer a,
.register-footer a,
.trial-tip { color: #a855f7 !important; }

/* ============ 我的项目 ============ */
.project-cover { background: #181828 !important; color: #756f8c !important; }
.project-name { color: #f0eeff !important; }
.project-del { background: rgba(30, 30, 44, 0.85) !important; }
.project-del:hover { background: #3a1d3a !important; }

/* ============ 资产库 ============ */
.asset-card { background: #10121c !important; border-color: #2a2a3f !important; }
.thumb { background: #111 !important; }
.thumb-placeholder { color: #756f8c !important; }
.asset-desc,
.empty-tip { color: #a8a2bd !important; }

/* ============ 素材库 ============ */
.material-thumb { background: #0d1020 !important; }
.thumb-loading { color: #756f8c !important; }
.material-name { color: #f5f3ff; }

/* ============ 个人中心 ============ */
.member-sub { color: #bdb6d0 !important; }
.member-link { font-size: 14px; }

/* ============ 管理后台 ============ */
.stat-value { color: #f5f3ff !important; }
.stat-title { color: #a8a2bd !important; }
.mem-exp { color: #756f8c !important; }
.text-muted { color: #a8a2bd !important; }

/* ============ 分镜工作台 ShotEditor ============ */
.editor-toolbar,
.shot-list-panel,
.shot-edit-panel,
.shot-preview-panel,
.asset-chip,
.gen-settings { background: #10121c !important; }

.panel-header { border-bottom-color: #2a2a3f !important; color: #f5f3ff; }
.panel-footer { border-top-color: #2a2a3f !important; }
.project-title { color: #f5f3ff; }

/* 中间阶段切换吸顶栏：与左右面板（panel-header / right-tabs）同一深色体系 */
.stage-switch {
  background: #10121c !important;
  border-bottom-color: #2a2a3f !important;
  box-shadow: none !important;
}
.stage-switch .edit-title {
  background: #0b0d16 !important;
  color: #c9c3d6 !important;
  border-color: #2e2e42 !important;
}

/* 整个内容区大框：铺满到底，与左右面板同一深色体系 */
.edit-content {
  background: #10121c !important;
  border-color: #2a2a3f !important;
}

.shot-item:hover,
.shot-item.active { background: #1c1438 !important; }
.shot-number { background: #3b2f6e !important; color: #ffffff !important; font-size: 12px; font-weight: 700; }
.shot-thumb { background: #111 !important; }
.drag-handle { color: #8b84a0 !important; }
.shot-name { color: #f5f3ff !important; font-weight: 500; }

.step-card { background: #141326 !important; border-color: #2a2a3f !important; }
.step-fusion { background: #12101f !important; border-color: #3b2f6e !important; }
.step-title { color: #f5f3ff !important; }
.step-empty,
.match-empty,
.preview-tip,
.asset-empty,
.card-tip,
.chip-status,
.asset-desc { color: #a8a2bd !important; }
.mt-label { color: #bdb6d0 !important; }
.chip-status.ok { color: #30d158 !important; }
.match-missing { color: #ff9f0a !important; }

.asset-chip { border-color: #2a2a3f !important; }
.chip-name,
.asset-name { color: #f5f3ff; }
.chip-img { background: rgba(139, 92, 246, 0.18) !important; color: #a855f7 !important; }
.chip-img.scene { background: rgba(48, 209, 88, 0.16) !important; color: #30d158 !important; }
.chip-img.prop { background: rgba(255, 159, 10, 0.16) !important; color: #ff9f0a !important; }

.match-box { background: rgba(139, 92, 246, 0.10) !important; border-color: rgba(139, 92, 246, 0.42) !important; }
.staging-box { background: rgba(167, 139, 250, 0.08) !important; border-color: rgba(167, 139, 250, 0.35) !important; }
.staging-title { color: #c4b5fd !important; }
.match-title,
.element-card-title { color: #a855f7 !important; }
.match-noimg { background: rgba(139, 92, 246, 0.12) !important; color: #9b8cc9 !important; }
.match-thumb img,
.match-noimg { border-color: rgba(139, 92, 246, 0.36) !important; }
.element-card { background: rgba(139, 92, 246, 0.09) !important; border-color: rgba(139, 92, 246, 0.34) !important; }

.asset-card { border-color: #2a2a3f !important; }
.asset-avatar { background: rgba(139, 92, 246, 0.18) !important; color: #a855f7 !important; }
.asset-avatar.scene { background: rgba(48, 209, 88, 0.16) !important; color: #30d158 !important; }
.asset-avatar.prop { background: rgba(255, 159, 10, 0.16) !important; color: #ff9f0a !important; }

.upload-placeholder { border-color: #3a3a52 !important; color: #756f8c !important; }
.first-frame img { border-color: #2a2a3f !important; }
.gen-label { color: #a8a2bd !important; }
.lock-label { color: #c0c4cc !important; }

/* 弹窗 / 下拉 / 卡片等浮层在紫晶黑下的描边与阴影更柔和 */
html.dark .el-dialog,
html.dark .el-drawer { background: #12101c !important; }
html.dark .el-card { border-color: #26263a; }

/* Local-only interface adjustments. */
.studio-steps {
  display: none !important;
}

/* 分镜编辑器页面：宽屏三栏布局直接锁死（不使用 :has()，兼容旧内核浏览器） */
@media (min-width: 1100px) {
  /* 工具栏不再 fixed 悬浮，留在编辑器顶部文档流，避免与 header 重叠错位 */
  .editor-toolbar {
    flex: 0 0 auto !important;
    min-height: 56px !important;
    padding: 8px 12px !important;
    margin: 0 0 10px 0 !important;
    border: 1px solid var(--jh-border) !important;
    border-radius: 8px !important;
    background: var(--jh-glass) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(24px) saturate(145%);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* 编辑器容器：本页面 header 高度为 0，直接撑满视口减上下 padding(12px*2) */
  .shot-editor {
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 三栏主体：flex 横排、撑满、不换行、不溢出 */
  .editor-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow: hidden !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }

  /* 左栏：固定 270px */
  .shot-list-panel {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    flex: 0 0 270px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 中栏：吃掉所有剩余宽度 */
  .shot-edit-panel {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* 右栏：固定 350px */
  .shot-preview-panel {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
    flex: 0 0 350px !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* 面板内部各自滚动，不撑爆外层 */
  .shot-list {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .preview-content,
  .right-tabs .el-tabs__content {
    overflow-y: auto !important;
  }

  .right-tabs {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ============================================================
   黑曜石水晶 · 紫晶版（Obsidian Crystal / Amethyst）
   深黑蓝紫玻璃面板 + 紫水晶高光 + 紫蓝渐变按钮 + 冷蓝青 rim light
   仅替换视觉皮肤，不改变结构/间距/布局/交互。
   ============================================================ */
:root {
  color-scheme: dark;
  /* —— 背景：深黑 / 黑蓝 / 暗紫 —— */
  --jh-canvas: #05060c;
  --jh-canvas-soft: #080a14;
  --jh-glass: rgba(16, 18, 28, 0.72);          /* 近黑玻璃（#10121C 玻璃化） */
  --jh-glass-strong: rgba(23, 20, 39, 0.88);   /* 暗紫玻璃（#171427 玻璃化） */
  --jh-glass-soft: rgba(139, 92, 246, 0.055);  /* 紫水晶微光玻璃层 */
  /* —— 边框与发光：紫调 —— */
  --jh-border: rgba(167, 139, 250, 0.22);      /* 面板细边框 */
  --jh-border-soft: rgba(167, 139, 250, 0.10); /* 弱化边框 */
  --jh-border-active: rgba(168, 85, 247, 0.75);/* 选中态边框 */
  --jh-glow-primary: rgba(139, 92, 246, 0.35); /* 按钮/选中发光 */
  --jh-glow-cyan: rgba(34, 211, 238, 0.18);    /* 少量青蓝外发光 */
  /* —— 文字三级 —— */
  --jh-text: #f5f3ff;    /* 主文字：冷白 */
  --jh-muted: #a8a2bd;   /* 次级文字：灰紫 */
  --jh-faint: #756f8c;   /* 弱提示文字：暗灰紫 */
  /* —— 高亮：紫水晶主色 + 冷蓝青辅助 —— */
  --jh-primary: #8b5cf6;
  --jh-purple: #a855f7;
  --jh-purple-deep: #7c3aed;
  --jh-blue: #60a5fa;
  --jh-cyan: #38bdf8;
  --jh-cyan-light: #22d3ee;
  /* —— 语义色（保留原语义，色调压暗融入紫晶体系） —— */
  --jh-green: #30d158;
  --jh-amber: #ff9f0a;
  --jh-red: #ff453a;
}

html,
body,
#app {
  min-height: 100%;
  background: var(--jh-canvas) !important;
  color: var(--jh-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body {
  overflow: hidden;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 243, 255, 0.26) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(245, 243, 255, 0.26);
  background-clip: padding-box;
}

.layout-container,
.layout-container > .el-container {
  background: transparent !important;
}

.header {
  height: 64px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--jh-border) !important;
  background: rgba(5, 6, 12, 0.82) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

.header-right {
  gap: 8px !important;
}

.header-right .balance-tag {
  height: 30px;
  box-sizing: border-box;
  padding: 0 11px !important;
  border-color: var(--jh-border) !important;
  background: var(--jh-glass-soft) !important;
  font-size: 12px !important;
  font-weight: 600;
}

.user-info {
  gap: 7px !important;
  padding-left: 3px;
}

.user-info .el-avatar {
  border: 1px solid var(--jh-border);
  background: rgba(139, 92, 246, 0.18) !important;
  color: var(--jh-text);
}

.username,
.page-title,
.project-title {
  color: var(--jh-text) !important;
}

.main-content {
  min-width: 0;
  padding: 12px !important;
  background: var(--jh-canvas) !important;
}

.shot-editor {
  min-width: 0;
}

.editor-toolbar {
  min-height: 56px;
}

.toolbar-left,
.toolbar-right,
.panel-header,
.panel-header-ops,
.preview-actions,
.asset-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-right .el-button,
.toolbar-right .el-dropdown,
.toolbar-right .el-dropdown .el-button {
  margin: 0 !important;
}

.project-title {
  max-width: 190px;
  overflow: hidden;
  font-size: 15px !important;
  font-weight: 650 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-body {
  gap: 10px !important;
}

/* 三栏面板：黑曜石玻璃 + 紫晶细边框 + 柔和内阴影 */
.shot-list-panel,
.shot-edit-panel,
.shot-preview-panel {
  border: 1px solid var(--jh-border) !important;
  border-radius: 8px !important;
  background: var(--jh-glass) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(167, 139, 250, 0.08) !important;
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}

.shot-list-panel {
  width: 270px !important;
}

.shot-preview-panel {
  width: 350px !important;
}

.panel-header {
  min-height: 50px;
  box-sizing: border-box;
  padding: 10px 14px !important;
  border-bottom-color: var(--jh-border-soft) !important;
  background: rgba(139, 92, 246, 0.04);
  color: var(--jh-text);
  font-size: 13px !important;
  font-weight: 650 !important;
}

.panel-footer {
  padding: 10px 12px !important;
  border-top-color: var(--jh-border-soft) !important;
  background: rgba(139, 92, 246, 0.03);
}

.shot-list {
  padding: 8px !important;
}

.shot-item {
  min-height: 62px;
  box-sizing: border-box;
  margin-bottom: 5px !important;
  padding: 8px 9px !important;
  border: 1px solid transparent;
  border-radius: 7px !important;
  background: transparent;
}

.shot-item:hover {
  border-color: var(--jh-border);
  background: rgba(139, 92, 246, 0.08) !important;
}

/* 选中态：紫色描边 + 轻微发光 */
.shot-item.active {
  border-color: var(--jh-border-active) !important;
  background: rgba(124, 58, 237, 0.16) !important;
  box-shadow: inset 3px 0 0 var(--jh-primary), 0 0 12px var(--jh-glow-primary) !important;
}

.shot-number {
  background: rgba(139, 92, 246, 0.2) !important;
  color: var(--jh-text);
}

.shot-thumb {
  border: 1px solid var(--jh-border-soft);
  background: rgba(0, 0, 0, 0.28) !important;
}

.shot-name,
.asset-name-text,
.step-title,
.element-card-title {
  color: var(--jh-text) !important;
}

.shot-edit-panel,
.shot-preview-panel {
  background: rgba(13, 15, 24, 0.72) !important;
}

.edit-content,
.preview-content,
.asset-panel {
  padding: 14px !important;
}

.stage-switch {
  padding: 12px 14px 0 !important;
}

.stage-switch .el-radio-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  padding: 3px;
  border: 1px solid var(--jh-border-soft);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.stage-switch .el-radio-button,
.stage-switch .el-radio-button__inner {
  width: 100%;
}

.stage-switch .el-radio-button__inner {
  min-height: 38px;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--jh-muted) !important;
  box-shadow: none !important;
  font-size: 13px;
}

.stage-switch .el-radio-button.is-active .el-radio-button__inner {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(96, 165, 250, 0.14)) !important;
  color: var(--jh-text) !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22), inset 0 0 0 1px var(--jh-border) !important;
}

.step-card,
.element-card,
.match-box,
.staging-box,
.gen-settings {
  border: 1px solid var(--jh-border-soft) !important;
  border-radius: 8px !important;
  background: rgba(139, 92, 246, 0.05) !important;
  box-shadow: none !important;
}

.step-fusion {
  border-color: rgba(139, 92, 246, 0.35) !important;
  background: rgba(124, 58, 237, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(167, 139, 250, 0.08) !important;
}

.step-no {
  background: linear-gradient(135deg, var(--jh-primary), var(--jh-blue)) !important;
}

.asset-chip,
.asset-card {
  border-color: var(--jh-border-soft) !important;
  border-radius: 7px !important;
  background: rgba(139, 92, 246, 0.06) !important;
}

.asset-avatar,
.chip-img,
.match-noimg,
.upload-placeholder {
  border-color: var(--jh-border) !important;
  background: rgba(139, 92, 246, 0.09) !important;
}

/* 通用按钮：紫晶细边框 + 玻璃底 */
.el-button {
  min-height: 32px;
  border-color: var(--jh-border) !important;
  border-radius: 7px !important;
  background: rgba(139, 92, 246, 0.08) !important;
  color: var(--jh-text) !important;
  font-weight: 600;
  box-shadow: none !important;
}

.el-button:hover,
.el-button:focus-visible {
  border-color: rgba(167, 139, 250, 0.5) !important;
  background: rgba(139, 92, 246, 0.16) !important;
  box-shadow: 0 0 10px var(--jh-glow-primary) !important;
}

/* 主按钮：紫到蓝渐变 + 紫色发光 */
.el-button--primary {
  border-color: rgba(139, 92, 246, 0.65) !important;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6 45%, #60a5fa) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px var(--jh-glow-primary) !important;
}

.el-button--primary:hover,
.el-button--primary:focus-visible {
  border-color: rgba(168, 85, 247, 0.85) !important;
  background: linear-gradient(135deg, #8b5cf6, #a855f7 45%, #38bdf8) !important;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.45) !important;
}

.el-button--success {
  border-color: rgba(48, 209, 88, 0.45) !important;
  background: rgba(48, 209, 88, 0.13) !important;
  color: #79e494 !important;
}

.el-button--warning {
  border-color: rgba(255, 159, 10, 0.45) !important;
  background: rgba(255, 159, 10, 0.13) !important;
  color: #ffc05c !important;
}

.el-button--danger {
  border-color: rgba(255, 69, 58, 0.45) !important;
  background: rgba(255, 69, 58, 0.12) !important;
  color: #ff8179 !important;
}

.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-input-number .el-input__wrapper {
  border-radius: 7px !important;
  background: rgba(5, 6, 12, 0.45) !important;
  box-shadow: inset 0 0 0 1px var(--jh-border-soft) !important;
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.4) !important;
}

/* 聚焦：紫色内描边 + 柔和紫发光 + 微量青蓝 rim */
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  box-shadow: inset 0 0 0 1px var(--jh-primary), 0 0 0 3px var(--jh-glow-primary), 0 0 0 6px var(--jh-glow-cyan) !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select__selected-item,
.el-form-item__label {
  color: var(--jh-text) !important;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: var(--jh-faint) !important;
}

.el-tabs__header {
  margin: 0 !important;
  padding: 0 14px;
  border-bottom: 1px solid var(--jh-border-soft);
}

.el-tabs__nav-wrap::after {
  display: none;
}

.el-tabs__item {
  height: 48px !important;
  padding: 0 16px !important;
  color: var(--jh-muted) !important;
  font-size: 13px !important;
  font-weight: 600;
}

.el-tabs__item.is-active {
  color: var(--jh-text) !important;
}

.el-tabs__active-bar {
  height: 2px !important;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--jh-primary), var(--jh-blue)) !important;
}

.text-muted,
.asset-desc,
.chip-status,
.preview-tip,
.preview-empty,
.step-empty,
.gen-label {
  color: var(--jh-muted) !important;
}

.el-switch.is-checked .el-switch__core {
  border-color: var(--jh-primary) !important;
  background: linear-gradient(135deg, var(--jh-primary), var(--jh-blue)) !important;
}

/* 浮层：暗紫玻璃 + 细紫边框 */
.el-dialog,
.el-message-box,
.el-popper,
.el-dropdown__popper,
.el-select__popper {
  border: 1px solid var(--jh-border) !important;
  border-radius: 8px !important;
  background: rgba(16, 18, 28, 0.94) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(167, 139, 250, 0.08) !important;
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}

.el-overlay {
  background: rgba(2, 3, 8, 0.6) !important;
  backdrop-filter: blur(8px);
}

@media (min-width: 1100px) {
  .main-content {
    padding: 12px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 1099px) {
  body {
    overflow: auto;
  }

  .shot-editor {
    height: auto !important;
    min-height: calc(100vh - 88px);
    margin-top: 0 !important;
  }

  .shot-list-panel,
  .shot-preview-panel {
    width: 100% !important;
  }
}

/* ===== 编辑面板表头吸顶（由 workbench-sticky.js 驱动；此处仅保证吸顶时背景实心） ===== */
.shot-edit-panel .panel-header { background: #0d0f18 !important; }
.shot-edit-panel .stage-switch { background: #0d0f18 !important; }

/* ===== 低配客户端/WebView 性能优化：禁用非必要过渡与动画（减少重绘，桌面版流畅） ===== */
.el-fade-enter-active, .el-fade-leave-active,
.el-zoom-in-center-enter-active, .el-zoom-in-center-leave-active,
.el-zoom-in-top-enter-active, .el-zoom-in-top-leave-active,
.el-zoom-in-bottom-enter-active, .el-zoom-in-bottom-leave-active,
.el-zoom-in-left-enter-active, .el-zoom-in-left-leave-active,
.el-slide-enter-active, .el-slide-leave-active,
.el-dialog-fade-enter-active, .el-dialog-fade-leave-active,
.el-message-fade-enter-active, .el-message-fade-leave-active,
.el-notification-fade-enter-active, .el-notification-fade-leave-active,
.el-drawer-fade-enter-active, .el-drawer-fade-leave-active,
.el-loading-mask, .el-loading-spinner,
.el-overlay, .v-modal {
  transition: none !important;
  animation: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* ===== Four-column Obsidian/Amethyst workbench patch v4 ===== */
.asset-side-panel,.shot-stage-panel,.prompt-panel{background:#0a0c16 !important;}
body::before,body::after{display:none !important;}