body {
    font-family: Arial, sans-serif; /* 设置全局字体为Arial，备选为sans-serif */
    margin: 0; /* 清除默认外边距 */
    padding: 0; /* 清除默认内边距 */
    line-height: 1.6; /* 增加行高，提升可读性 */
}


/*调整导航栏 */
nav {
    background-color: rgb(123, 73, 183);
    padding: 0 20px;
    height: 70px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    position: sticky; 
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  
  .content {
    margin-top: 0; /* 移除顶部外边距 */
    padding: 10px; /* 减少内边距 */
    padding-bottom: 60px; /* 保持底部内边距以避免被页脚遮挡 */
    border-top: none; /* 移除顶部边框 */
  }

nav ul {/* 导航栏样式 */
    list-style-type: none; /* 删除列表项前的默认项目符号 */
    padding: 0; /* 清除内部填充 */
    display: flex; /* 使用弹性布局以横向排列列表项 */
    justify-content: flex-end; /* 列表项在主轴上右对齐 */
    align-items: center; /* 列表项在交叉轴上垂直居中 */
    gap: 10px; /* 添加列表项之间的间距 */
}

nav ul li {
    color: white; /* 设置列表项文字颜色 */
    cursor: pointer; /* 鼠标悬停时显示为可点击风格 */
    padding: 8px 20px; /* 增加内边距 */
    text-align: center; /* 文本居中对齐 */
    transition: background-color 0.3s; /* 背景颜色改变时添加平滑过渡 */
    font-size: 14px; /* 增大字体大小 */
}

nav ul li:hover {
    background-color: transparent; /* 移除背景色 */
    text-decoration: none; /* 移除下划线 */
}

/* 导航栏左侧文字 */
.nav-left-text {
    margin-left: 10px;
    margin-right: auto;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    text-decoration: none; /* 添加这行确保链接没有下划线 */
    cursor: pointer;
    white-space: nowrap;  /* 防止文本换行 */
}

/* 添加悬停效果 */
a.nav-left-text:hover {
    color: #a01bd9; /* 匹配导航链接悬停文字颜色 */
    text-decoration: none;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 添加文字光晕 */
}

/* "cwqi计算部分"文字以及图片 */
.header-text {
    color: red; /* 调整文字颜色 */
    font-weight: bold; /* 加粗文字 */
    margin-bottom: 15px; /* 增加下方间距 */
}

/* 添加文字说明容器样式 */
.instructions-container {
    border: 3px solid rgba(123, 73, 183, 0.6); /* 与图片边框相同的边框样式 */
    border-radius: 8px; /* 圆角效果 */
    padding: 15px 20px; /* 内边距 */
    margin: 20px 0; /* 上下外边距 */
    box-shadow: 0 5px 15px rgba(123, 73, 183, 0.3); /* 柔和的阴影效果 */
}

.cwqi-image {
    max-width: 40%; /* 调整图片的最大宽度 */
    height: auto; /* 根据最大宽度自动保持高度比例 */
    margin-top: 10px; /* 增加图片顶部的外边距 */
    display: block; /* 确保图片为块级元素 */
    margin-left: 20px; /* 添加左边距 */
    margin-bottom: 20px; /* 添加底部边距，与后续内容分隔 */
    border-radius: 8px; /* 添加圆角 */
    box-shadow: 0 5px 15px rgba(123, 73, 183, 0.3); /* 添加柔和的阴影 */
    transition: all 0.3s ease; /* 添加过渡效果 */
    border: 3px solid rgba(123, 73, 183, 0.6); /* 修改为简单实线边框 */
    animation: imagePulse 2s infinite alternate; /* 添加轻微的脉动动画 */
    padding: 5px; /* 减小内边距，更加简洁 */
}

/* 图片脉动动画效果 */
@keyframes imagePulse {
    from {
        box-shadow: 0 5px 15px rgba(126, 55, 213, 0.3);
        border-color: rgba(123, 73, 183, 0.5);
    }
    to {
        box-shadow: 0 8px 20px rgba(126, 55, 213, 0.4);
        border-color: rgba(123, 73, 183, 0.7);
    }
}

/* 图片悬停效果 */
.cwqi-image:hover {
    transform: translateY(-3px); /* 悬停时轻微上浮 */
    box-shadow: 0 8px 15px rgba(126, 55, 213, 0.5); /* 增强阴影 */
    border-color: rgba(123, 73, 183, 0.9); /* 悬停时边框颜色加深 */
}
/* "cwqi计算部分"文字以及图片 */

/*导出按钮（cwqi计算页面的） */
#exportButton {
    background-color: rgb(123, 73, 183); /* 紫色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 8px 20px; /* 内边距8px 20px */
    border-radius: 4px; /* 4px圆角 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: background-color 0.3s; /* 背景颜色变化过渡效果0.3秒 */
}

#exportButton:hover {
    background-color: rgba(123, 73, 183, 0.8); /* 悬停时背景颜色变为80%透明度的紫色 */
}

/* 计算CWQI按钮样式 */
#CWQI button {
    background-color: rgb(123, 73, 183); /* 紫色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 8px 20px; /* 内边距8px 20px */
    border-radius: 4px; /* 4px圆角 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: background-color 0.3s; /* 背景颜色变化过渡效果0.3秒 */
    margin-right: 10px; /* 按钮之间的间距 */
}

#CWQI button:hover {
    background-color: rgba(123, 73, 183, 0.8); /* 悬停时背景颜色变为80%透明度的紫色 */
}
/*导出按钮（cwqi计算页面的） */

/* 调整logo图片 */
.nav-logo {
    width: 60px; /* 调整图片的宽度 */
    height: auto; /* 保持图片的高度比例 */
    margin-right: 10px; /* 增加图片右侧间距 */
    margin-left: 20px; /* 增加图片左侧间距 */
}
/* 调整logo图片 */


/* 设置页脚 */
footer {
    background-color: rgb(123, 73, 183); /* 设置页脚背景颜色 */
    color: white; /* 设置页脚文字颜色为白色 */
    text-align: center; /* 文本在页脚居中对齐 */
    padding: 3px 0; /* 设置页脚上下的内边距 */
    width: 100%; /* 页脚宽度为100% */
    font-size: 10px; /* 设置页脚字体大小 */
    
    /* 在桌面设备上使用固定定位 */
    position: fixed; 
    bottom: 0; /* 将页脚定位在页面底部 */
    
    /* 确保在所有浏览器中z-index正常工作 */
    z-index: 100;
}

/* 移动端上使用相对定位，防止覆盖内容 */
@media screen and (max-width: 768px) {
    footer {
        position: relative;
        margin-top: 20px;
    }
    
    /* 在内容底部添加额外空间，提供更好的视觉效果 */
    body {
        margin-bottom: 30px;
    }
}

/* 控制"计算说明"文本的缩进。 */
.indent-1 {
    text-indent: 2em; /* indent-1的缩进 */
}

.indent-2 {
    text-indent: 4em; /* indent-2的缩进 */
}

.indent-3 {
    text-indent: 6em; /* indent-3的缩进 */
}
.indent-4 {
    text-indent: 7em; /* indent-4的缩进 */
}
.indent-5 {
    text-indent: 40%; /* indent-5的缩进 */
}
/* 控制"计算说明"文本的缩进。 */


/* 控制"计算说明"页面图片。 */
.parent-container {
    text-align: center; /* 使子元素（图片）水平居中 */
}
.standard-image {
    width: 50%; /* 调整图片宽度 */
    height: auto; /* 自动调整高度以保持比例 */
    margin: 5px 0; /* 增加上下间距 */
    padding: 2px 0; /* 添加上下内边距，增加容错空间 */
}
/* 控制"计算说明"页面图片。 */


/* 错误提示样式 (处理文件时出错)*/
.error-message {
    color: #6666dc; /* 使用较柔和的红色 */
    background-color: #fff2f0; /* 浅红色背景 */
    padding: 10px 15px; /* 内边距 */
    border: 1px solid #ffccc7; /* 浅红色边框 */
    border-radius: 4px; /* 圆角边框 */
    margin: 10px 0; /* 上下外边距 */
    font-size: 14px; /* 字体大小 */
    display: inline-block; /* 行内块级显示 */
}
/* Excel处理页面样式 */
#excel {
    min-height: calc(100vh - 150px); /* 设置最小高度为视口高度减去150px，确保内容区域足够大 */
    padding-bottom: 60px; /* 底部内边距，防止内容被页脚遮挡 */
}

/* Excel处理示例图片样式 */
.excel-image {
    max-width: 80%;
    height: auto;
    display: block;
    margin: 20px auto; /* 保持水平居中 */
}

/* Excel文件输入框样式 */
#excelFileInput {
    margin: 15px 0; /* 上下外边距15px */
    padding: 8px; /* 内边距8px */
    border: 1px solid #ccc; /* 1px灰色边框 */
    border-radius: 4px; /* 4px圆角 */
    width: 300px; /* 固定宽度300px */
}

/* 按钮容器样式 */
.button-container {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

/* 上传按钮样式 */
#excel button {
    background-color: rgb(123, 73, 183); /* 紫色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 8px 20px; /* 内边距8px 20px */
    border-radius: 4px; /* 4px圆角 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: background-color 0.3s; /* 背景颜色变化过渡效果0.3秒 */
}

/* 上传按钮悬停效果 */
#excel button:hover {
    background-color: rgba(123, 73, 183, 0.8); /* 悬停时背景颜色变为80%透明度的紫色 */
}

/* 表格输出区域样式 */
#excelOutput {
    margin-top: 20px; /* 顶部外边距20px */
    padding: 15px; /* 内边距15px */
    border: 1px solid #ddd; /* 1px浅灰色边框 */
    border-radius: 4px; /* 4px圆角 */
    background-color: #f9f9f9; /* 浅灰色背景 */
    min-height: 100px; /* 最小高度100px */
}

/* 预览表格整体样式 */
.preview-table {
    width: 97%; /* 表格宽度占满容器 */
    border-collapse: collapse; /* 合并单元格边框 */
    margin-bottom: 20px; /* 底部外边距 */
    max-height: 500px; /* 最大高度限制 */
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
    display: block; /* 块级显示 */
    background-color: #f0f0f0; /* 添加灰色背景 */
    padding: 10px; /* 添加内边距使表格与容器边缘有一定距离 */
    border-radius: 8px; /* 添加圆角效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果增强立体感 */
}

/* 表头和表体样式 */
.preview-table thead,
.preview-table tbody {
    display: block; /* 块级显示 */
    width: 100%; /* 宽度占满容器 */
}

/* 表格行样式 */
.preview-table tr {
    display: table; /* 保持表格布局 */
    width: 100%; /* 宽度占满容器 */
    table-layout: fixed; /* 固定表格布局 */
}

/* 表头和单元格通用样式 */
.preview-table th,
.preview-table td {
    padding: 8px; /* 内边距8px */
    border: 1px solid #ddd; /* 1px浅灰色边框 */
    text-align: center; /* 内容居中显示 */
    background-color: white; /* 确保单元格保持白色背景 */
}

/* 表头特殊样式 */
.preview-table th {
    background-color: #f5f5f5; /* 浅灰色背景 */
    font-weight: bold; /* 加粗字体 */
}

/* 表格行悬停效果 */
.preview-table tr:hover {
    background-color: #f9f9f9; /* 悬停时背景变为更浅的灰色 */
}

/* CWQI结果容器样式 */
#output .results-container {
    display: flex; /* 使用弹性布局 */
    gap: 20px; /* 表格之间的间距 */
    margin-bottom: 20px; /* 底部外边距 */
}

/* CWQI结果表格样式 */
#output .preview-table {
    width: 48%; /* 调整表格宽度为容器的48% */
    border-collapse: collapse; /* 合并单元格边框 */
    margin-bottom: 0; /* 移除底部外边距 */
    max-height: 500px; /* 最大高度限制 */
    overflow-y: auto; /* 内容超出时显示垂直滚动条 */
    display: block; /* 块级显示 */
    background-color: #f0f0f0; /* 添加灰色背景 */
    padding: 10px; /* 添加内边距 */
    border-radius: 8px; /* 添加圆角效果 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果增强立体感 */
}

/* 表头和表体样式 */
#output .preview-table thead,
#output .preview-table tbody {
    display: block; /* 块级显示 */
    width: 100%; /* 宽度占满容器 */
}

/* 表格行使用表格布局 */
#output .preview-table tr {
    display: table; /* 保持表格布局 */
    width: 100%; /* 宽度占满容器 */
    table-layout: fixed; /* 固定表格布局 */
}

/* 表头和单元格样式 */
#output .preview-table th,
#output .preview-table td {
    padding: 8px; /* 内边距8px */
    border: 1px solid #ddd; /* 1px浅灰色边框 */
    text-align: center; /* 内容居中显示 */
}

/* 表头样式 */
#output .preview-table th {
    background-color: #f5f5f5; /* 浅灰色背景 */
    font-weight: bold; /* 加粗字体 */
}

/* 图表控制区域容器样式 */
.chart-controls {
    background-color: #f5f5f5; /* 浅灰色背景 */
    padding: 20px; /* 内边距20px */
    border-radius: 8px; /* 圆角边框 */
    margin: 20px 0; /* 上下外边距20px */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

/* 图表控制区域标题样式 */
.chart-controls h3 {
    margin-top: 0; /* 移除顶部外边距 */
    color: #333; /* 深灰色文字 */
    font-size: 1.2em; /* 字体大小1.2倍 */
    margin-bottom: 15px; /* 底部外边距15px */
}

/* 控制组容器样式 */
.control-group {
    margin-bottom: 15px; /* 底部外边距15px */
    padding: 10px; /* 内边距10px */
    border-bottom: 1px solid #eee; /* 底部边框分隔线 */
}

/* 标签样式 */
.control-group label {
    display: inline-block; /* 行内块级元素 */
    width: 100px; /* 固定宽度100px */
    font-weight: bold; /* 加粗字体 */
    color: #555; /* 中灰色文字 */
    margin-right: 10px; /* 右侧外边距10px */
}

/* 下拉选择框样式 */
.control-group select {
    width: 200px; /* 固定宽度200px */
    padding: 8px; /* 内边距8px */
    border: 1px solid #ddd; /* 浅灰色边框 */
    border-radius: 4px; /* 圆角边框 */
    background-color: white; /* 白色背景 */
}

/* 多选下拉框样式 */
.control-group select[multiple] {
    height: 100px; /* 固定高度100px */
}

/* 筛选组样式 */
.filter-group {
    display: inline-flex; /* 行内弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 元素间距10px */
    align-items: center; /* 垂直居中对齐 */
}

/* 筛选选项容器样式 */
#filterOptions {
    margin-top: 10px; /* 顶部外边距10px */
    padding: 10px; /* 内边距10px */
    background-color: white; /* 白色背景 */
    border: 1px solid #ddd; /* 浅灰色边框 */
    border-radius: 4px; /* 圆角边框 */
}

/* 按钮组样式 */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

/* 按钮样式 */
.button-group button {
    background-color: #4CAF50; /* 绿色背景 */
    color: white; /* 白色文字 */
    padding: 10px 20px; /* 内边距:上下10px,左右20px */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角边框 */
    cursor: pointer; /* 鼠标指针样式 */
    font-size: 14px; /* 字体大小14px */
    transition: background-color 0.3s; /* 背景色过渡动画 */
}

/* 按钮悬停效果 */
.button-group button:hover {
    background-color: #45a049; /* 深绿色背景 */
}

/* 统计信息容器样式 */
.stats-container {
    margin: 20px 0; /* 上下外边距20px */
    padding: 20px; /* 内边距20px */
    background-color: white; /* 白色背景 */
    border-radius: 8px; /* 圆角边框 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
}

/* 统计信息网格布局 */
.stats-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
    gap: 20px; /* 网格间距20px */
    margin-top: 15px; /* 顶部外边距15px */
}

/* 统计卡片样式 */
.stat-card {
    padding: 15px; /* 内边距15px */
    background-color: #f9f9f9; /* 浅灰色背景 */
    border-radius: 4px; /* 圆角边框 */
    text-align: center; /* 文字居中 */
}

/* 统计卡片标题样式 */
.stat-card .stat-title {
    font-size: 14px; /* 字体大小14px */
    color: #666; /* 灰色文字 */
    margin-bottom: 5px; /* 底部外边距5px */
}

/* 统计卡片数值样式 */
.stat-card .stat-value {
    font-size: 18px; /* 字体大小18px */
    font-weight: bold; /* 加粗字体 */
    color: #333; /* 深灰色文字 */
}

/* 图表容器样式 */
#chartContainer {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    width: 100%;
    min-height: 400px;
    height: calc(100vh - 300px);
    max-height: 800px;
}

/* 图表加载动画样式 */
.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* 图表响应式布局 */
@media screen and (max-width: 768px) {
    #chartContainer {
        height: calc(100vh - 200px);
        min-height: 300px;
        padding: 10px;
    }
    
    .chart-controls {
        padding: 10px;
    }
    
    .control-group {
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 480px) {
    #chartContainer {
        height: calc(100vh - 150px);
        min-height: 250px;
    }
    
    .chart-controls select,
    .chart-controls input {
        font-size: 14px;
        padding: 5px;
    }
}

/* 优化图表工具箱样式 */
.echarts-tooltip {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 10px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.echarts-toolbox {
    right: 20px !important;
}

/* 图表主题切换动画 */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 分析功能复选框组样式 */
.checkbox-group {
    display: flex; /* 使用弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 设置间距 */
    margin: 10px 0; /* 上下外边距 */
    padding: 5px 0; /* 上下内边距 */
}

.checkbox-group label {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 5px; /* 复选框和文字之间的间距 */
    font-weight: normal; /* 正常字重 */
    cursor: pointer; /* 鼠标指针样式 */
    white-space: nowrap; /* 防止文字换行 */
}

.checkbox-group input[type="checkbox"] {
    margin: 0; /* 移除默认边距 */
    cursor: pointer; /* 鼠标指针样式 */
}

/* 分析功能区域样式 */
.analysis-functions {
    background-color: #f8f9fa; /* 浅灰色背景 */
    padding: 15px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    margin: 10px 0; /* 上下外边距 */
    border: 1px solid #e9ecef; /* 边框 */
}

/* 分析功能标题样式 */
.analysis-functions label {
    font-weight: bold; /* 加粗字体 */
    margin-bottom: 10px; /* 底部外边距 */
    display: block; /* 块级显示 */
}
/* 建议添加兼容性处理 */
@supports (position: sticky) {
    nav {
      position: sticky;
      top: 0;
    }
  }
  
  @supports not (position: sticky) {
    nav {
      position: fixed;
    }
    .content {
      padding-top: 70px;
    }
  }

/* =============================================
   Excel拆分工具样式
   功能: 多工作表Excel文件拆分
   ============================================= */

/* Excel拆分工具容器样式 */
#split .container {
    background-color: white;      /* 设置白色背景 */
    padding: 20px;               /* 设置内边距为20px，使内容与边框有一定距离 */
    border-radius: 8px;          /* 设置圆角为8px，使容器更美观 */
    margin-bottom: 20px;         /* 底部外边距20px，与下方元素保持间距 */
}

/* 标题样式 */
#split h2 {
    color: red;                  /* 标题文字设置为红色，突出显示 */
    font-weight: bold;           /* 字体加粗，增强视觉效果 */
    margin-bottom: 15px;         /* 底部外边距15px，与下方内容保持适当间距 */
}

/* 文件上传区域样式 */
#splitFileInput {
    margin: 15px 0;             /* 上下外边距15px，左右无外边距 */
    padding: 8px;               /* 内边距8px，使输入框更易点击 */
    border: 1px solid #ccc;     /* 1像素实线边框，使用浅灰色 */
    border-radius: 4px;         /* 圆角4px，与其他元素风格统一 */
    width: 300px;               /* 固定宽度300px，保持适当的输入区域 */
}

/* 状态提示区域样式 */
#splitStatus {
    margin: 15px 0;             /* 上下外边距15px，保持垂直间距 */
    padding: 10px;              /* 内边距10px，使提示信息更易阅读 */
    border-radius: 4px;         /* 圆角4px，保持统一风格 */
}

/* 错误状态样式 */
#splitStatus.error {
    color: #6666dc;             /* 错误文字颜色设置为柔和的蓝紫色 */
    background-color: #fff2f0;  /* 浅红色背景，突出错误提示 */
    border: 1px solid #ffccc7;  /* 浅红色边框 */
}

/* 成功状态样式 */
#splitStatus.success {
    color: rgb(123, 73, 183);             /* 文字颜色改为主题紫色 */
    background-color: rgba(123, 73, 183, 0.1);  /* 浅紫色背景 */
    border: 1px solid rgba(123, 73, 183, 0.2);  /* 浅紫色边框 */
}

/* 警告状态样式 */
#splitStatus.warning {
    color: #856404;             /* 警告文字颜色设置为深黄色 */
    background-color: #fff3cd;  /* 浅黄色背景 */
    border: 1px solid #ffeeba;  /* 浅黄色边框 */
}

/* 进度条容器样式 */
.progress {
    margin: 15px 0;             /* 上下外边距15px */
    height: 20px;               /* 高度20px，使进度条醒目 */
    background-color: #f5f5f5;  /* 浅灰色背景 */
    border-radius: 4px;         /* 圆角4px */
    overflow: hidden;           /* 超出部分隐藏，保持圆角效果 */
}

/* 进度条样式 */
.progress-bar {
    height: 100%;               /* 高度100%，填满容器 */
    background-color: rgb(123, 73, 183);  /* 设置进度条为主题紫色 */
    transition: width 0.3s ease;  /* 添加宽度变化的过渡动画，使进度更平滑 */
}

/* 预览区域样式 */
#splitPreview {
    margin-top: 20px;           /* 顶部外边距20px */
    padding: 15px;              /* 内边距15px */
    border: 1px solid #ddd;     /* 浅灰色边框 */
    border-radius: 4px;         /* 圆角4px */
    background-color: #f9f9f9;  /* 浅灰色背景 */
}

/* 下载区域样式 */
#splitDownloads {
    margin-top: 20px;           /* 顶部外边距20px */
}

/* 下载链接样式 */
#splitDownloads a {
    display: inline-block;      /* 行内块级显示 */
    background-color: rgb(123, 73, 183);  /* 主题紫色背景 */
    color: white;               /* 白色文字 */
    padding: 8px 20px;          /* 内边距：上下8px，左右20px */
    border-radius: 4px;         /* 圆角4px */
    text-decoration: none;      /* 移除下划线 */
    margin: 5px;                /* 外边距5px */
    transition: background-color 0.3s;  /* 背景色变化过渡动画 */
}

/* 下载链接悬停效果 */
#splitDownloads a:hover {
    background-color: rgba(123, 73, 183, 0.8);  /* 悬停时背景色透明度变为0.8 */
}

/* 更新按钮样式 */
button.update-btn {
    padding: 4px 20px;         /* 减小上下内边距使高度与文件选择框一致 */
    background-color: rgb(123, 73, 183) !important;  /* 主题紫色背景 */
    color: white;               /* 白色文字 */
    border: none;               /* 无边框 */
    border-radius: 4px;         /* 圆角4px */
    cursor: pointer;            /* 鼠标悬停时显示手型光标 */
    font-size: 14px;            /* 字体大小14px */
    transition: background-color 0.3s;  /* 背景色变化过渡动画 */
    height: 30px;               /* 固定高度与文件选择框一致 */
    display: flex;              /* 使用弹性布局 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}

/* 更新按钮悬停效果 */
button.update-btn:hover {
    background-color: rgba(123, 73, 183, 0.8) !important;  /* 悬停时背景色透明度变为0.8 */
}

/* 更新按钮点击效果 */
button.update-btn:active {
    background-color: rgba(123, 73, 183, 0.9) !important;  /* 点击时背景色透明度变为0.9 */
}

/* 按钮组样式 */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}

/* 处理方式选择模态框 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 处理按钮样式 */
.process-btn {
    background-color: rgb(123, 73, 183);
    color: white;
    border: none;
    padding: 10px 30px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin: 10px;
    transition: background-color 0.3s;
}

.process-btn:hover {
    background-color: rgba(123, 73, 183, 0.8);
}

/* 上传区域样式 */
.upload-area {
    border: 2px dashed #ddd;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
}

.hint {
    color: #666;
    margin: 10px 0;
}

.hint-list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
    color: #666;
}

.hint-list li {
    margin: 5px 0;
}

/* 文件列表样式 */
.file-list {
    margin: 15px 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}

/* 缺失日期提示样式 */
.missing-dates {
    margin: 15px 0;
    padding: 10px;
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    color: #856404;
}

/* 下载按钮样式 */
.download-btn {
    display: inline-block;
    background-color: rgb(123, 73, 183);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    margin: 10px 0;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: rgba(123, 73, 183, 0.8);
}

/* 操作流程图容器样式 */
.flow-chart-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    text-align: center;
}

/* 操作流程图图片样式 */
.flow-chart-container .excel-image {
    display: block;
    max-width: 80%;
    height: auto;
    margin: 0 auto;
    border: none;
}

/* 关闭按钮样式 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: rgb(123, 73, 183);
}

/* 全部下载按钮样式 */
.download-all-section {
    margin: 20px 0;
    padding: 15px;
    background-color: #f0f0f9;
    border: 1px solid rgba(123, 73, 183, 0.2);
    border-radius: 8px;
    text-align: center;
}

.download-all-btn {
    display: block;
    width: 100%;
    background-color: rgb(123, 73, 183);
    color: white;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.download-all-btn:hover {
    background-color: rgb(98, 54, 150);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.download-all-section {
    margin-bottom: 25px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* X指标选择模态框样式 */
.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0;
}

.input-group input[type="number"] {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    width: 80px;
}

.hint {
    color: #666;
    font-size: 14px;
    margin: 10px 0;
    text-align: center;
}

/* X指标表格样式 */
.x-indicator-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.x-indicator-table th {
    background-color: #4dabf7;
    color: white;
    padding: 10px 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #c5e1f5;
}

.x-indicator-table td {
    padding: 8px;
    border: 1px solid #e6f3fb;
    vertical-align: middle;
}

.x-indicator-table tr:nth-child(even) {
    background-color: #f5faff;
}

.x-indicator-table tr:nth-child(odd) {
    background-color: #ffffff;
}

.x-indicator-table tr:hover {
    background-color: #e6f3fb;
    transition: background-color 0.3s ease;
}

/* 调整X指标模态框样式 */
#xIndicatorModal .modal-content {
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 25px;
    background-color: #f8fcff;
    border-radius: 8px;
}

/* X指标名称列表容器样式 */
.x-indicator-name-list {
    margin: 15px 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #d1e6f6;
    border-radius: 4px;
    padding: 10px;
    background-color: #ffffff;
}

/* 导出Excel进度条样式 */
.export-progress {
    margin: 15px 0;
    height: 20px;
    background-color: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.export-progress .progress-bar {
    height: 100%;
    background-color: rgb(123, 73, 183);
    transition: width 0.5s ease;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    background-image: linear-gradient(45deg, 
                      rgba(255, 255, 255, 0.15) 25%, 
                      transparent 25%, 
                      transparent 50%, 
                      rgba(255, 255, 255, 0.15) 50%, 
                      rgba(255, 255, 255, 0.15) 75%, 
                      transparent 75%, 
                      transparent);
    background-size: 40px 40px;
    animation: progress-bar-stripes 2s linear infinite;
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0;
    }
    to {
        background-position: 0 0;
    }
}

.progress-text {
    margin-top: 5px;
    text-align: center;
    font-size: 14px;
    color: #666;
    transition: color 0.3s ease;
}

/* 导出成功/失败状态样式 */
.progress-text.success {
    color: #4CAF50;
    font-weight: bold;
}

.progress-text.error {
    color: #f44336;
    font-weight: bold;
}

/* X指标模态框样式 */
.x-indicator-modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.x-indicator-modal .modal-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border-radius: 5px;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.x-indicator-modal .modal-title {
    color: #7e57c2;  /* 浅紫色标题 */
    font-size: 18px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0d5f1;  /* 浅紫色边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.x-indicator-modal .close {
    color: #7e57c2;  /* 浅紫色关闭按钮 */
    float: right;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

.x-indicator-modal .close:hover {
    color: #614aa0;  /* 深一点的紫色 */
}

.x-indicator-modal .hint {
    color: #666;
    font-size: 14px;
    margin: 15px 0;
    padding: 10px;
    background-color: #f3eaff;  /* 非常浅的紫色背景 */
    border-left: 4px solid #7e57c2;  /* 浅紫色边框 */
    border-radius: 3px;
}

.x-indicator-modal .process-btn {
    background-color: #7e57c2;  /* 浅紫色按钮 */
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    float: right;
    font-size: 14px;
    transition: background-color 0.3s;
}

.x-indicator-modal .process-btn:hover {
    background-color: #614aa0;  /* 深一点的紫色 */
}

/* X指标表格样式 */
.x-indicator-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 14px;
}

.x-indicator-table th, 
.x-indicator-table td {
    padding: 8px 10px;
    border: 1px solid #e0d5f1;  /* 浅紫色边框 */
    text-align: left;
}

.x-indicator-table th {
    background-color: #f3eaff;  /* 非常浅的紫色背景 */
    color: #7e57c2;  /* 浅紫色文字 */
    font-weight: bold;
}

.x-indicator-table tr:nth-child(even) {
    background-color: #fcfaff;  /* 更浅的紫色背景 */
}

.x-indicator-table tr:hover {
    background-color: #f5f0ff;  /* 悬停时的紫色背景 */
}

/* 导航链接样式 */
nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 15px 20px;
    transition: all 0.3s ease; /* 平滑过渡所有属性变化 */
    border-radius: 4px; /* 添加轻微圆角 */
}

nav ul li a:hover {
    color: #ffe0e0; /* 更改为浅粉白色文字 */
    text-decoration: none;
    background-color: transparent; /* 移除背景色 */
    transform: translateY(-2px); /* 轻微上移效果 */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 添加文字光晕 */
}

nav ul li a.active {
    color: white;
    font-weight: bold;
    border-bottom: 2px solid white; /* 使用底部边框代替背景色 */
    background-color: transparent; /* 移除背景色 */
    padding-bottom: 13px; /* 调整padding以适应底部边框 */
}

/* 左侧文本链接悬停效果 */
a.nav-left-text:hover {
    color: #ffe0e0; /* 匹配导航链接悬停文字颜色 */
    text-decoration: none;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 添加文字光晕 */
}

/* 导航菜单项悬停效果 */
nav ul li:hover {
    background-color: transparent; /* 移除背景色 */
    text-decoration: none; /* 移除下划线 */
}

* 图片容器样式，用于并排显示两张图片 */
.image-container {
    display: flex;
    flex-direction: row; /* 明确指定水平方向 */
    justify-content: space-between; /* 改为两端对齐 */
    align-items: center;
    width: 100%; /* 确保容器占满宽度 */
    margin: 20px 0;
}

/* 在图片容器中的图片样式调整 */
.image-container .cwqi-image {
    display: inline-block; /* 覆盖block显示方式 */
    width: 48%; /* 设置固定宽度比例 */
    max-width: none; /* 覆盖原有的max-width设置 */
    margin: 0; /* 清除外边距 */
}

/* 基础响应式样式增强 */
@media screen and (max-width: 768px) {
    /* 禁止页面横向滚动 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    /* 导航栏响应式调整 */
    nav {
        padding: 0 10px;
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        justify-content: center; /* 居中对齐导航内容 */
    }
    
    .nav-left-text {
        font-size: 0.9em;
        margin-right: 0; /* 移除右边距 */
        margin-bottom: 8px; /* 添加底部边距 */
        max-width: 90%; /* 增加最大宽度 */
        white-space: normal;
        line-height: 1.2;
        text-align: center; /* 文字居中 */
    }
    
    .nav-logo {
        width: 40px;
        margin-right: 5px;
        margin-left: 0; /* 移除左边距 */
    }
    
    nav ul {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 0;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 5px; /* 减小间距 */
    }
    
    nav ul li {
        padding: 0;
        margin: 0;
        font-size: 12px;
    }
    
    /* 添加导航链接的移动端样式 */
    nav ul li a {
        padding: 8px 10px;
        font-size: 12px;
        display: inline-block;
        border-radius: 4px;
        text-align: center;
        min-width: 60px; /* 确保有最小宽度 */
        margin: 2px; /* 添加外边距便于触摸 */
        transform: none; /* 禁用变换效果 */
        transition: background-color 0.3s; /* 仅保留背景色过渡 */
    }
    
    nav ul li a:hover, nav ul li a:active {
        transform: none; /* 禁用在hover和active状态的变换效果 */
        background-color: rgba(255, 255, 255, 0.1); /* 仅添加背景色变化 */
    }
    
    nav ul li a.active {
        padding-bottom: 6px;
        border-bottom: 2px solid white;
        background-color: rgba(255, 255, 255, 0.1); /* 添加轻微背景色 */
        transform: none; /* 确保激活状态也不会有变换 */
    }
    
    /* 内容区域响应式调整 */
    .content {
        padding: 8px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* 表单控件响应式调整 */
    #splitFileInput, 
    #excelFileInput,
    #workbook1Input,
    #workbook2Input,
    input[type="file"] {
        width: 100%;
        max-width: 100%;
    }
    
    .button-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    button.update-btn {
        width: 100%;
        margin-top: 5px;
    }
    
    /* 指导文本容器调整 */
    .instructions-container {
        padding: 10px;
        margin: 10px 0;
        font-size: 14px;
    }
    
    /* 图片响应式调整 */
.cwqi-image,
.excel-image,
.standard-image,
.flow-chart-container .excel-image {
    max-width: 100% !important;
    margin: 10px auto !important;
    box-shadow: none !important;
    border: 1px solid rgba(123, 73, 183, 0.3) !important;
    animation: none !important;
}

/* 图片容器响应式调整 */
.image-container {
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 10px 0;
    padding: 0;
}

.image-container .cwqi-image {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    display: block !important;
}
    
    /* 模态框响应式调整 */
    .modal-content {
        width: 90%;
        min-width: auto;
        padding: 15px;
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* 表格响应式调整 */
    .preview-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    /* 进度条响应式调整 */
    .progress {
        height: 15px;
    }
    
    /* 容器样式调整 */
    #split .container {
        padding: 10px;
    }
    
    /* 处理按钮响应式调整 */
    .process-btn {
        padding: 8px 15px;
        margin: 5px;
        width: 100%;
    }
}

/* 超小屏幕设备优化 */
@media screen and (max-width: 480px) {
    /* 超小屏幕图片显示优化 */
.image-container {
    padding: 0;
    margin: 5px 0;
}
.image-container .cwqi-image {
    border-width: 1px !important;
    padding: 2px !important;
    margin: 5px 0 !important;
}
    /* 重申禁止横向滚动 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* 确保所有元素在小屏幕上完全适应容器 */
    .content, 
    .container,
    .section,
    .modal-content,
    .preview-table,
    .stats-container,
    .chart-controls,
    #chartContainer,
    .instructions-container,
    .button-group,
    .flow-chart-container,
    .x-indicator-table,
    .x-indicator-name-list {
        max-width: 100%;
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* 修复表格在移动设备上的显示 */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    
    /* 导航样式 */
    nav {
        padding: 5px;
        flex-direction: column; /* 改为纵向排列 */
        align-items: center;
        width: 100%;
        max-width: 100vw; /* 确保不超过视口宽度 */
    }
    
    .nav-left-text {
        font-size: 0.8em;
        max-width: 100%;
        margin: 8px 0;
        text-align: center;
    }
    
    .nav-logo {
        width: 30px;
        margin: 0 auto 5px auto; /* 居中显示logo */
        display: block;
    }
    
    nav ul {
        margin: 5px 0;
        justify-content: center;
    }
    
    /* 添加超小屏幕导航链接的样式 */
    nav ul li a {
        padding: 8px 6px;
        font-size: 11px;
        min-width: 50px;
        margin: 3px; /* 更大的外边距 */
        display: block; /* 确保完全显示 */
        background-color: rgba(255, 255, 255, 0.05); /* 添加微弱背景以增强可见性 */
        transform: none; /* 禁用变换效果 */
    }
    
    nav ul li a:hover, nav ul li a:active {
        transform: none; /* 确保交互状态也不会有变换 */
    }
    
    nav ul li a.active {
        padding-bottom: 8px;
        background-color: rgba(255, 255, 255, 0.15); /* 增强活动项的背景 */
        transform: none; /* 确保激活状态不会有变换 */
    }
    
    .header-text {
        font-size: 15px;
    }
    
    h2, h3 {
        font-size: 18px;
    }
    
    .instructions-container p {
        margin-bottom: 8px;
    }
    
    /* 修复页脚在小屏幕设备上的显示 */
    footer {
        position: relative;
        padding: 5px 0;
        margin-top: 20px;
    }
    
    /* 内容底部添加额外空间，避免被固定页脚覆盖 */
    .content {
        padding-bottom: 30px;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden; /* 确保内容不会横向滚动 */
    }
}

/* 确保所有内容都适应容器 */
img {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

/* 基础响应式样式增强 */
@media screen and (max-width: 768px) {
    /* 禁止页面横向滚动 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    /* 调整所有容器确保不超出视口 */
    .content, 
    .container,
    .section,
    .modal-content,
    .preview-table,
    .stats-container,
    .chart-controls,
    #chartContainer,
    .instructions-container,
    .button-group,
    .flow-chart-container {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* 处理长文本换行 */
    p, h1, h2, h3, h4, h5, h6, span, a, td, th {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* 导航栏响应式调整 */
    nav {
        padding: 0 10px;
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
        justify-content: center; /* 居中对齐导航内容 */
    }
    
    /* 其他已有的样式保持不变 */
}

/* 超小屏幕设备优化 */
@media screen and (max-width: 480px) {
    /* 重申禁止横向滚动 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* 确保所有元素在小屏幕上完全适应容器 */
    .content, 
    .container,
    .section,
    .modal-content,
    .preview-table,
    .stats-container,
    .chart-controls,
    #chartContainer,
    .instructions-container,
    .button-group,
    .flow-chart-container,
    .x-indicator-table,
    .x-indicator-name-list {
        max-width: 100%;
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* 修复表格在移动设备上的显示 */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    
    /* 导航样式 */
    nav {
        padding: 5px;
        flex-direction: column; /* 改为纵向排列 */
        align-items: center;
        width: 100%;
        max-width: 100vw; /* 确保不超过视口宽度 */
    }
    
    /* 其他已有的样式保持不变 */
}

/* 全局禁止横向滚动 */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 导航链接点击时禁用任何可能导致滚动的效果 */
nav ul li a:active {
    transform: none !important;
    transition: none !important;
}