/* 夜间模式样式 */

/* 夜间模式下所有文字变为白色 */
html.dark body,
html.dark * {
    color: #ffffff !important;
}

/* 夜间模式下背景色 - 白色变为暗蓝色 */
html.dark body,
html.dark .bg-white {
    background-color: #1a237e !important;
}

/* 夜间模式下背景色 - 稍微灰一点的白色变成稍微蓝一点的暗蓝色 */
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: #283593 !important;
}

html.dark .bg-gray-200 {
    background-color: #303f9f !important;
}

html.dark .bg-gray-300 {
    background-color: #3949ab !important;
}

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

/* Logo 图标渐变装饰效果 */
html.dark img[src*="Logo.PNG"],
html.dark img[src*="logo.png"],
html.dark .logo {
    filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6))
            drop-shadow(0 0 20px rgba(59, 130, 246, 0.4))
            drop-shadow(0 0 30px rgba(16, 185, 129, 0.3)) !important;
    animation: logoGradientDark 4s ease-in-out infinite !important;
}

@keyframes logoGradientDark {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.6))
                drop-shadow(0 0 20px rgba(59, 130, 246, 0.4))
                drop-shadow(0 0 30px rgba(16, 185, 129, 0.3));
    }
    33% {
        filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.7))
                drop-shadow(0 0 25px rgba(99, 102, 241, 0.5))
                drop-shadow(0 0 35px rgba(249, 115, 22, 0.4));
    }
    66% {
        filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.8))
                drop-shadow(0 0 30px rgba(59, 130, 246, 0.6))
                drop-shadow(0 0 40px rgba(99, 102, 241, 0.5));
    }
}

/* 夜间模式下所有图标渐变效果 */
html.dark img[src*=".gif"],
html.dark img[src*=".png"],
html.dark img[src*=".svg"],
html.dark .icon,
html.dark [class*="icon"] {
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5))
            drop-shadow(0 0 16px rgba(59, 130, 246, 0.3))
            drop-shadow(0 0 24px rgba(16, 185, 129, 0.2)) !important;
    animation: iconGradientDark 3s ease-in-out infinite !important;
}

@keyframes iconGradientDark {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5))
                drop-shadow(0 0 16px rgba(59, 130, 246, 0.3))
                drop-shadow(0 0 24px rgba(16, 185, 129, 0.2));
    }
    25% {
        filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.6))
                drop-shadow(0 0 20px rgba(99, 102, 241, 0.4))
                drop-shadow(0 0 30px rgba(249, 115, 22, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.7))
                drop-shadow(0 0 24px rgba(59, 130, 246, 0.5))
                drop-shadow(0 0 36px rgba(99, 102, 241, 0.4));
    }
    75% {
        filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.6))
                drop-shadow(0 0 20px rgba(16, 185, 129, 0.4))
                drop-shadow(0 0 30px rgba(59, 130, 246, 0.3));
    }
}

/* 夜间模式下红色、橙色、黄色边暗一点 */
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.7) !important;
}

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

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