/* ==========================================
   夜间模式样式 - 支持动态暗度调节
   ==========================================
   CSS变量定义（由 dark-mode.js 动态设置）：
   --dark-bg: 基础背景色
   --dark-card-bg: 卡片/内容背景色
   --dark-text: 主要文字色
   --dark-text-secondary: 次要文字色
   --dark-text-active: 激活文字色
   --dark-border: 边框色
   --dark-input-bg: 输入框背景色
   ========================================== */

/* 夜间模式下文字变亮灰色 */
html.dark body {
    color: var(--dark-text, #d0d0d0) !important;
}

/* 夜间模式下背景色 - 白色变为深灰色 */
html.dark body,
html.dark .bg-white {
    background-color: var(--dark-bg, #1a1a1a) !important;
}

/* 夜间模式下背景色 - 白色变成深灰色 */
html.dark .bg-white,
html.dark [style*="background:#ffffff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#fff"] {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

/* 夜间模式下背景色 - 灰色变成更深的灰色 */
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: var(--dark-bg, #0f0f0f) !important;
}

html.dark .bg-gray-200 {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

html.dark .bg-gray-300 {
    background-color: var(--dark-card-bg, #2a2a2a) !important;
}

/* 夜间模式下 primary 蓝色保持色调但变暗 */
html.dark .bg-primary {
    background-color: #1e3a5f !important;
}
html.dark .text-primary {
    color: #6a8aaf !important;
}

/* 工具栏按钮 - 保持色调但变暗 */
html.dark .tool-btn {
    background-color: var(--dark-card-bg, #2a2a2a) !important;
    color: var(--dark-text, #d0d0d0) !important;
}
html.dark .tool-btn:hover {
    background-color: var(--dark-bg, #1a1a1a) !important;
}

/* 选中 / 激活状态：变黑色 */
html.dark .tool-btn.active,
html.dark .color-btn.active,
html.dark .active,
html.dark [class*="-active"] {
    background-color: var(--dark-bg, #0f0f0f) !important;
    color: var(--dark-text-active, #e0e0e0) !important;
    border-color: var(--dark-border, #4a4a4a) !important;
}
html.dark .color-btn.active {
    border-color: var(--dark-border, #4a4a4a) !important;
}
html.dark .color-btn.active[data-color] {
    background-color: var(--dark-bg, #0f0f0f) !important;
}
/* 白色色块按钮：文字变灰 */
html.dark .color-btn[data-color="#ffffff"],
html.dark [style*="background:#ffffff"],
html.dark [style*="background-color:#ffffff"],
html.dark [style*="background: #ffffff"],
html.dark [style*="background-color: #ffffff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color:#fff"] {
    color: #303030 !important;
    background-color: var(--dark-card-bg, #2a2a2a) !important;
}
html.dark .color-btn.active[data-color="#ffffff"] {
    background-color: var(--dark-card-bg, #2a2a2a) !important;
    border-color: var(--dark-border, #4a4a4a) !important;
}

/* 浅色背景统一变暗 */
html.dark [style*="background:rgb(255"],
html.dark [style*="background-color:rgb(255"],
html.dark [style*="background: yellow"],
html.dark [style*="background-color: yellow"],
html.dark [style*="background:yellow"],
html.dark [style*="background-color:yellow"],
html.dark [style*="background: #ffff"],
html.dark [style*="background-color: #ffff"] {
    filter: brightness(0.3) !important;
}

html.dark .bg-yellow-100,
html.dark .bg-yellow-200,
html.dark .bg-yellow-300,
html.dark .bg-yellow-400,
html.dark .bg-yellow-50 {
    filter: brightness(0.3) !important;
}

/* 浅灰色背景统一变暗 */
html.dark [style*="background:#f0f0f0"],
html.dark [style*="background-color:#f0f0f0"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background-color:#e5e7eb"],
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background-color:#f3f4f6"] {
    color: var(--dark-text, #d0d0d0) !important;
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

/* 额外暗化：所有浅色系的 Tailwind 背景类 */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
}

/* Tailwind 蓝色系 - 保持色调变暗 */
html.dark .bg-blue-50,
html.dark .bg-blue-100,
html.dark .bg-blue-200 {
    background-color: #1a2a3f !important;
    color: #8aaacf !important;
}
html.dark .bg-blue-500,
html.dark .bg-blue-600 {
    background-color: #1e3a5f !important;
}
html.dark .text-blue-500,
html.dark .text-blue-600 {
    color: #6a8aaf !important;
}

/* Tailwind 绿色系 - 保持色调变暗 */
html.dark .bg-green-50,
html.dark .bg-green-100,
html.dark .bg-green-200 {
    background-color: #1a2f1a !important;
    color: #8aa8a !important;
}
html.dark .bg-green-500,
html.dark .bg-green-600 {
    background-color: #1a3f2a !important;
}
html.dark .text-green-500,
html.dark .text-green-600 {
    color: #6a9a6a !important;
}

/* Tailwind 红色系 - 保持色调变暗 */
html.dark .bg-red-50,
html.dark .bg-red-100,
html.dark .bg-red-200 {
    background-color: #2f1a1a !important;
    color: #aa7a7a !important;
}
html.dark .bg-red-500,
html.dark .bg-red-600 {
    background-color: #3f1a2a !important;
}
html.dark .text-red-500,
html.dark .text-red-600 {
    color: #aa6a6a !important;
}

/* Tailwind 黄色系 - 保持色调变暗 */
html.dark .bg-yellow-50,
html.dark .bg-yellow-100,
html.dark .bg-yellow-200 {
    background-color: #2f2a1a !important;
    color: #aa9a6a !important;
}
html.dark .bg-yellow-500,
html.dark .bg-yellow-600 {
    background-color: #3f2a1a !important;
}
html.dark .text-yellow-500,
html.dark .text-yellow-600 {
    color: #aa8a5a !important;
}

/* Tailwind 紫色系 - 保持色调变暗 */
html.dark .bg-purple-50,
html.dark .bg-purple-100,
html.dark .bg-purple-200 {
    background-color: #1a1a2f !important;
    color: #8a8aaa !important;
}
html.dark .bg-purple-500,
html.dark .bg-purple-600 {
    background-color: #2a1a3f !important;
}
html.dark .text-purple-500,
html.dark .text-purple-600 {
    color: #8a6aaa !important;
}

/* Tailwind 粉色系 - 保持色调变暗 */
html.dark .bg-pink-50,
html.dark .bg-pink-100,
html.dark .bg-pink-200 {
    background-color: #2f1a2a !important;
    color: #aa8a9a !important;
}
html.dark .bg-pink-500,
html.dark .bg-pink-600 {
    background-color: #3f1a2f !important;
}
html.dark .text-pink-500,
html.dark .text-pink-600 {
    color: #aa7a8a !important;
}

/* Tailwind indigo系 - 保持色调变暗 */
html.dark .bg-indigo-50,
html.dark .bg-indigo-100,
html.dark .bg-indigo-200 {
    background-color: #1a1a2f !important;
    color: #8a8aaa !important;
}
html.dark .bg-indigo-500,
html.dark .bg-indigo-600 {
    background-color: #2a1a3f !important;
}
html.dark .text-indigo-500,
html.dark .text-indigo-600 {
    color: #8a6aaa !important;
}

/* Tailwind cyan系 - 保持色调变暗 */
html.dark .bg-cyan-50,
html.dark .bg-cyan-100,
html.dark .bg-cyan-200 {
    background-color: #1a2a2f !important;
    color: #8aaa8a !important;
}
html.dark .bg-cyan-500,
html.dark .bg-cyan-600 {
    background-color: #1a3a3f !important;
}
html.dark .text-cyan-500,
html.dark .text-cyan-600 {
    color: #6a9a9a !important;
}

/* Tailwind teal系 - 保持色调变暗 */
html.dark .bg-teal-50,
html.dark .bg-teal-100,
html.dark .bg-teal-200 {
    background-color: #1a2f2f !important;
    color: #8aaa8a !important;
}
html.dark .bg-teal-500,
html.dark .bg-teal-600 {
    background-color: #1a3f3f !important;
}
html.dark .text-teal-500,
html.dark .text-teal-600 {
    color: #6a9a9a !important;
}

/* Tailwind orange系 - 保持色调变暗 */
html.dark .bg-orange-50,
html.dark .bg-orange-100,
html.dark .bg-orange-200 {
    background-color: #2f2a1a !important;
    color: #aa9a7a !important;
}
html.dark .bg-orange-500,
html.dark .bg-orange-600 {
    background-color: #3f2a1a !important;
}
html.dark .text-orange-500,
html.dark .text-orange-600 {
    color: #aa8a6a !important;
}

/* 卡片内的图标和文字保持色调 */
html.dark .bg-blue-50 *,
html.dark .bg-green-50 *,
html.dark .bg-red-50 *,
html.dark .bg-yellow-50 *,
html.dark .bg-purple-50 *,
html.dark .bg-pink-50 *,
html.dark .bg-indigo-50 *,
html.dark .bg-cyan-50 *,
html.dark .bg-teal-50 *,
html.dark .bg-orange-50 * {
    color: var(--dark-text, #d0d0d0) !important;
}

/* PDF 区域在 dark mode 下使用更暗的背景 */
html.dark #pdf-container,
html.dark .bg-white.shadow-lg,
html.dark .shadow-lg.bg-white {
    background-color: var(--dark-bg, #0f0f0f) !important;
}

/* 夜间模式下所有导航栏变成深灰色 */
html.dark header,
html.dark nav,
html.dark .navbar,
html.dark .nav-container,
html.dark [class*="nav-"],
html.dark .mobile-nav {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
    border-bottom: 1px solid var(--dark-border, #2a2a2a) !important;
}

/* Logo 图标 */
html.dark img[src*="Logo.PNG"],
html.dark img[src*="logo.png"],
html.dark .logo {
    opacity: 0.9 !important;
}

/* 通用图标：降低亮度 */
html.dark img[src*=".gif"],
html.dark img[src*=".png"],
html.dark img[src*=".svg"] {
    opacity: 0.85 !important;
}

/* Font Awesome 图标：使用亮灰色 */
html.dark .icon,
html.dark [class*="icon-"],
html.dark i[class^="fa-"],
html.dark i.fa,
html.dark .fa {
    color: var(--dark-text, #d0d0d0) !important;
    opacity: 0.9 !important;
}

/* 卡片内的图标 */
html.dark .bg-blue-50 .fa,
html.dark .bg-green-50 .fa,
html.dark .bg-red-50 .fa,
html.dark .bg-yellow-50 .fa,
html.dark .bg-purple-50 .fa,
html.dark .bg-pink-50 .fa,
html.dark .bg-indigo-50 .fa,
html.dark .bg-cyan-50 .fa,
html.dark .bg-teal-50 .fa,
html.dark .bg-orange-50 .fa {
    color: var(--dark-text, #d0d0d0) !important;
    opacity: 1 !important;
}

/* 按钮边框：深色模式下使用深灰边框 */
html.dark button,
html.dark a.button,
html.dark .btn,
html.dark [class*="btn-"],
html.dark [class*="-btn"],
html.dark .tool-btn,
html.dark .rounded-md,
html.dark .rounded-lg,
html.dark .rounded {
    border: 1px solid var(--dark-border, #3a3a3a) !important;
}

/* 浅色背景的闭合元素保持色调变暗 */
/* 浅黄/橙色系 */
html.dark [style*="background:#fef3c7"],
html.dark [style*="background-color:#fef3c7"],
html.dark [style*="background:#fde68a"],
html.dark [style*="background-color:#fde68a"],
html.dark [style*="background:#fcd34d"],
html.dark [style*="background-color:#fcd34d"],
html.dark [style*="background:#fbbf24"],
html.dark [style*="background-color:#fbbf24"],
html.dark [style*="background:#f59e0b"],
html.dark [style*="background-color:#f59e0b"],
html.dark [style*="background: #fef3c7"],
html.dark [style*="background-color: #fef3c7"],
html.dark [style*="background: #fde68a"],
html.dark [style*="background-color: #fde68a"],
html.dark [style*="background:yellow"],
html.dark [style*="background-color:yellow"],
html.dark [style*="background: yellow"],
html.dark [style*="background-color: yellow"],
html.dark [style*="background:orange"],
html.dark [style*="background-color:orange"],
html.dark [style*="background: orange"],
html.dark [style*="background-color: orange"] {
    filter: brightness(0.3) !important;
}

/* 浅蓝/紫色系 */
html.dark [style*="background:#dbeafe"],
html.dark [style*="background-color:#dbeafe"],
html.dark [style*="background:#bfdbfe"],
html.dark [style*="background-color:#bfdbfe"],
html.dark [style*="background:#93c5fd"],
html.dark [style*="background-color:#93c5fd"],
html.dark [style*="background:#ddd6fe"],
html.dark [style*="background-color:#ddd6fe"],
html.dark [style*="background:#c7d2fe"],
html.dark [style*="background-color:#c7d2fe"],
html.dark [style*="background:#e0e7ff"],
html.dark [style*="background-color:#e0e7ff"],
html.dark [style*="background: #dbeafe"],
html.dark [style*="background-color: #dbeafe"] {
    filter: brightness(0.3) !important;
}

/* 浅绿/青色系 */
html.dark [style*="background:#d1fae5"],
html.dark [style*="background-color:#d1fae5"],
html.dark [style*="background:#a7f3d0"],
html.dark [style*="background-color:#a7f3d0"],
html.dark [style*="background:#6ee7b7"],
html.dark [style*="background-color:#6ee7b7"],
html.dark [style*="background:#dcfce7"],
html.dark [style*="background-color:#dcfce7"],
html.dark [style*="background:#cffafe"],
html.dark [style*="background-color:#cffafe"],
html.dark [style*="background: #d1fae5"],
html.dark [style*="background-color: #d1fae5"] {
    filter: brightness(0.3) !important;
}

/* 浅红/粉色系 */
html.dark [style*="background:#fee2e2"],
html.dark [style*="background-color:#fee2e2"],
html.dark [style*="background:#fecaca"],
html.dark [style*="background-color:#fecaca"],
html.dark [style*="background:#fecdd3"],
html.dark [style*="background-color:#fecdd3"],
html.dark [style*="background:#fce7f3"],
html.dark [style*="background-color:#fce7f3"],
html.dark [style*="background: #fee2e2"],
html.dark [style*="background-color: #fee2e2"] {
    filter: brightness(0.3) !important;
}

/* 浅灰色消息框/代码框/通用浅色 */
html.dark [style*="background:#f3f4f6"],
html.dark [style*="background-color:#f3f4f6"],
html.dark [style*="background:#e5e7eb"],
html.dark [style*="background-color:#e5e7eb"],
html.dark [style*="background:#f9fafb"],
html.dark [style*="background-color:#f9fafb"],
html.dark [style*="background:#fafafa"],
html.dark [style*="background-color:#fafafa"],
html.dark [style*="background:#f0f0f0"],
html.dark [style*="background-color:#f0f0f0"],
html.dark [style*="background:#f5f5f5"],
html.dark [style*="background-color:#f5f5f5"],
html.dark [style*="background:#fafbff"],
html.dark [style*="background-color:#fafbff"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background-color: #f3f4f6"],
html.dark [style*="background: #e5e7eb"],
html.dark [style*="background-color: #e5e7eb"],
html.dark [style*="background: #f9fafb"],
html.dark [style*="background-color: #f9fafb"],
html.dark [style*="background: #f0f0f0"],
html.dark [style*="background-color: #f0f0f0"],
html.dark [style*="background: #fafbff"],
html.dark [style*="background-color: #fafbff"] {
    background-color: var(--dark-card-bg, #1a1a1a) !important;
    color: var(--dark-text, #d0d0d0) !important;
}

/* 浅色边框的元素 */
html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border:1px solid #e5e7eb"],
html.dark [style*="border: 1px solid #f0f0f0"],
html.dark [style*="border:1px solid #f0f0f0"],
html.dark [style*="border: 1px solid #d1d5db"],
html.dark [style*="border:1px solid #d1d5db"],
html.dark [style*="border: 1px solid #d0d8ff"],
html.dark [style*="border:1px solid #d0d8ff"] {
    border-color: var(--dark-border, #3a3a3a) !important;
}

/* 通用 input/textarea */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: var(--dark-input-bg, #1a1a1a) !important;
    color: var(--dark-text, #d0d0d0) !important;
    border-color: var(--dark-border, #3a3a3a) !important;
}

/* 夜间模式下红色、橙色、黄色保持色调变暗 */
html.dark [style*="color: red"],
html.dark [style*="color:red"],
html.dark .text-red {
    filter: brightness(0.7) !important;
}

html.dark [style*="color: orange"],
html.dark [style*="color:orange"],
html.dark .text-orange {
    filter: brightness(0.7) !important;
}

html.dark [style*="color: yellow"],
html.dark [style*="color:yellow"],
html.dark .text-yellow {
    filter: brightness(0.7) !important;
}

html.dark [style*="background-color: red"],
html.dark [style*="background-color:red"],
html.dark .bg-red {
    filter: brightness(0.6) !important;
}

html.dark [style*="background-color: orange"],
html.dark [style*="background-color:orange"],
html.dark .bg-orange {
    filter: brightness(0.6) !important;
}

html.dark [style*="background-color: yellow"],
html.dark [style*="background-color:yellow"],
html.dark .bg-yellow {
    filter: brightness(0.6) !important;
}

/* 保持蓝色、绿色等彩色元素的色调 */
html.dark [class*="bg-blue"]:not(.bg-blue-50):not(.bg-blue-100):not(.bg-blue-200) {
    filter: brightness(0.5) !important;
}

html.dark [class*="bg-green"]:not(.bg-green-50):not(.bg-green-100):not(.bg-green-200) {
    filter: brightness(0.5) !important;
}

html.dark [class*="bg-purple"]:not(.bg-purple-50):not(.bg-purple-100):not(.bg-purple-200) {
    filter: brightness(0.5) !important;
}

html.dark [class*="bg-pink"]:not(.bg-pink-50):not(.bg-pink-100):not(.bg-pink-200) {
    filter: brightness(0.5) !important;
}

html.dark [class*="bg-indigo"]:not(.bg-indigo-50):not(.bg-indigo-100):not(.bg-indigo-200) {
    filter: brightness(0.5) !important;
}

html.dark [class*="bg-cyan"]:not(.bg-cyan-50):not(.bg-cyan-100):not(.bg-cyan-200) {
    filter: brightness(0.5) !important;
}

html.dark [class*="bg-teal"]:not(.bg-teal-50):not(.bg-teal-100):not(.bg-teal-200) {
    filter: brightness(0.5) !important;
}

/* 文字颜色保持色调变暗 */
html.dark [class*="text-blue"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-green"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-purple"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-pink"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-indigo"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-cyan"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-teal"] {
    filter: brightness(0.7) !important;
}

html.dark [class*="text-orange"] {
    filter: brightness(0.7) !important;
}