body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.dark-mode {
    background-color: #121212; /* 暗色模式背景 */
    color: #ffffff; /* 暗色模式文字颜色 */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s; /* 添加过渡效果 */
}

.dark-mode .header-container {
    background-color: #1e1e1e; /* 暗色模式头部背景 */
}

.container {
    max-width: 1160px;
    margin: 20px auto; /* 居中显示 */
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background-color 0.3s; /* 添加过渡效果 */
}

.dark-mode .container {
    background: #2a2a2a; /* 暗色模式容器背景 */
}

.stats-card {
    background: #e0e0e0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    transition: background-color 0.3s; /* 添加过渡效果 */
    text-align: center; /* 中心对齐 */
}

.dark-mode .stats-card {
    background: #3a3a3a; /* 暗色模式统计卡片背景 */
}

#previewArea {
    margin-bottom: 20px;
}

.faq {
    margin-top: 20px;
}

footer {
    margin-top: 20px;
    font-size: 0.8em;
}

button {
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s; /* 添加过渡效果 */
}

button:hover {
    background-color: #0056b3; /* 按钮悬停效果 */
}

.dark-mode button {
    background-color: #0056b3; /* 暗色模式按钮背景 */
}

.dark-mode button:hover {
    background-color: #004494; /* 暗色模式按钮悬停效果 */
}

.image-preview {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#originalImage, #processedImage {
    width: 48%; /* 每个图片占据48%的宽度 */
}

.icon {
    width: 24px; /* 设置图标宽度 */
    height: 24px; /* 设置图标高度 */
}

.upload-area {
    margin-bottom: 20px;
    padding: 20px;
    border: 2px dashed #007bff; /* 虚线边框 */
    border-radius: 8px;
    background-color: #f9f9f9; /* 背景颜色 */
    transition: background-color 0.3s; /* 添加过渡效果 */
}

.upload-area:hover {
    background-color: #e9f5ff; /* 悬停时的背景颜色 */
}

.upload-label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #007bff; /* 标签颜色 */
    cursor: pointer; /* 鼠标指针样式 */
}

.upload-input {
    display: none; /* 隐藏文件输入 */
}

.processing-text {
    font-size: 18px; /* 提示文字大小 */
    color: #ff9800; /* 提示文字颜色 */
    margin-top: 10px; /* 上边距 */
    font-weight: bold; /* 加粗 */
    display: none; /* 默认隐藏 */
}

.processing-card {
    background: #f0f0f0;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.toast {
    position: fixed;
    top: 50%; /* 居中显示 */
    left: 50%;
    transform: translate(-50%, -50%); /* 居中对齐 */
    background-color: #4caf50; /* 成功通知颜色 */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: opacity 0.5s;
    z-index: 1000; /* 确保在最上层 */
}

.faq p {
    margin: 5px 0; /* FAQ内容间距 */
}

.faq-card {
    background: #f9f9f9; /* 背景颜色 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    text-align: left; /* 左对齐 */
}

.version-card {
    background: #e0e0e0; /* 背景颜色 */
    padding: 15px;
    border-radius: 8px;
    text-align: center; /* 居中对齐 */
    margin-top: 20px;
}

.dark-mode .faq-card {
    background: #2a2a2a; /* 暗色模式背景 */
    color: #ffffff; /* 暗色模式文字颜色 */
}

.dark-mode .version-card {
    background: #3a3a3a; /* 暗色模式背景 */
    color: #ffffff; /* 暗色模式文字颜色 */
}

.dark-mode .faq-question {
    color: #ffffff; /* 问题文字颜色 */
}

.dark-mode .faq-answer {
    color: #cccccc; /* 答案文字颜色 */
}

.faq-item {
    margin-bottom: 10px; /* 问题和答案之间的间距 */
}

.faq-question {
    font-weight: bold; /* 问题加粗 */
}

.faq-answer {
    margin-left: 20px; /* 答案缩进 */
}