body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 更改字体 */
    margin: 0;
    background-color: #1a1a2e; /* 深蓝色背景 */
    color: #e0e0e0; /* 浅色字体 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    background-color: #16213e; /* 稍浅的深蓝色 */
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.3), 0 0 50px rgba(0, 255, 255, 0.1); /* 科技感光晕效果 */
    width: 90%;
    max-width: 800px;
    box-sizing: border-box;
    border: 1px solid #0f3460; /* 细边框 */
}

h1 {
    text-align: center;
    color: #00ffff; /* 青色标题 */
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.upload-section, .options-section, .result-section {
    margin-bottom: 25px;
    padding: 15px;
    background-color: #0f3460; /* 模块背景 */
    border-radius: 8px;
    border: 1px solid #0a2342;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #a0a0a0;
    font-weight: bold;
}

input[type="file"],
select,
input[type="number"] {
    width: calc(100% - 22px);
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #00ffff; /* 青色边框 */
    border-radius: 6px;
    background-color: #0a1128; /* 输入框背景 */
    color: #e0e0e0;
    box-sizing: border-box;
}

/* 新增样式 */
.options-section small {
    display: block;
    margin-top: -10px;
    margin-bottom: 15px;
    font-size: 0.8em;
    color: #708090;
}

button {
    display: block;
    width: 100%;
    padding: 12px;
    background-color: #00ffff; /* 青色按钮 */
    color: #1a1a2e; /* 深色字体 */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

button:hover {
    background-color: #00e6e6; /* 悬停效果 */
    transform: translateY(-2px);
}

#imageContainer {
    margin-top: 20px;
    padding: 15px;
    border: 1px dashed #555; /* 虚线边框，科技感 */
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.2); /* 轻微的背景，增加层次感 */
    min-height: 100px; /* 至少有一个高度，即使没有内容 */
    /* text-align: center; /* Flexbox 会处理对齐 */
    display: flex; /* 新增：使用 Flexbox 布局 */
    flex-wrap: wrap; /* 新增：允许换行 */
    justify-content: flex-start; /* 新增：从左开始排列 */
    gap: 10px; /* 新增：图片之间的间隙 */
}

#imageContainer img {
    /* max-width: 100%; */ /* 由 flex-basis 控制宽度 */
    /* max-height: 300px; */ /* 调整此值以使缩略图更小 */
    max-height: 120px; /* 显著减小高度，使缩略图更小 */
    /* display: block; */ /* Flex item 默认为 block-like */
    /* margin: 0 auto 10px auto; */ /* Flexbox gap 会处理间距 */
    border: 2px solid #00eaff; /* 科技感的边框 */
    box-shadow: 0 0 10px rgba(0, 234, 255, 0.3); /* 减小阴影 */
    border-radius: 4px;
    object-fit: contain; /* 确保图片内容完整显示，不变形 */
    flex-basis: calc(100% / 6 - 10px - (2px * 2)); /* 新增：一行大约6个，减去gap和边框 */
    /* 减去的10px是基于gap的一半估算，精确值取决于gap和图片数量 */
    /* 也可以使用如 flex-basis: 15%; 来大致控制 */
    box-sizing: border-box; /* 确保 padding 和 border 在宽度计算之内 */
}

/* 单独的下载链接样式 (如果将来再次启用) */
.download-link {
    display: block;
    margin-top: 5px;
    margin-bottom: 15px; /* 增加与下方hr的间距 */
    padding: 8px 12px;
    background-color: #0f3460; /* 与模块背景色协调 */
    color: #00ffff; /* 青色文字，更清晰 */
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    transition: background-color 0.3s ease;
    border: 1px solid #00ffff; /* 添加边框以突出 */
}

.download-link:hover {
    background-color: #1a4a8a;
}

/* "全部下载" 按钮的样式调整（如果它是通过JS动态添加的，确保JS中添加了正确的class） */
/* 如果 downloadActionsContainer 内的按钮需要特定样式 */
#downloadActionsContainer button {
    background-color: #00ffff; /* 与主转换按钮一致的青色 */
    color: #1a1a2e; /* 深色字体 */
    /* 其他样式可以继承全局 button 或按需覆盖 */
}

#downloadActionsContainer p {
    /* 打包和下载完成提示信息的样式 */
    margin-top: 10px;
    font-size: 0.9em;
}

.download-buttons-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.download-buttons-container button {
    width: auto;
    flex-grow: 1;
    max-width: 300px;
    background-color: #00cc66; /* 绿色下载按钮 */
    box-shadow: 0 0 15px rgba(0, 204, 102, 0.4);
}

.download-buttons-container button:hover {
    background-color: #00b359;
}

.options-section label,
.upload-section label {
    display: block;
    margin-top: 15px; /* 增加标签的上边距，使其与前一个控件分隔更清晰 */
    margin-bottom: 5px;
    color: #00eaff; /* 科技蓝 */
    font-weight: bold;
}

.options-section input[type="number"],
.options-section select,
.upload-section input[type="file"] {
    width: calc(100% - 22px); /* 减去 padding 和 border */
    padding: 10px;
    margin-bottom: 5px; /* 给下方可能的错误提示或小字提示留出空间 */
    border-radius: 4px;
    border: 1px solid #555;
    background-color: #2c2c2c; /* 深色背景 */
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

.error-message {
    display: block; /* 确保它占据独立一行 */
    color: #ff4757; /* 鲜艳的红色错误提示 */
    font-size: 0.85em;
    margin-top: 2px; /* 与输入框的微小间距 */
    margin-bottom: 8px; /* 增加与下方 small 标签的间距，防止重叠 */
    min-height: 1.2em; /* 给错误消息一个最小高度，即使为空，也能保持布局稳定 */
}

.options-section small {
    display: block;
    font-size: 0.8em;
    color: #aaa; /* 浅灰色提示文字 */
    margin-top: 0px; /* 由于 error-message 已有 margin-bottom，这里可以设为0或微调 */
    line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 20px;
    }

    h1 {
        font-size: 1.8em;
    }

    button {
        font-size: 16px;
    }

    input[type="file"],
    select,
    input[type="number"] {
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 15px;
    }

    h1 {
        font-size: 1.5em;
    }

    .download-buttons-container {
        flex-direction: column;
    }
}