/*
 * 基础全局样式
 * 设置所有元素的盒模型为 border-box，使内边距和边框不会增加元素的实际宽度
 * 确保所有元素的宽度计算方式一致，简化布局设计
 */
* {
    box-sizing: border-box;
}

/*
 * 页面主体样式
 * 设置页面的基础字体、背景色和文本颜色
 * 使用深色主题设计，符合现代应用的审美趋势
 */
body {
    margin: 5%;
    padding: 0;
    font-family: 'Open Sans', sans-serif; /* 使用无衬线字体，提高可读性 */
    background-color: #1c1c1e; /* 深灰色背景 */
    color: white; /* 白色文本 */
}

/*
 * 主要内容容器
 * 定义页面主要内容区域的样式
 * 居中显示，设置圆角和内边距，创造卡片式设计效果
 */
.box {
    background-color: black; /* 黑色背景 */
    border-radius: 8px; /* 圆角边框 */
    padding: 20px; /* 内边距 */
    max-width: 500px; /* 最大宽度 */
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto; /* 水平居中 */
    text-align: center; /* 文本居中 */
}

/*
 * 输入控件样式
 * 统一文本输入框和下拉选择框的外观
 * 使用深色主题设计，确保与整体界面风格一致
 */
input[type="text"], select {
    margin-top: 10px;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #555; /* 浅灰色边框 */
    background-color: #444; /* 深灰色背景 */
    color: white; /* 白色文本 */
    width: 100%; /* 宽度占满父容器 */
}

/*
 * 按钮基础样式
 * 定义通用按钮的外观和交互效果
 * 使用蓝色作为主色调，提供清晰的视觉反馈
 */
button.button {
    background-color: #007bff; /* 主蓝色背景 */
    color: white; /* 白色文本 */
    border: none; /* 无边框 */
    border-radius: 4px; /* 圆角 */
    padding: 10px;
    cursor: pointer; /* 鼠标悬停时显示指针 */
    width: 100%; /* 宽度占满父容器 */
    margin-top: 10px;
}

/*
 * 按钮悬停效果
 * 提供视觉反馈，增强用户交互体验
 */
button.button:hover {
    background-color: #0056b3; /* 深蓝色背景 */
}

/*
 * 查询按钮样式
 * 定义查询功能按钮的基础样式
 * 与通用按钮区分，提供更多样化的交互元素
 */
.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 查询按钮样式
 * 自定义 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;
}

/*
 * 文本区域样式
 * 定义多行文本输入框的外观
 * 居中显示文本内容，提供适当的内边距
 */
textarea {
    margin-top: 10px;
    width: 100%;
    height: 60px;
    resize: both; /* 允许用户调整大小 */
    font-size: 14px;
    padding: 5px;
    text-align: center;
    line-height: 60px; /* 垂直居中文本 */
}

/*
 * 页脚基础样式
 * 定义页面底部区域的外观
 * 使用特殊字体设置，确保在 iOS5 及以上版本中正确显示
 */
footer {
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 兼容 iOS5 的字体 */
    padding: 20px 0;
    color: #444; /* 浅灰色文本 */
    border-radius: 0 0 8px 8px; /* 底部圆角 */
    text-align: center;
    position: relative;
    margin-top: 0px;
}

/*
 * 版权信息容器
 * 确保版权信息在页面中正确布局
 */
.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 备案号样式
 * 单独设置 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%); /* 兼容 iOS 浏览器 */
}

/*
 * 替代 Flex 布局的样式
 * 为不支持 Flexbox 的旧版浏览器提供替代方案
 * 使用块级元素模拟 Flex 布局的垂直排列效果
 */
.flex-column {
    display: block;
}

.flex-item {
    margin-bottom: 10px;
}

/*
 * 隐藏元素的样式
 * 用于控制元素的显示与隐藏
 * 通过切换该类可以动态隐藏或显示元素
 */
.hidden {
    display: none;
}