/* 合并后的 body 样式（原重复定义） */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;  /* 仅限制水平滚动 */
    overflow-y: auto;   /* 允许垂直滚动 */
}

/* 合并重复的 .container 定义 */
.container {
    flex: 1;  /* 占据 header 和 footer 之间的剩余空间 */
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 0 2px 0 0;  /* 原 padding: 0 20px 20px 0; 改为底部内边距0 */
    min-height: calc(100vh - 8vh - 3vh); /* 总视口高度 - 标题高度(8vh) - 页脚高度(3vh) */
    /* 移除原 height: 80vh */
}

/* 确保 footer 固定在可视区域底部 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;  /* 最小高度为视口高度 */
    margin: 0;
}

.site-footer {
    height: 10vh;
    line-height: 10vh;
    text-align: center;
    border-top: 1px solid #ccc;
    flex-shrink: 0;  /* 防止 footer 被压缩 */
}

h1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    height: 60px; /* 原为8vh，改为固定像素 */
    background: #0a192f;
    border-bottom: 2px solid #e3f2fd;
    margin: 0;
    border-radius: 0 0 10px 10px;
    font-size: 20px;
}

.header-left {
    flex: 1;                /* 占1份空间 */
    text-align: left;  
    color: #e7eaec;       /* 左对齐 */
}

.header-middle {
    flex: 2;                /* 占2份空间（可调整比例） */
    text-align: center;     /* 中间文本居中 */
    color: #e7eaec;       /* 半透明文字 */
    font-size: 0.9em;       /* 适当缩小字体 */
}

.header-right {
    flex: 1;                /* 占1份空间 */
    display: flex;          /* 按钮内联排列 */
    gap: 10px;              /* 按钮间距 */
    justify-content: flex-end; /* 右对齐 */
}

h1 .user-action, h1 .bgm-toggle {
    line-height: normal;  /* 覆盖行高，避免按钮文字错位 */
}

/* 页脚样式 */
.site-footer {
    height: 3vh;          /* 减小页脚高度（原5vh→3vh） */
    line-height: 3vh;     /* 文字垂直居中（与高度一致） */
    text-align: center;    /* 文字水平居中 */
    border-top: 1px solid #ccc;  /* 顶部横线分隔 */
    padding: 0 20px;       /* 左右内边距防止内容紧贴边缘 */
    flex-shrink: 0;        /* 新增：防止页脚被内容挤压 */
}


/* 统一 .auth-form 基础样式（关键修复重复定义） */
/* 统一 .auth-form 显示逻辑（移除冗余display控制） */
.auth-form {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    display: none; /* 默认隐藏 */
}

.auth-form.active {
    display: flex !important; /* 仅通过active类控制显示 */
}

/* 移除其他地方对.auth-form的display直接设置（如script.js中的style.display） */
.auth-form input {
    font-size: 1.2em; 
    padding: 10px;
    margin: 0;
    width: 100%; /* 明确宽度占满父容器（替代 max-width:100%） */
    box-sizing: border-box; /* 内边距不影响总宽度 */
}

/* 弹窗内容区域样式（确保足够宽度） */
.auth-content {
    background-color: #e6f4ff;
    padding: 25px;
    border-radius: 10px;
    width: 500px; /* 进一步增大宽度（原450px→500px） */
    margin: 0 auto;
}


/* 登录/注册表单的按钮组水平排列 */
.button-group {
    display: flex;
    gap: 15px; /* 按钮之间的间距 */
    margin-top: 10px; /* 与上方输入框的间距 */
}

.button-group button {
    flex: 1; /* 按钮等宽填充容器 */
    padding: 10px; /* 调整按钮内边距 */
    font-size: 1em; /* 调整字体大小（原2em可能过大） */
}

/* 修复 #auth-popup 选择器嵌套错误，直接定义 .auth-popup 样式 */
.auth-popup {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位，确保居中 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中显示 */
    background: #fff; /* 背景色 */
    border: 1px solid #ddd; /* 边框 */
    padding: 20px; /* 内边距 */
    z-index: 1000; /* 层级足够高，避免被其他元素覆盖 */
    min-width: 300px; /* 最小宽度 */
    max-width: 90%; /* 最大宽度为视口的90% */
    max-height: 90vh; /* 最大高度为视口的90% */
    overflow-y: auto; /* 内容过多时显示垂直滚动条 */
}

/* 移除原 #auth-popup 内的无效嵌套样式 */
#auth-popup {
    width: 400px; /* 明确宽度（不超过 max-width） */
    height: auto; /* 高度自动适应内容 */
    background: #fff;
    border: 1px solid #ccc;
    z-index: 1000; /* 确保层级足够高，避免被覆盖 */
}

/* 确保 .auth-content 完全继承弹窗高度 */
.auth-content {
    background-color: #e6f4ff;
    padding: 20px; /* 减少内边距，留出更多空间给表单 */
    border-radius: 10px;
    width: 100%; /* 宽度继承自 .auth-popup */
    box-sizing: border-box; /* 内边距不影响总宽度 */
    /* 移除原 max-width，由 .auth-popup 的 max-width 控制 */
}

/* 限制表单内容高度，避免溢出 */
.auth-form {
    flex-direction: column;
    gap: 15px; /* 减少表单元素间距 */
    width: 100%; /* 宽度继承自 .auth-content */
    display: none;
    box-sizing: border-box; /* 内边距不影响宽度 */
    max-height: calc(90vh - 40px); /* 计算可用高度（弹窗内边距20px*2） */
    overflow-y: auto; /* 内容过多时显示滚动条 */
}

/* 输入框样式调整 */
.auth-form input {
    font-size: 1em; /* 减小字体大小（原1.2em→1em） */
    padding: 8px; /* 减少输入框内边距（原10px→8px） */
    margin: 0;
    width: 100%; /* 宽度占满父容器 */
    box-sizing: border-box; /* 内边距不影响总宽度 */
}

/* 按钮组样式调整 */
.button-group {
    gap: 10px; /* 减少按钮间距（原15px→10px） */
    margin-top: 8px; /* 减少与上方输入框的间距（原10px→8px） */
}

.button-group button {
    padding: 8px; /* 减少按钮内边距（原10px→8px） */
    font-size: 0.9em; /* 减小按钮字体（原1em→0.9em） */
}

/* 两列模块导航布局 */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自动适应列数 */
    gap: 20px;
    padding: 20px;
    margin: 0 auto; /* 容器居中 */
    max-width: 1200px; /* 限制最大宽度 */
    width: 100%; /* 新增：确保占满可用宽度 */
    box-sizing: border-box; /* 新增：包含内边距在宽度计算内 */
}

/* 模块卡片基础样式 */
.module-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.3s ease;
}

.module-card:hover {
    transform: translateY(-3px);
}

.module-card i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #0066cc;
}

.module-card h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333333;
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.module-card:hover {
  transform: translateY(-5px);
}

.header-left a {
    color: #e7eaec; /* 保持原文本颜色 */
    text-decoration: none; /* 移除下划线 */
}

.header-left a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}