/* 夜间模式通用样式 */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 夜间模式样式 */
body.dark-mode {
    background: #1a1a1a !important;
    color: #e0e0e0;
}

body.dark-mode .header-card {
    background: #2d2d2d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode #app {
    background: #1a1a1a !important;
}

body.dark-mode .project-card,
body.dark-mode .glass-card {
    background: #2d2d2d !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .bg-white {
    background: #2d2d2d !important;
}

body.dark-mode .bg-gray-50 {
    background: #252525 !important;
}

body.dark-mode .bg-gray-100 {
    background: #333 !important;
}

body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
    color: #e0e0e0 !important;
}

body.dark-mode .text-gray-600 {
    color: #a0a0a0 !important;
}

body.dark-mode .text-gray-500 {
    color: #888 !important;
}

body.dark-mode .text-gray-400 {
    color: #666 !important;
}

body.dark-mode .border-gray-200,
body.dark-mode .border-gray-100 {
    border-color: #404040 !important;
}

body.dark-mode .bottom-nav {
    background: #2d2d2d !important;
    border-top-color: #404040 !important;
}

body.dark-mode .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

/* 夜间模式下的卡片和容器 */
body.dark-mode [class*="bg-gradient"] {
    opacity: 0.9;
}

/* 保持蓝色按钮和链接的可见性 */
body.dark-mode .bg-blue-600,
body.dark-mode .bg-blue-500 {
    background: #1890ff !important;
}

body.dark-mode .text-blue-600 {
    color: #40a9ff !important;
}

/* 保持黄色元素的可见性 */
body.dark-mode .bg-yellow-500,
body.dark-mode .bg-yellow-400 {
    background: #faad14 !important;
}

body.dark-mode .text-yellow-600 {
    color: #ffc53d !important;
}