/* 
 * 全局基础样式
 * 设置所有元素的盒模型为border-box，使宽度和高度包含内边距和边框
 * 重置所有元素的外边距和内边距为0
 */
* {
    /* 设置盒模型为border-box，宽度和高度包含边框和内边距 */
    box-sizing: border-box;
    /* 重置外边距为0 */
    margin: 0;
    /* 重置内边距为0 */
    padding: 0;
}

/* 
 * 页面主体样式
 * 设置页面基础样式，包括字体、背景色、文字颜色等
 */
body {
    /* 设置字体，优先使用系统字体，确保跨平台一致性 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* 设置背景颜色为深灰色(#1c1c1e) */
    background-color: #1c1c1e;
    /* 设置文字颜色为白色 */
    color: white;
    /* 设置行高为1.5倍，提高可读性 */
    line-height: 1.5;
    /* 设置页面四周5%的外边距 */
    margin: 3%;
    /* iOS设备上防止字体自动缩放 */
    -webkit-text-size-adjust: 100%;
}

/* 
 * 主要内容容器样式
 * 设置页面主要内容的显示样式
 */
.box {
    /* 设置最大宽度为500像素 */
    max-width: 500px;
    /* 设置内边距为30像素 */
    padding: 30px;
    /* 设置背景颜色为黑色 */
    background-color: black;
    /* 设置圆角边框，半径为8像素 */
    border-radius: 8px;
    /* 文字居中对齐 */
    text-align: center;
    margin-top: 10px; /* 只设置上边距为 10 像素 */
    margin-left: auto; /* 左侧外边距自动 */
    margin-right: auto; /* 右侧外边距自动，实现水平居中 */
}

/* 
 * 表单元素统一样式
 * 设置所有表单元素(input/select/textarea/button)的公共样式
 */
input, select, textarea, button {
    /* 设置为块级元素，独占一行 */
    display: block;
    /* 宽度100%填满父容器 */
    width: 100%;
    /* 设置内边距为10像素 */
    padding: 10px;
    /* 设置底部外边距为15像素 */
    margin-bottom: 15px;
    /* 设置1像素的灰色边框 */
    border: 1px solid #555;
    /* 设置圆角边框，半径为4像素 */
    border-radius: 4px;
    /* 设置字体大小为16像素 */
    font-size: 16px;
    /* 设置背景颜色为深灰色(#444) */
    background-color: #444;
    /* 设置文字颜色为白色 */
    color: white;
    /* 移除iOS默认的表单元素样式 */
    -webkit-appearance: none;
}

/* 
 * 文本区域特殊样式
 * 设置textarea元素的特殊样式
 */
textarea {
    /* 设置固定高度为60像素 */
    height: 60px;
    /* 允许用户调整大小(水平和垂直方向) */
    resize: both;
    /* 设置行高与高度相同，使文字垂直居中 */
    line-height: 60px;
    /* 文字居中对齐 */
    text-align: center;
}

/* 
 * 按钮基础样式
 * 设置.button类的公共样式
 */
.button {
    /* 设置背景颜色为蓝色(#007bff) */
    background-color: #007bff;
    /* 设置文字颜色为白色 */
    color: white;
    /* 文字居中对齐 */
    text-align: center;
    /* 移除下划线 */
    text-decoration: none;
    /* 移除边框 */
    border: none;
    /* 设置鼠标指针为手型 */
    cursor: pointer;
    /* 设置iOS点击高亮效果为半透明黑色 */
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    /* 设置顶部外边距为10像素 */
    margin-top: 10px;
}

/* 
 * 按钮悬停状态
 * 设置鼠标悬停时的按钮样式
 */
.button:hover {
    /* 悬停时背景颜色变为深蓝色(#0056b3) */
    background-color: #0056b3;
}

/* 
 * 表格样式
 * 设置table元素的公共样式
 */
table {
    /* 宽度100%填满父容器 */
    width: 100%;
    /* 设置边框合并模式 */
    border-collapse: collapse;
    /* 设置字体大小为14像素 */
    font-size: 14px;
    /* 使用固定表格布局算法 */
    table-layout: fixed;
    /* 重置外边距为0 */
    margin: 0;
    /* 设置1像素的灰色边框 */
    border: 1px solid #444;
}

/* 
 * 表格单元格通用样式
 * 设置th和td元素的公共样式
 */
th, td {
    /* 设置内边距(上下8像素，左右5像素) */
    padding: 8px 5px;
    /* 设置1像素的灰色边框 */
    border: 1px solid #444;
    /* 允许在任意字符间断行 */
    word-break: break-all;
    /* 长单词或URL强制换行 */
    overflow-wrap: break-word;
}

/* 
 * 表头特殊样式
 * 设置th元素的特殊样式
 */
th {
    /* 设置背景颜色为深灰色(#444) */
    background-color: #444;
    /* 设置文字颜色为白色 */
    color: white;
    /* 设置粘性定位 */
    position: sticky;
    /* 粘在顶部 */
    top: 0;
}

/* 
 * 链接容器样式
 * 设置.link-container类的样式
 */
.link-container {
    /* 设置上下外边距为15像素 */
    margin: 15px 0;
    /* 设置字体大小为14像素 */
    font-size: 14px;
}

/* 
 * 链接项样式
 * 设置.link-item类的样式
 */
.link-item {
    /* 设置上下外边距为10像素 */
    margin: 10px 0;
    /* 允许在任意字符间断行 */
    word-break: break-all;
}

/* 
 * 链接基础样式
 * 设置.link-item内a标签的样式
 */
.link-item a {
    /* 设置文字颜色为蓝色(#007BFF) */
    color: #007BFF;
    /* 移除下划线 */
    text-decoration: none;
}

/* 
 * 链接激活状态
 * 设置.link-item内a标签被点击时的样式
 */
.link-item a:active {
    /* 点击时文字颜色变为深蓝色(#0056b3) */
    color: #0056b3;
    /* 添加下划线 */
    text-decoration: underline;
}

/* 
 * 可展开区域容器
 * 设置.expandable-section类的样式
 */
.expandable-section {
    /* 设置底部外边距为10像素 */
    margin-bottom: 10px;
}

/* 
 * 展开按钮样式
 * 设置.expand-btn类的样式
 */
.expand-btn {
    /* 设置半透明深灰色背景 */
    background-color: rgba(68, 68, 68, 0.2);
    /* 设置1像素的灰色边框 */
    border: 1px solid #555;
    /* 设置圆角边框，半径为4像素 */
    border-radius: 4px;
    /* 设置文字颜色为蓝色(#007BFF) */
    color: #007BFF;
    /* 设置鼠标指针为手型 */
    cursor: pointer;
    /* 设置内边距(上下10像素，左右15像素) */
    padding: 10px 15px;
    /* 设置字体大小为14像素 */
    font-size: 14px;
    /* 文字左对齐 */
    text-align: left;
    /* 宽度100%填满父容器 */
    width: 100%;
    /* 设置上下外边距为8像素 */
    margin: 8px 0;
    /* 设置所有属性过渡效果，持续0.3秒，缓动效果 */
    transition: all 0.3s ease;
}

/* 
 * 展开按钮悬停状态
 * 设置.expand-btn类在悬停时的样式
 */
.expand-btn:hover {
    /* 悬停时加深背景颜色 */
    background-color: rgba(68, 68, 68, 0.4);
}

/* 
 * 状态提示样式
 * 设置.loading/.error/.warning类的公共样式
 */
.loading, .error, .warning {
    /* 设置内边距为10像素 */
    padding: 10px;
    /* 设置上下外边距为10像素 */
    margin: 10px 0;
    /* 设置圆角边框，半径为4像素 */
    border-radius: 4px;
}

/* 
 * 加载状态样式
 * 设置.loading类的特殊样式
 */
.loading {
    /* 设置背景颜色为浅灰色(#f8f9fa) */
    background-color: #f8f9fa;
    /* 设置文字颜色为深灰色(#333) */
    color: #333;
}

/* 
 * 错误状态样式
 * 设置.error类的特殊样式
 */
.error {
    /* 设置背景颜色为浅红色(#f8d7da) */
    background-color: #f8d7da;
    /* 设置文字颜色为深红色(#721c24) */
    color: #721c24;
}

/* 
 * 警告状态样式
 * 设置.warning类的特殊样式
 */
.warning {
    /* 设置背景颜色为浅黄色(#fff3cd) */
    background-color: #fff3cd;
    /* 设置文字颜色为深黄色(#856404) */
    color: #856404;
}

/* 
 * 模态框样式
 * 设置.modal类的样式
 */
.modal {
    /* 固定定位，覆盖整个视口 */
    position: fixed;
    /* 距离顶部0 */
    top: 0;
    /* 距离左侧0 */
    left: 0;
    /* 宽度100% */
    width: 100%;
    /* 高度100% */
    height: 100%;
    /* 设置半透明黑色背景 */
    background: rgba(0,0,0,0.5);
    /* 使用flex布局 */
    display: flex;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 设置z-index为1000，确保在最上层 */
    z-index: 1000;
}

/* 
 * 模态框内容区域
 * 设置.modal-content类的样式
 */
.modal-content {
    /* 设置背景颜色为白色 */
    background: white;
    /* 设置内边距为20像素 */
    padding: 20px;
    /* 设置圆角边框，半径为8像素 */
    border-radius: 8px;
    /* 设置最大宽度为视口的80% */
    max-width: 80%;
    /* 允许长单词换行 */
    word-wrap: break-word;
}

/* 结果容器样式 - 包裹整个查询结果区域的容器 */
.results-container {
    /* 底部外边距15像素，与下方内容保持间距 */
    margin-bottom: 15px;
}

/* 表格基本样式 - 结果表格的基础样式 */
.results-table {
    /* 宽度100%填充父容器 */
    width: 100%;
    /* 边框合并模式，相邻边框合并为单一边框 */
    border-collapse: collapse;
    /* 基础字体大小14像素 */
    font-size: 14px;
    /* 固定表格布局算法，列宽由表格宽度和列宽度设定 */
    table-layout: fixed;
    /* 清除默认外边距 */
    margin: 0;
    /* 1像素实线边框，颜色为深灰色(#444) */
    border: 1px solid #444;
}

/* 表格头部样式 - 表头(th)元素的通用样式 */
.results-table th {
    /* 背景色为深灰色(#444) */
    background-color: #444;
    /* 内边距：上下8px，左右5px */
    padding: 8px 5px;
    /* 粘性定位，滚动时固定在顶部 */
    position: sticky;
    /* 粘性定位的顶部距离为0 */
    top: 0;
    /* 1像素实线边框，颜色为深灰色(#444) */
    border: 1px solid #444;
}

/* 版本列表头特定样式 - 设置版本列的宽度 */
.results-table th.version {
    /* 宽度占表格的28% */
    width: 28%;
}

/* 生成器列表头特定样式 - 设置生成器列的宽度 */
.results-table th.generator {
    /* 宽度占表格的45% */
    width: 45%;
}

/* 操作列表头特定样式 - 设置操作列的宽度 */
.results-table th.action {
    /* 宽度占表格的27% */
    width: 27%;
}

/* 表格单元格样式 - 表格单元格(td)的通用样式 */
.results-table td {
    /* 内边距：上下8px，左右5px */
    padding: 8px 5px;
    /* 1像素实线边框，颜色为深灰色(#444) */
    border: 1px solid #444;
}

/* 版本单元格特定样式 - 版本列单元格的特殊样式 */
.results-table td.version-cell {
    /* 保留换行符，但合并其他空白符 */
    white-space: pre-line;
    /* 允许在单词内断行 */
    word-break: break-word;
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 最大宽度为0，配合table-layout: fixed实现自动截断 */
    max-width: 0;
}

/* 生成器单元格特定样式 - 生成器列单元格的特殊样式 */
.results-table td.generator-cell {
    /* 允许在任何字符间断行 */
    word-break: break-all;
    /* 允许在长单词或URL中间断行 */
    overflow-wrap: break-word;
    /* 最大宽度为0，配合table-layout: fixed实现自动截断 */
    max-width: 0;
    /* 正常空白处理方式 */
    white-space: normal;
    /* 内边距5px(四周相同) */
    padding: 5px;
}

/* 操作单元格特定样式 - 操作列单元格的特殊样式 */
.results-table td.action-cell {
    /* 禁止换行，保持内容在一行显示 */
    white-space: nowrap;
    /* 文本居中对齐 */
    text-align: center;
}

/* 下载链接样式 - 下载按钮的样式 */
.download-link {
    /* 行内块级显示，可以设置宽高 */
    display: inline-block;
    /* 内边距：上下3px，左右8px */
    padding: 3px 8px;
    /* 背景色为蓝色(#007bff) */
    background-color: #007bff;
    /* 文字颜色为白色 */
    color: white;
    /* 去除下划线装饰 */
    text-decoration: none;
    /* 3px圆角边框 */
    border-radius: 3px;
}

/* 版本链接样式 - 版本号链接的样式 */
.version-link {
    /* 继承父元素文字颜色 */
    color: inherit;
    /* 去除下划线装饰 */
    text-decoration: none;
    /* 块级显示，占满容器宽度 */
    display: block;
    /* 宽度100%填充父容器 */
    width: 100%;
}

/* 表格容器样式 - 包裹表格的容器样式 */
.table-container {
    /* 水平方向内容溢出时显示滚动条 */
    overflow-x: auto;
    /* 最大宽度不超过父容器宽度 */
    max-width: 100%;
}

/* 副标题样式 - 副标题文本的样式 */
.subtitle {
    /* 字体大小14像素 */
    font-size: 14px;
}


/* 下载全部按钮样式 - 用于"下载全部"按钮的统一外观 */
.download-all-button {
    /* 设置为行内块元素，可以设置宽高但不会独占一行 */
    display: inline-block;
    /* 上下内边距6px，左右内边距12px */
    padding: 6px 12px;
    /* 背景色为蓝色 */
    background-color: #007bff;
    /* 文字颜色为白色 */
    color: white;
    /* 去除下划线装饰 */
    text-decoration: none;
    /* 圆角边框，半径为3px */
    border-radius: 3px;
    /* 文字居中对齐 */
    text-align: center;
    /* 顶部外边距10px，与其他元素保持距离 */
    margin-top: 10px;
}

/* 加载状态样式 - 用于显示加载中的提示信息 */
.loading {
    /* 内边距8px */
    padding: 8px;
    /* 浅灰色背景 */
    background-color: #f8f9fa;
    /* 浅灰色边框 */
    border: 1px solid #ddd;
    /* 圆角边框 */
    border-radius: 4px;
    /* 文字居中对齐 */
    text-align: center;
    /* 深灰色文字 */
    color: #333;
}

/* 错误状态样式 - 用于显示错误提示信息 */
.error {
    /* 内边距8px */
    padding: 8px;
    /* 浅红色背景 */
    background-color: #f8d7da;
    /* 浅红色边框 */
    border: 1px solid #f5c6cb;
    /* 圆角边框 */
    border-radius: 4px;
    /* 文字居中对齐 */
    text-align: center;
    /* 深红色文字 */
    color: #721c24;
}

/* 查询按钮基础样式 */
    .query-button {
        display: inline-block;
        padding: 8px 16px;
        margin: 5px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        font-size: 14px;
        transition: background-color 0.3s;
        width: auto;
        text-align: center;
        vertical-align: middle;
    }
    
    /* 按钮悬停效果 */
    .query-button:hover {
        background-color: #0069d9;
    }
    
    /* TSS查询按钮的自定义样式 */
    .button-tsssaver {
        background-color: #444;
    }
    
    /* TSS查询按钮悬停效果 */
    .button-tsssaver:hover {
        background-color: #ff4e4e;
    }
    
    /* 爱思查询按钮的自定义样式 */
    .button-aisi {
        background-color: #444;
    }
    
    /* 爱思查询按钮悬停效果 */
    .button-aisi:hover {
        background-color: #38b000;
    }
    
    /* 按钮容器样式 */
    .button-container {
        text-align: center;
        margin: 20px 0;
    }
    
    /* 按钮内容包裹器 - 解决iOS7垂直对齐问题 */
    .button-content {
        display: inline-block;
        vertical-align: middle;
    }
    
    /* 按钮图标样式 */
    .button-icon {
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: middle;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 0px;
    }
    
   
   /* 页脚基础样式 - 兼容iOS5 */
footer {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    padding: 20px 0;
    color: #444;
    border-radius: 0 0 8px 8px;
    text-align: center;
    height: auto;
    position: relative;
}

/* 响应式适配 - 小屏幕优化 */
@media (max-width: 600px) {
    footer {
        font-size: 12px;
        margin-top: 30px;
        padding: 15px 0;
    }
}

/* 版权信息容器 */
.footer {
    display: block;
    margin: 0 auto;
    width: 100%;
}

/* 版权信息样式 */
.footer p {
    margin: 3px 0;
    color: #444;
    font-size: 12px;
    text-align: center;
}

/* 版权年份样式 */
.footer .copyright {
    color: #444;
    font-size: 12px;
}

/* ICP 备案号样式 */
.footer .icp {
    color: #444;
    font-size: 11px;
}

/* 垂直居中辅助类 - iOS5兼容方案 */
.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(0%);
    -ms-transform: translateY(0%);
    -webkit-transform: translateY(0%);
}