/* Light mode using CSS custom properties */
:root {
  --color-bg-primary: #0a0a0b;
  --color-bg-secondary: #0d0d0f;
  --color-bg-card: #18181b;
  --color-bg-input: #09090b;
  --color-text-primary: #f4f4f5;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;
  --color-border: rgba(255,255,255,0.08);
  --color-border-strong: #27272a;
}

.light-mode {
  --color-bg-primary: #f0f2f5;
  --color-bg-secondary: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-input: #f9fafb;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  --color-border: rgba(0,0,0,0.1);
  --color-border-strong: #e5e7eb;
}

/* Apply variables to body */
body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode overrides for hardcoded dark colors */

/* === Background overrides === */
.light-mode .bg-\[#0a0a0b\],
.light-mode .bg-\[#0d0d0f\],
.light-mode .bg-\[#0a0a0a\],
.light-mode .bg-\[#050505\],
.light-mode [class*="bg-[#0a0a0b]"],
.light-mode [class*="bg-[#0d0d0f]"],
.light-mode [class*="bg-[#0a0a0a]"],
.light-mode [class*="bg-[#050505]"] {
  background-color: #ffffff !important;
}

.light-mode .bg-\[#0a0a0a\]\/80,
.light-mode .bg-\[#0a0a0b\]\/80 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.light-mode .bg-black { background-color: #ffffff !important; }
.light-mode .bg-black\/20 { background-color: rgba(0,0,0,0.02) !important; }
.light-mode .bg-black\/40 { background-color: rgba(0,0,0,0.03) !important; }
.light-mode .bg-black\/50 { background-color: rgba(0,0,0,0.05) !important; }
.light-mode .bg-black\/60 { background-color: rgba(0,0,0,0.06) !important; }
.light-mode .bg-black\/70 { background-color: rgba(0,0,0,0.1) !important; }
.light-mode .bg-black\/98 { background-color: rgba(255,255,255,0.98) !important; }

.light-mode .bg-zinc-950 { background-color: #ffffff !important; }
.light-mode .bg-zinc-950\/95 { background-color: rgba(255,255,255,0.98) !important; }
.light-mode .bg-zinc-900 { background-color: #ffffff !important; }
.light-mode .bg-zinc-900\/50 { background-color: rgba(255,255,255,0.95) !important; }
.light-mode .bg-zinc-900\/30 { background-color: rgba(255,255,255,0.9) !important; }
.light-mode .bg-zinc-800 { background-color: #f3f4f6 !important; }
.light-mode .bg-zinc-800\/50 { background-color: rgba(243,244,246,0.7) !important; }

/* Attribute selector fallbacks for Tailwind 4 compatibility */
.light-mode [class~="bg-zinc-950"] { background-color: #ffffff !important; }
.light-mode [class~="bg-zinc-900"] { background-color: #ffffff !important; }
.light-mode [class~="bg-zinc-800"] { background-color: #f3f4f6 !important; }
.light-mode [class*="bg-zinc-900/90"] { background-color: rgba(255,255,255,0.98) !important; }
.light-mode [class*="bg-zinc-900/80"] { background-color: rgba(255,255,255,0.97) !important; }
.light-mode [class*="bg-zinc-900/50"] { background-color: rgba(255,255,255,0.95) !important; }
.light-mode [class*="bg-zinc-900/95"] { background-color: rgba(255,255,255,0.99) !important; }
.light-mode [class*="bg-zinc-950/50"] { background-color: rgba(255,255,255,0.95) !important; }
.light-mode [class*="bg-zinc-950/80"] { background-color: rgba(255,255,255,0.97) !important; }
.light-mode [class*="bg-zinc-950/95"] { background-color: rgba(255,255,255,0.99) !important; }
.light-mode [class*="bg-zinc-800/50"] { background-color: rgba(243,244,246,0.7) !important; }
.light-mode [class*="bg-zinc-800/95"] { background-color: rgba(243,244,246,0.98) !important; }

/* === Text overrides === */
html.light-mode .text-white { color: #111827 !important; }
html.light-mode .text-zinc-100 { color: #111827 !important; }
html.light-mode .text-zinc-200 { color: #1f2937 !important; }
html.light-mode .text-zinc-300 { color: #1f2937 !important; }
html.light-mode .text-zinc-400 { color: #374151 !important; }
html.light-mode .text-zinc-500 { color: #4b5563 !important; }
html.light-mode .text-zinc-600 { color: #374151 !important; }
html.light-mode .text-zinc-700 { color: #1f2937 !important; }
html.light-mode .text-white\/30 { color: rgba(0,0,0,0.4) !important; }
html.light-mode .text-white\/50 { color: rgba(0,0,0,0.6) !important; }
html.light-mode .text-white\/70 { color: rgba(0,0,0,0.8) !important; }
/* === Border overrides === */
.light-mode .border-zinc-800,
.light-mode [class~="border-zinc-800"] { border-color: #e5e7eb !important; }
.light-mode .border-zinc-800\/50 { border-color: rgba(229,231,235,0.5) !important; }
.light-mode .border-zinc-700,
.light-mode [class~="border-zinc-700"] { border-color: #d1d5db !important; }
.light-mode .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
.light-mode .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
.light-mode .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; }

/* === Animated background === */
.light-mode .animated-bg {
  background: radial-gradient(circle, #f8f9fa, #f0f2f5) !important;
}

/* === Sidebar === */
.light-mode aside {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* === Backdrop blur panels === */
.light-mode .backdrop-blur-xl,
.light-mode .backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
}

/* === Specific component overrides === */
.light-mode .bg-white\/5 { background-color: rgba(0,0,0,0.03) !important; }
.light-mode .bg-white\/10 { background-color: rgba(0,0,0,0.05) !important; }
.light-mode .bg-white\/20 { background-color: rgba(0,0,0,0.08) !important; }

/* Shadow adjustments for light mode */
.light-mode .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1) !important; }
.light-mode .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.08) !important; }

/* Scrollbar in light mode */
.light-mode .custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15) !important;
}
.light-mode .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25) !important;
}

/* Input/range in light mode */
.light-mode input[type="range"] {
  background-color: #e5e7eb !important;
}

/* Gradient text fix */
.light-mode .bg-gradient-to-r.from-white.to-zinc-400 {
  --tw-gradient-from: #111827 !important;
  --tw-gradient-to: #4b5563 !important;
}

/* Footer in light mode */
.light-mode footer {
  background-color: rgba(255,255,255,0.9) !important;
  border-color: #e5e7eb !important;
}
/* Select elements */
.light-mode select {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

/* Textarea */
.light-mode textarea {
  color: #1f2937 !important;
}
.light-mode textarea::placeholder {
  color: #9ca3af !important;
}

/* 充值中心背景 */
.light-mode .bg-gradient-to-b {
  background: linear-gradient(to bottom, #f0f2f5, #ffffff) !important;
}

/* Logo渐变文字 */
.light-mode .bg-gradient-to-r.from-white.to-zinc-400 {
  background: none !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* 亮色模式下不可见的按钮 */
.light-mode .text-zinc-400.hover\:bg-zinc-800\/50 {
  color: #374151 !important;
  background-color: rgba(229,231,235,0.5) !important;
}
.light-mode .text-zinc-400.hover\:bg-zinc-800\/50:hover {
  background-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 侧边栏导航项 */
.light-mode nav a.text-zinc-400 {
  color: #4b5563 !important;
}
.light-mode nav a.text-zinc-400:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

/* 亮色模式下的卡片和面板 */
.light-mode .bg-zinc-900\/90 {
  background-color: rgba(255,255,255,0.95) !important;
}
.light-mode .bg-zinc-900\/95 {
  background-color: rgba(255,255,255,0.98) !important;
}
/* 亮色模式下的输入框 */
.light-mode input[type="text"],
.light-mode input[type="email"],
.light-mode input[type="password"],
.light-mode input[type="number"] {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
.light-mode input::placeholder {
  color: #9ca3af !important;
}

/* 亮色模式下的模态框/弹窗 */
.light-mode .bg-zinc-900.border.border-zinc-700 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的代码/终端区域 */
.light-mode .font-mono {
  color: #374151 !important;
}

/* 亮色模式下的分隔线 */
.light-mode .border-zinc-800\/50 {
  border-color: rgba(229,231,235,0.7) !important;
}

/* 亮色模式下的图标颜色 */
.light-mode .text-zinc-600 {
  color: #4b5563 !important;
}

/* 亮色模式下的背景渐变 */
.light-mode .bg-indigo-500\/5 {
  background-color: rgba(99,102,241,0.05) !important;
}
.light-mode .bg-purple-500\/5 {
  background-color: rgba(168,85,247,0.05) !important;
}

/* 亮色模式下的Konva画布背景 */
.light-mode canvas {
  background-color: transparent !important;
}

/* 亮色模式下的零壹画布 */
.light-mode .h-\[calc\(100vh-56px\)\].bg-zinc-950 {
  background-color: #f0f2f5 !important;
}

/* 亮色模式下的生成结果区域 */
.light-mode .bg-zinc-950.flex-1 {
  background-color: #ffffff !important;
}

/* 亮色模式下的图片上传区域顶部 */
.light-mode .bg-\[#18181b\] {
  background-color: #f3f4f6 !important;
}
/* 亮色模式下的Konva节点背景 */
.light-mode .bg-zinc-900\/50.backdrop-blur-xl {
  background-color: rgba(255,255,255,0.95) !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的按钮 - 确保可见 */
.light-mode button.bg-zinc-900\/50 {
  background-color: rgba(249,250,251,0.9) !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
.light-mode button.bg-zinc-900\/50:hover {
  background-color: #f3f4f6 !important;
}

/* 亮色模式下的工具栏按钮 */
.light-mode .bg-zinc-900.border.border-zinc-800 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 亮色模式下的文字颜色修复 */
.light-mode h1, .light-mode h2, .light-mode h3 {
  color: #111827 !important;
}
.light-mode p {
  color: #374151 !important;
}

/* 亮色模式下的充值中心 */
.light-mode .pricing-page,
.light-mode [class*="pricing"] {
  background-color: #f0f2f5 !important;
}

/* 亮色模式下的后台管理 */
.light-mode .admin-page,
.light-mode [class*="admin"] {
  background-color: #f0f2f5 !important;
}

/* 亮色模式下的bg-[#0a0a0a] */
.light-mode .bg-\[#0a0a0a\] {
  background-color: #ffffff !important;
}

/* 亮色模式下的bg-[#0a0a0a]/80 */
.light-mode .bg-\[#0a0a0a\]\/80 {
  background-color: rgba(255,255,255,0.95) !important;
}

/* 亮色模式下的bg-[#050505] */
.light-mode .bg-\[#050505\] {
  background-color: #ffffff !important;
}
/* 亮色模式下的Konva画布容器 */
.light-mode .konvajs-content {
  background-color: #f0f2f5 !important;
}

/* 亮色模式下的图片上传区域 */
.light-mode .border-dashed {
  border-color: #d1d5db !important;
}
.light-mode .border-dashed:hover {
  border-color: #6366f1 !important;
}

/* 亮色模式下的徽章/标签 */
.light-mode .bg-zinc-800\/50 {
  background-color: rgba(229,231,235,0.7) !important;
}

/* 亮色模式下的进度条 */
.light-mode .bg-zinc-800 {
  background-color: #e5e7eb !important;
}

/* 亮色模式下的分割线 */
.light-mode .bg-zinc-800.my-1 {
  background-color: #e5e7eb !important;
}

/* 亮色模式下的Logo文字 */
.light-mode .bg-gradient-to-r.from-white {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #111827 !important;
  color: #111827 !important;
}

/* 亮色模式下的bg-black/95 (预览弹窗) */
.light-mode .bg-black\/95 {
  background-color: rgba(0,0,0,0.95) !important;
}
.light-mode .bg-black\/90 {
  background-color: rgba(0,0,0,0.90) !important;
}
.light-mode .bg-black\/98 {
  background-color: rgba(0,0,0,0.98) !important;
}

/* 通用按钮在亮色模式下的基础样式 */
.light-mode button {
  color: inherit;
}
/* 亮色模式下的操作按钮 */
.light-mode .text-zinc-400:not([class*="text-indigo"]):not([class*="text-blue"]):not([class*="text-emerald"]):not([class*="text-red"]):not([class*="text-purple"]) {
  color: #374151 !important;
}

/* 亮色模式下的hover状态按钮 */
.light-mode button.hover\:bg-zinc-800:hover,
.light-mode button.hover\:bg-zinc-800\/50:hover {
  background-color: #f3f4f6 !important;
}

/* 亮色模式下的图标按钮 */
.light-mode button.p-2,
.light-mode button.p-1\.5,
.light-mode button.p-1 {
  color: #374151 !important;
}

/* 亮色模式下的文字按钮 */
.light-mode button.text-xs,
.light-mode button.text-sm {
  color: #374151 !important;
}

/* 亮色模式下的模型选择器 */
.light-mode .bg-zinc-950.text-zinc-300 {
  background-color: #f9fafb !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的比例选择按钮 */
.light-mode .bg-zinc-950.rounded-xl.p-1 {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的比例按钮文字 */
.light-mode .text-zinc-500.hover\:text-zinc-300 {
  color: #4b5563 !important;
}
.light-mode .text-zinc-500.hover\:text-zinc-300:hover {
  color: #111827 !important;
}

/* 亮色模式下的分辨率按钮 */
.light-mode .flex.bg-zinc-950.rounded-xl.p-1 {
  background-color: #f3f4f6 !important;
}

/* 亮色模式下的卡片内容 */
.light-mode .bg-zinc-900.rounded-2xl {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
/* 亮色模式下的section卡片 */
.light-mode section.bg-zinc-900 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的生成按钮 */
.light-mode button.bg-white.text-black {
  background-color: #111827 !important;
  color: #ffffff !important;
}
.light-mode button.bg-white.text-black:hover {
  background-color: #374151 !important;
}

/* 亮色模式下的禁用按钮 */
.light-mode button:disabled {
  opacity: 0.5 !important;
}

/* 亮色模式下的模块卡片 */
.light-mode .bg-zinc-950.border-zinc-800 {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的文字颜色 */
.light-mode .text-zinc-300 {
  color: #1f2937 !important;
}

/* 亮色模式下的上传区域 */
.light-mode .bg-zinc-900.rounded-2xl.border-2 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的textarea */
.light-mode .bg-zinc-950.border.border-zinc-800.rounded-xl {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 亮色模式下的select */
.light-mode .bg-zinc-950.text-zinc-300.border.border-zinc-800.rounded-lg {
  background-color: #f9fafb !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的费用显示 */
.light-mode .text-white.font-black {
  color: #111827 !important;
}
/* 亮色模式下的历史记录区域 */
.light-mode .bg-zinc-950.flex-1.overflow-y-auto {
  background-color: #ffffff !important;
}

/* 亮色模式下的图片卡片 */
.light-mode .bg-\[#0a0a0a\].border.border-white\/5.rounded-2xl {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* 亮色模式下的图片背景 */
.light-mode .bg-zinc-900.aspect-square {
  background-color: #f3f4f6 !important;
}

/* 亮色模式下的顶部工具栏 */
.light-mode .border-b.border-zinc-800\/50 {
  border-color: rgba(229,231,235,0.7) !important;
  background-color: #ffffff !important;
}

/* 亮色模式下的Konva画布节点 */
.light-mode .bg-zinc-900\/90.backdrop-blur-xl {
  background-color: rgba(255,255,255,0.97) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

/* 亮色模式下的生成状态面板 */
.light-mode .bg-zinc-900\/95.backdrop-blur-xl {
  background-color: rgba(255,255,255,0.97) !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的零壹画布标题 */
.light-mode .bg-zinc-900\/50.backdrop-blur-xl.border.border-zinc-800\/50 {
  background-color: rgba(255,255,255,0.9) !important;
  border-color: rgba(229,231,235,0.7) !important;
}

/* 亮色模式下的快捷键提示 */
.light-mode .bg-black\/30 {
  background-color: rgba(0,0,0,0.06) !important;
}

/* 亮色模式下的kbd元素 */
.light-mode kbd {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

/* 亮色模式下的缩放控制按钮 */
.light-mode .bg-zinc-900.border.border-zinc-800.rounded-xl.p-1 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}
/* 亮色模式下的添加模板按钮 */
.light-mode button.bg-blue-600 {
  background-color: #2563eb !important;
  color: #ffffff !important;
}

/* 亮色模式下的上传按钮 */
.light-mode button.bg-zinc-900.border.border-zinc-800 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 亮色模式下的生成模板节点内容 */
.light-mode .bg-zinc-950.border.border-zinc-800.rounded-lg {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的参考图区域 */
.light-mode .bg-black\/20.rounded-lg {
  background-color: rgba(0,0,0,0.03) !important;
}

/* 亮色模式下的费用预估区域 */
.light-mode .bg-zinc-950\/80.rounded-lg.border.border-zinc-800\/50 {
  background-color: rgba(249,250,251,0.9) !important;
  border-color: rgba(229,231,235,0.7) !important;
}

/* 亮色模式下的充值中心 */
.light-mode .max-w-6xl.mx-auto {
  color: #111827 !important;
}

/* 亮色模式下的充值卡片 */
.light-mode .bg-zinc-900.border.border-zinc-800.rounded-3xl {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* 亮色模式下的后台管理表格 */
.light-mode table {
  background-color: #ffffff !important;
  color: #111827 !important;
}
.light-mode th {
  background-color: #f9fafb !important;
  color: #374151 !important;
  border-color: #e5e7eb !important;
}
.light-mode td {
  border-color: #f3f4f6 !important;
  color: #374151 !important;
}
.light-mode tr:hover td {
  background-color: #f9fafb !important;
}
/* 亮色模式下的标签/徽章 */
.light-mode .bg-zinc-800.text-zinc-300 {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
}

/* 亮色模式下的分页按钮 */
.light-mode .bg-zinc-900.hover\:bg-zinc-800 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

/* 亮色模式下的搜索框 */
.light-mode input[type="search"],
.light-mode input[type="text"].bg-zinc-900 {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 亮色模式下的模态框背景 */
.light-mode .fixed.inset-0.bg-black\/60 {
  background-color: rgba(0,0,0,0.4) !important;
}

/* 亮色模式下的模态框内容 */
.light-mode .bg-zinc-900.border.border-zinc-700.rounded-2xl {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

/* 亮色模式下的公告横幅 */
.light-mode .bg-indigo-600\/10 {
  background-color: rgba(99,102,241,0.08) !important;
}

/* 亮色模式下的日志面板 */
.light-mode .bg-zinc-950.border-t.border-zinc-800 {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的日志条目 */
.light-mode .font-mono.text-xs {
  color: #374151 !important;
}

/* 亮色模式下的滚动条 */
.light-mode ::-webkit-scrollbar-track {
  background: #f3f4f6 !important;
}
.light-mode ::-webkit-scrollbar-thumb {
  background: #d1d5db !important;
}
.light-mode ::-webkit-scrollbar-thumb:hover {
  background: #9ca3af !important;
}
/* 零壹画布 - 生成模板节点亮色修复 */
.light-mode .bg-zinc-900\/80 {
  background-color: rgba(255,255,255,0.92) !important;
}

/* 画布模板面板 */
.light-mode [class*="bg-zinc-900/90"][class*="backdrop-blur"] {
  background-color: rgba(255,255,255,0.97) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}

/* 画布模板内的textarea和select */
.light-mode [class*="bg-zinc-900/90"] textarea,
.light-mode [class*="bg-zinc-900/90"] select {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 画布模板内的费用区域 */
.light-mode [class*="bg-zinc-900/90"] .bg-zinc-950\/80 {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* 画布模板内的费用文字 */
.light-mode [class*="bg-zinc-900/90"] .text-white {
  color: #111827 !important;
}

/* 画布上传图片节点 */
.light-mode .bg-zinc-800\/95 {
  background-color: rgba(255,255,255,0.97) !important;
}

/* 储存空间横幅亮色修复 */
.light-mode [class*="bg-zinc-900/80"][class*="border-zinc-800"] {
  background-color: rgba(255,255,255,0.92) !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* 储存空间进度条背景 */
.light-mode .bg-zinc-900\/80 .bg-zinc-800 {
  background-color: #e5e7eb !important;
}

/* API渠道配置管理亮色修复 */
.light-mode .bg-\[#050505\].text-zinc-300 {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}

/* 顶部header */
.light-mode .bg-\[#050505\] header {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}
/* 左侧树形面板 */
.light-mode .bg-zinc-950\/50 {
  background-color: rgba(255,255,255,0.95) !important;
}

/* 右侧内容区 */
.light-mode .bg-\[#0a0a0b\].overflow-y-auto {
  background-color: #ffffff !important;
}

/* 渠道编辑器卡片 */
.light-mode .bg-zinc-900\/50.border.border-white\/5 {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.light-mode .bg-zinc-900\/50 {
  background-color: rgba(255,255,255,0.9) !important;
}

/* 渠道配置输入框 */
.light-mode .bg-zinc-950.border.border-white\/10 {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* border-white/5 */
.light-mode .border-white\/5 {
  border-color: #e5e7eb !important;
}

/* border-white/10 */
.light-mode .border-white\/10 {
  border-color: #e5e7eb !important;
}

/* 渠道配置中的hover按钮 */
.light-mode .hover\:bg-white\/5:hover {
  background-color: #f3f4f6 !important;
}
.light-mode .hover\:bg-white\/10:hover {
  background-color: #e5e7eb !important;
}

/* 渠道配置中的bg-white/5 */
.light-mode .bg-white\/5 {
  background-color: rgba(0,0,0,0.03) !important;
}

/* 渠道配置中的代码预览区 */
.light-mode .bg-zinc-950.border.border-white\/5 {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* 渠道配置中的测试面板 */
.light-mode .bg-zinc-950\/30 {
  background-color: rgba(249,250,251,0.8) !important;
}
/* 渠道配置中的自动解析弹窗 */
.light-mode .bg-zinc-900.border.border-white\/10.rounded-\[2rem\] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
}

/* 渠道配置弹窗底部 */
.light-mode .bg-zinc-950\/50 {
  background-color: rgba(249,250,251,0.9) !important;
}

/* 渠道配置中的tab切换 */
.light-mode .bg-zinc-800.text-white.shadow-md {
  background-color: #ffffff !important;
  color: #111827 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* 设置页面的大卡片容器 */
.light-mode [class*="bg-zinc-900"][class*="border-zinc-800"][class*="rounded-[2.5rem]"] {
  background-color: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

/* 设置页面卡片内的子卡片 */
.light-mode [class*="bg-zinc-950/50"][class*="border-zinc-800"][class*="rounded-2xl"] {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

/* 设置页面卡片内的输入框 */
.light-mode [class*="bg-zinc-950"][class*="border-zinc-800"][class*="rounded-xl"] {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 设置页面卡片内的输入框 text-zinc-300 */
.light-mode [class*="bg-zinc-950"][class*="text-zinc-300"] {
  background-color: #f9fafb !important;
  color: #374151 !important;
}

/* 设置页面卡片内的输入框 text-white */
.light-mode [class*="bg-zinc-950"][class*="text-white"][class*="rounded-xl"] {
  color: #111827 !important;
}

/* 设置页面中的bg-zinc-900输入框 */
.light-mode [class*="bg-zinc-900"][class*="border-zinc-800"][class*="rounded-xl"]:not(aside) {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}
/* 邮件测试区域 */
.light-mode [class*="bg-zinc-950/50"][class*="border-zinc-800"][class*="rounded-xl"] {
  background-color: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下所有输入框确保文字可见 */
.light-mode input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([class*="bg-white"]) {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 亮色模式下密码输入框 */
.light-mode input[type="password"] {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 亮色模式下所有textarea确保文字可见 */
.light-mode textarea {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

/* 亮色模式下所有select确保文字可见 */
.light-mode select {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}
.light-mode select option {
  background-color: #ffffff !important;
  color: #111827 !important;
}

/* 保存定价按钮 */
.light-mode button[class*="bg-white"][class*="text-black"] {
  background-color: #111827 !important;
  color: #ffffff !important;
}
.light-mode button[class*="bg-white"][class*="text-black"]:hover {
  background-color: #374151 !important;
}

/* 亮色模式下font-mono标签在输入框内 */
.light-mode [class*="bg-zinc-900"][class*="rounded"] .font-mono {
  color: #374151 !important;
}

/* 登录页面亮色修复 */
.light-mode [class*="bg-[#060607]"] {
  background-color: #f0f2f5 !important;
}

/* 登录页面卡片 */
.light-mode [class*="bg-zinc-900/50"][class*="backdrop-blur"] {
  background-color: rgba(255,255,255,0.95) !important;
  border-color: #e5e7eb !important;
}

/* 亮色模式下的 divide 分隔线 */
.light-mode .divide-white\/5 > * + * {
  border-color: rgba(0,0,0,0.06) !important;
}
.light-mode .divide-zinc-800 > * + * {
  border-color: #e5e7eb !important;
}

/* 亮色模式下的 ring 颜色 */
.light-mode .ring-blue-500\/20 {
  --tw-ring-color: rgba(59,130,246,0.2) !important;
}

/* 亮色模式下的 Konva 画布容器背景 */
.light-mode [class*="bg-zinc-950"][class*="h-[calc"] {
  background-color: #f0f2f5 !important;
}

/* TransferButtons (精修/上身/套图/画布) 保持白色文字 */
html.light-mode button[class*="bg-indigo-6"],
html.light-mode button[class*="bg-blue-6"],
html.light-mode button[class*="bg-emerald-6"],
html.light-mode button[class*="bg-red-6"],
html.light-mode button[class*="bg-purple-6"] {
  color: #ffffff !important;
}