/* --- CSS 重置 --- */
/* --- CSS Reset --- */
* {
    margin: 0; /* 清除外边距 */
    padding: 0; /* 清除内边距 */
    box-sizing: border-box; /* 设置盒模型为 border-box */
}

/* --- 全局样式 --- */
/* --- Global Styles --- */
body {
    font-family: 'Patrick Hand', 'Comic Neue', cursive; /* 设置全局字体为卡通风格 */
    line-height: 1.6; /* 设置行高 */
    background-color: #f0f8ff; /* 设置页面背景颜色 (爱丽丝蓝) */
    color: #333; /* 设置默认文字颜色 */
    /* 可以在这里添加 :root 变量来管理主题颜色 */
    /* --theme-primary: #aee9ae; */
    /* --theme-secondary: #f8f8a8; */
}

.container {
    max-width: 1200px; /* 设置内容最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 20px; /* 左右内边距 */
}

a {
    text-decoration: none; /* 去除链接下划线 */
    color: #007bff; /* 设置链接颜色 (主蓝色) */
}

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

ul {
    list-style: none; /* 去除列表的项目符号 */
}

/* --- 头部样式 --- */
/* --- Header Styles --- */
header {
    background-color: #ffffff; /* 头部背景色 (白色) */
    padding: 15px 0; /* 上下内边距 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
    position: sticky; /* 固定头部 */
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 子元素两端对齐 */
    align-items: center; /* 子元素垂直居中 */
}

.logo {
    font-size: 1.8em; /* Logo 字体大小 */
    font-weight: bold; /* Logo 字体加粗 */
    color: #0056b3; /* Logo 颜色 (深蓝色) */
    font-family: 'Comic Neue', cursive; /* Logo 使用更圆润的字体 */
}

nav ul {
    display: flex; /* 导航项使用 Flexbox 排列 */
}

nav ul li {
    margin-left: 30px; /* 增加导航项左外边距 */
}

nav ul li a {
    font-size: 1.2em; /* 稍稍增大导航链接字体大小 */
    font-weight: bold; /* 导航链接字体加粗 */
    color: #333; /* 导航链接颜色 */
    transition: color 0.3s ease, background-color 0.3s ease; /* 添加背景色过渡效果 */
    padding: 5px 10px; /* 为悬停效果添加内边距 */
    border-radius: 4px; /* 为悬停背景添加圆角 */
}

nav ul li a:hover {
    color: #0056b3; /* 鼠标悬停时链接颜色 (深蓝色) */
    background-color: #e7f5ff; /* 鼠标悬停时添加淡蓝色背景 */
    text-decoration: none; /* 悬停时也去除下划线 */
}

/* --- 语言切换器样式 --- */
/* --- Language Switcher Styles --- */
.language-switcher {
    /* 可以保留容器的样式，或根据需要调整 */
    position: relative; /* 用于可能的自定义下拉箭头定位 */
}

/* 隐藏默认的屏幕阅读器标签 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 下拉菜单样式 */
#language-select {
    padding: 6px 12px; /* 内边距 */
    font-family: 'Patrick Hand', 'Comic Neue', cursive; /* 继承或设置字体 */
    font-size: 1em; /* 字体大小 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    background-color: #f9f9f9; /* 背景色 */
    cursor: pointer; /* 鼠标指针 */
    /* 可以添加 appearance: none; 并用背景图片自定义箭头，但暂时保持简单 */
    margin-left: 5px; /* 可选：与其他元素保持间距 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

#language-select:hover {
    border-color: #007bff; /* 悬停时边框颜色 */
}

#language-select:focus {
    outline: none; /* 移除默认聚焦轮廓 */
    border-color: #0056b3; /* 聚焦时边框颜色 */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* 添加聚焦光晕效果 */
}

.language-switcher button {
    /* 保留此规则或注释/删除，如果不再需要单独按钮样式 */
    /*
    margin-left: 5px; 
    padding: 5px 10px; 
    font-family: 'Patrick Hand', 'Comic Neue', cursive; 
    border: 1px solid #ccc; 
    background-color: #f9f9f9; 
    cursor: pointer; 
    border-radius: 4px; 
    transition: background-color 0.3s ease; 
    */
}

.language-switcher button:hover {
     /* 保留此规则或注释/删除 */
    /* background-color: #e0e0e0; */
}

/* --- 主要内容区域样式 (占位符) --- */
/* --- Main Content Styles (Placeholders) --- */
main {
    padding-top: 40px; /* 主内容区域顶部内边距，避免被固定头部遮挡 */
    padding-bottom: 40px; /* 主内容区域底部内边距 */
}

section {
    padding: 60px 0; /* 内容板块上下内边距 */
    margin-bottom: 20px; /* 内容板块下外边距 */
}

section:nth-child(even):not(.quick-test):not(.cta-section) { /* 排除特定背景色的区域 */
    background-color: #e7f5ff; /* 偶数板块背景色 (淡蓝色) */
}

h1, h2, h3 {
    margin-bottom: 20px; /* 标题下外边距 */
    color: #333; /* 标题颜色 */
    font-family: 'Comic Neue', cursive; /* 标题使用圆润字体 */
}

h1 {
    font-size: 2.8em; /* H1 字体大小 */
    text-align: center; /* H1 居中 */
}

h2 {
    font-size: 2.2em; /* H2 字体大小 */
    border-bottom: 2px solid #a3d5ff; /* H2 底部边框 (稍浅蓝色) */
    padding-bottom: 10px; /* H2 底部内边距 */
    margin-bottom: 30px; /* H2 下外边距 */
}

h3 {
    font-size: 1.6em; /* H3 字体大小 */
}

.hero {
    padding: 80px 0; /* 恢复英雄区域上下内边距 */
    background-color: #d1e7ff; /* 英雄区域背景色 (稍深淡蓝) */
    text-align: center; /* 恢复文本居中 */
}

.hero h1 {
    margin-bottom: 30px; /* 英雄区域 H1 下外边距 */
}

.hero p {
    font-size: 1.2em; /* 英雄区域段落字体大小 */
    margin-bottom: 40px; /* 段落下外边距 */
    max-width: 700px; /* 段落最大宽度 */
    margin-left: auto; /* 恢复水平居中 */
    margin-right: auto; /* 恢复水平居中 */
}

/* 建议内容区域样式 */
#advice-content {
    margin-top: 30px; /* 与按钮的间距 */
    background-color: #ffffff; /* 白色背景 */
    padding: 25px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    text-align: left; /* 文本左对齐 */
    max-width: 700px; /* 最大宽度 */
    margin-left: auto; /* 水平居中 */
    margin-right: auto; /* 水平居中 */
    line-height: 1.7; /* 增加行高以便阅读 */
}

/* 全局 CTA 按钮样式 */
.cta-button, #show-advice-button {
    display: inline-block; /* 按钮显示为行内块 */
    padding: 12px 25px; /* 调整内边距 (上下 12px, 左右 25px) */
    background-color: #007bff; /* 默认背景色 (主蓝色) */
    color: #fff; /* 默认文字颜色 (白色) */
    font-size: 1.1em; /* 调整字体大小 */
    font-weight: bold; /* 按钮字体加粗 */
    border: none; /* 无边框 */
    border-radius: 25px; /* 按钮圆角 */
    cursor: pointer; /* 鼠标指针 */
    text-decoration: none; /* 去除下划线 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 过渡效果 */
    text-align: center; /* 确保文字水平居中 */
}

.cta-button:hover, #show-advice-button:hover {
    background-color: #0056b3; /* 鼠标悬停时背景色加深 (深蓝色) */
    transform: translateY(-2px); /* 鼠标悬停时轻微上移 */
    text-decoration: none; /* 悬停时也去除下划线 */
    color: #fff; /* 确保悬停时文字颜色不变 */
}

/* --- 页脚样式 --- */
/* --- Footer Styles --- */
footer {
    background-color: #d3d3d3; /* 页脚背景色 (浅灰色) */
    color: #555; /* 页脚文字颜色 */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 上下内边距 */
    margin-top: 40px; /* 顶部外边距 */
    font-size: 0.9em; /* 字体大小 */
}

footer p {
    margin-bottom: 5px; /* 段落下外边距 */
}

footer a {
    color: #0056b3; /* 页脚链接颜色 (深蓝色) */
}

/* --- 响应式设计 --- */
/* --- Responsive Design --- */
@media (max-width: 768px) {
    /* 屏幕宽度小于等于 768px 时生效 */
    header .container {
        flex-direction: column; /* 头部内容垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    nav ul {
        flex-direction: column; /* 导航项垂直排列 */
        width: 100%; /* 宽度占满 */
        margin-top: 15px; /* 顶部外边距 */
    }

    nav ul li {
        margin-left: 0; /* 清除左外边距 */
        margin-bottom: 10px; /* 底部外边距 */
        text-align: center; /* 文本居中 */
        background-color: #f8f8f8; /* 添加背景色 */
        padding: 10px 0; /* 上下内边距 */
        border-radius: 4px; /* 圆角 */
    }

    .language-switcher {
        margin-top: 15px; /* 顶部外边距 */
        align-self: center; /* 自身居中 */
    }

    h1 {
        font-size: 2.2em; /* 调整 H1 字体大小 */
    }

    h2 {
        font-size: 1.8em; /* 调整 H2 字体大小 */
    }

    h3 {
        font-size: 1.4em; /* 调整 H3 字体大小 */
    }

    .hero {
        padding: 60px 0; /* 调整英雄区域内边距 */
    }

    .hero p {
        font-size: 1.1em; /* 调整英雄区域段落字体大小 */
    }

    .cta-button, #show-advice-button {
        padding: 12px 25px; /* 调整按钮内边距 */
        font-size: 1.1em; /* 调整按钮字体大小 */
    }
}

/* --- 功能网格样式 --- */
/* --- Feature Grid Styles --- */
.feature-grid {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式列，最小 300px */
    gap: 30px; /* 网格项之间的间距 */
    margin-top: 40px; /* 网格顶部外边距 */
}

.feature-item {
    background-color: #ffffff; /* 特色项背景色 (白色) */
    padding: 25px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
    border-left: 5px solid #007bff; /* 左侧边框装饰 (主蓝色) */
}

.feature-item h3 {
    color: #0056b3; /* 特色标题颜色 (深蓝色) */
    margin-bottom: 15px; /* 标题下外边距 */
}

/* --- 工作原理步骤样式 --- */
/* --- How It Works Steps Styles --- */
.steps-container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-around; /* 子元素均匀分布 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 元素间距 */
    margin-top: 40px; /* 容器顶部外边距 */
}

.step {
    flex: 1; /* 子元素弹性增长 */
    min-width: 280px; /* 最小宽度 */
    text-align: center; /* 文本居中 */
    padding: 20px; /* 内边距 */
    background-color: #ffffff; /* 背景色 (白色) */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* 轻微阴影 */
}

.step strong {
    display: block; /* 块级显示 */
    font-size: 1.3em; /* 字体大小 */
    color: #0056b3; /* 颜色 (深蓝色) */
    margin-bottom: 10px; /* 下外边距 */
}

/* --- 用户评价网格样式 --- */
/* --- Testimonial Grid Styles --- */
.testimonial-grid {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 响应式列 */
    gap: 30px; /* 网格间距 */
    margin-top: 40px; /* 顶部外边距 */
}

.testimonial-item {
    background-color: #e7f5ff; /* 背景色 (淡蓝色) */
    padding: 25px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    border: 1px dashed #a3d5ff; /* 虚线边框 (稍浅蓝色) */
    position: relative; /* 相对定位，用于伪元素 */
    margin-bottom: 10px; /* 底部外边距 */
}

.testimonial-item p {
    margin-bottom: 15px; /* 段落下外边距 */
    font-style: italic; /* 斜体 */
}

.testimonial-item cite {
    display: block; /* 块级显示 */
    text-align: right; /* 文本右对齐 */
    font-weight: bold; /* 粗体 */
    color: #555; /* 颜色 */
}

/* 添加引号效果 */
.testimonial-item::before {
    content: '\201C'; /* 左引号 */
    font-size: 3em; /* 字体大小 */
    color: #a3d5ff; /* 颜色 (稍浅蓝色) */
    position: absolute; /* 绝对定位 */
    top: 10px;
    left: 15px;
    opacity: 0.5; /* 透明度 */
}

/* --- 更多信息区域样式 --- */
/* --- More Info Section Styles --- */
.more-info {
    background-color: #ffffff; /* 背景色 (白色) */
    padding: 60px 0;
}

.more-info h3 {
    margin-top: 30px; /* H3 顶部外边距 */
    color: #0056b3; /* 标题颜色 (深蓝色) */
}

.more-info p {
    margin-bottom: 15px; /* 段落下外边距 */
    line-height: 1.7; /* 调整行高 */
}

/* --- 最终 CTA 区域样式 --- */
/* --- Final CTA Section Styles --- */
.cta-section {
    background-color: #d1e7ff; /* 背景色 (稍深淡蓝, 同 Hero) */
    padding: 60px 0;
    text-align: center; /* 文本居中 */
}

.cta-section h2 {
    border-bottom: none; /* 移除 H2 下划线 */
}

.cta-section p {
    font-size: 1.1em; /* 字体大小 */
    margin-bottom: 30px; /* 下外边距 */
    max-width: 600px; /* 最大宽度 */
    margin-left: auto;
    margin-right: auto;
}

/* --- 响应式调整 (补充) --- */
/* --- Responsive Adjustments (Additional) --- */
@media (max-width: 768px) {
    .feature-grid,
    .testimonial-grid {
        grid-template-columns: 1fr; /* 在小屏幕上改为单列 */
    }

    .steps-container {
        flex-direction: column; /* 步骤改为垂直排列 */
        align-items: center; /* 居中对齐 */
    }

    .step {
        width: 90%; /* 设置宽度 */
        max-width: 400px; /* 最大宽度 */
    }
}

/* --- AI 聊天页面样式 --- */
/* --- AI Chat Page Styles --- */
.ai-chat-section {
    padding: 40px 0; /* 上下内边距 */
}

.ai-chat-section h2 {
    text-align: center; /* 标题居中 */
    border-bottom: none; /* 移除标题下划线 */
    margin-bottom: 40px; /* 增加标题下外边距 */
}

.chat-container {
    max-width: 800px; /* 聊天容器最大宽度 */
    margin: 0 auto; /* 水平居中 */
    background-color: #ffffff; /* 背景色 (白色) */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 更明显的阴影 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    height: 60vh; /* 设置固定高度，或根据需要调整 (e.g., min-height) */
    overflow: hidden; /* 隐藏溢出内容 */
}

.message-area {
    flex-grow: 1; /* 占据剩余空间 */
    padding: 20px; /* 内边距 */
    overflow-y: auto; /* 内容溢出时显示垂直滚动条 */
    display: flex;
    flex-direction: column; /* 消息垂直排列 */
    gap: 15px; /* 消息间距 */
}

.message {
    padding: 10px 15px; /* 消息内边距 */
    border-radius: 15px; /* 消息气泡圆角 */
    max-width: 75%; /* 最大宽度 */
    line-height: 1.4; /* 行高 */
}

.ai-message {
    background-color: #e7f5ff; /* AI 消息背景色 (淡蓝色) */
    border-bottom-left-radius: 0; /* 左下角直角 */
    align-self: flex-start; /* 左对齐 */
}

.user-message {
    background-color: #d1e7ff; /* 用户消息背景色 (稍深淡蓝) */
    border-bottom-right-radius: 0; /* 右下角直角 */
    align-self: flex-end; /* 右对齐 */
    color: #0056b3; /* 用户消息文字颜色 (深蓝色) */
}

.input-area {
    display: flex; /* 使用 Flexbox 布局 */
    padding: 15px; /* 内边距 */
    border-top: 1px solid #eee; /* 顶部边框 */
    background-color: #f8f9fa; /* 背景色 (淡灰) */
}

#chat-input {
    flex-grow: 1; /* 占据剩余空间 */
    padding: 10px 15px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 20px; /* 圆角 */
    resize: none; /* 禁止调整大小 */
    font-family: inherit; /* 继承字体 */
    font-size: 1em; /* 字体大小 */
    margin-right: 10px; /* 右外边距 */
    height: 40px; /* 固定高度 */
    overflow-y: auto; /* 内容多时允许滚动 */
}

#send-button {
    padding: 10px 20px; /* 内边距 */
    background-color: #007bff; /* 背景色 (主蓝色) */
    color: #fff; /* 文字颜色 (白色) */
    border: none; /* 无边框 */
    border-radius: 20px; /* 圆角 */
    cursor: pointer; /* 鼠标指针 */
    font-family: inherit; /* 继承字体 */
    font-weight: bold; /* 粗体 */
    transition: background-color 0.3s ease; /* 过渡效果 */
}

#send-button:hover {
    background-color: #0056b3; /* 悬停时背景色加深 (深蓝色) */
}

.disclaimer {
    text-align: center; /* 文本居中 */
    margin-top: 30px; /* 顶部外边距 */
    font-size: 0.9em; /* 字体大小 */
    color: #666; /* 颜色 (灰色) */
}

/* 聊天界面响应式调整 */
@media (max-width: 768px) {
    .chat-container {
        height: 70vh; /* 在小屏幕上增加高度 */
    }
    .message {
        max-width: 85%; /* 调整消息最大宽度 */
    }
}

/* --- 快速测试板块样式 --- */
/* --- Quick Test Section Styles --- */
.quick-test {
    padding: 40px 0;
    background-color: #f0f8ff; /* 淡蓝色背景 */
    text-align: center;
}

.quick-test h2 {
    color: #333;
    margin-bottom: 15px;
}

.quick-test p {
    color: #555;
    max-width: 600px;
    margin: 0 auto 25px auto; /* 居中并添加底部外边距 */
    line-height: 1.6;
}

.quick-test .cta-button {
    background-color: #ffc107; /* Yellow background */
    color: #333; /* Dark grey/black text */
    border: 1px solid #e0a800; /* Optional: slightly darker border */
    padding: 12px 25px;
    font-size: 1.1em;
    border-radius: 25px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.quick-test .cta-button:hover {
    background-color: #e0a800; /* Darker yellow on hover */
    color: #333; /* Keep text color dark */
    border-color: #c69500; /* Optional: even darker border on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* --- 全面测试板块样式 (复制自 Quick Test) --- */
.comprehensive-test {
    padding: 40px 0;
    background-color: #e6ffe6; /* 淡绿色背景，用于区分 */
    text-align: center;
}

.comprehensive-test h2 {
    color: #333;
    margin-bottom: 15px;
}

.comprehensive-test p {
    color: #555;
    max-width: 600px;
    margin: 0 auto 25px auto; /* 居中并添加底部外边距 */
    line-height: 1.6;
}

/* 按钮样式可以与 Quick Test 不同，或保持一致 */
/* 这里我们让它使用全局 .cta-button 样式 (绿色按钮) */
.comprehensive-test .cta-button {
    /* 继承全局 .cta-button 样式 */
    /* 如果需要特定样式，在这里添加 */
}

/* --- 测试页面样式 --- */
/* --- Test Page Styles --- */
.test-section {
    padding: 40px 0; /* 上下内边距 */
}

.test-section h2 {
    text-align: center; /* 标题居中 */
    margin-bottom: 20px;
}

.test-section .instructions {
    text-align: center; /* 说明文本居中 */
    margin-bottom: 40px; /* 下外边距 */
    color: #555; /* 文本颜色 */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

#mental-test-form {
    max-width: 800px; /* 表单最大宽度 */
    margin: 0 auto; /* 水平居中 */
    background-color: #ffffff; /* 背景色 */
    padding: 30px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.question-list {
    margin-bottom: 30px; /* 问题列表下外边距 */
}

.question-item {
    margin-bottom: 25px; /* 每个问题项的下外边距 */
    padding-bottom: 25px; /* 下内边距 */
    border-bottom: 1px solid #eee; /* 分隔线 */
}

.question-item:last-child {
    border-bottom: none; /* 最后一个问题项无分隔线 */
    margin-bottom: 0;
    padding-bottom: 0;
}

.question-text {
    font-weight: bold; /* 问题文本加粗 */
    margin-bottom: 15px; /* 问题文本下外边距 */
    font-size: 1.1em;
    color: #333;
}

.options label {
    display: block; /* 每个选项占一行 */
    margin-bottom: 10px; /* 选项下外边距 */
    cursor: pointer; /* 鼠标指针 */
    font-size: 1em;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.options label:hover {
    background-color: #f0f0f0; /* 悬停背景色 */
}

.options input[type="radio"] {
    margin-right: 8px; /* 单选按钮和文本间距 */
    cursor: pointer;
    /* 可以考虑自定义单选按钮样式 */
}

/* 提交按钮居中 */
#mental-test-form button[type="submit"] {
    display: block; /* 块级显示 */
    margin: 20px auto 0; /* 上外边距，水平居中 */
    min-width: 150px; /* 最小宽度 */
}

/* 测试结果区域样式 */
.test-results {
    margin-top: 40px; /* 顶部外边距 */
    padding: 30px; /* 内边距 */
    background-color: #e7f5ff; /* 背景色 (淡蓝色) */
    border-radius: 8px; /* 圆角 */
    border: 1px solid #a3d5ff; /* 边框 (稍浅蓝色) */
    text-align: center; /* 文本居中 */
}

.test-results h3 {
    margin-bottom: 15px; /* 结果标题下外边距 */
    color: #0056b3; /* 结果标题颜色 (深蓝色) */
}

.test-results p {
    margin-bottom: 10px; /* 段落下外边距 */
    line-height: 1.5;
}

#test-score {
    font-weight: bold; /* 分数加粗 */
    font-size: 1.2em;
}

#test-interpretation {
    font-style: italic; /* 解释文本斜体 */
    margin-top: 15px;
    margin-bottom: 15px;
}

/* --- 快速测试页面样式 --- */
#quick-mental-test {
    max-width: 800px; /* 设置测试页面的最大宽度 */
    margin: 40px auto; /* 上下边距40px，左右自动居中 */
    padding: 30px; /* 内部填充 */
    background-color: var(--background-light); /* 使用浅色背景 */
    border-radius: 12px; /* 圆角边框 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

#quick-mental-test h2 {
    color: var(--primary-color); /* 标题颜色 */
    text-align: center; /* 标题居中 */
    margin-bottom: 15px; /* 标题下边距 */
}

#quick-mental-test p {
    text-align: center; /* 描述文本居中 */
    color: var(--text-secondary); /* 描述文本颜色 */
    margin-bottom: 30px; /* 描述文本下边距 */
    line-height: 1.6; /* 行高 */
}

/* --- 进度条样式 --- */

/* --- 问题列表样式 --- */
.question-list {
    margin-bottom: 30px; /* 问题列表下边距 */
}

.question-item {
    background-color: #fff; /* 问题项背景色 */
    padding: 20px; /* 问题项内边距 */
    margin-bottom: 20px; /* 问题项下边距 */
    border-radius: 8px; /* 问题项圆角 */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05); /* 问题项轻微阴影 */
    border-left: 5px solid var(--primary-color-light); /* 左侧添加装饰边框 */
}

.question-text {
    font-weight: bold; /* 问题文本加粗 */
    margin-bottom: 15px; /* 问题文本下边距 */
    color: var(--text-primary); /* 问题文本颜色 */
    line-height: 1.5; /* 问题文本行高 */
}

.options label {
    display: block; /* 每个选项占一行 */
    margin-bottom: 10px; /* 选项下边距 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    padding: 10px 15px; /* 选项内边距 */
    border-radius: 5px; /* 选项圆角 */
    transition: background-color 0.2s ease; /* 背景色过渡效果 */
    border: 1px solid #eee; /* 添加浅色边框 */
}

.options label:hover {
    background-color: #f9f9f9; /* 悬停时改变背景色 */
}

.options input[type="radio"] {
    margin-right: 10px; /* 单选按钮右边距 */
    accent-color: var(--primary-color); /* 设置单选按钮选中时的颜色 */
}

/* 选中选项的样式 */
.options input[type="radio"]:checked + span {
    font-weight: bold; /* 选中项文本加粗 */
    color: var(--primary-color); /* 选中项文本颜色 */
}

/* --- 结果区域样式 --- */
#test-results {
    margin-top: 30px; /* 结果区域上边距 */
    padding: 25px; /* 结果区域内边距 */
    background-color: var(--background-light); /* 结果区域背景色 */
    border-radius: 8px; /* 结果区域圆角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* 结果区域阴影 */
    text-align: center; /* 文本居中 */
}

#test-results h3 {
    color: var(--primary-color); /* 结果标题颜色 */
    margin-bottom: 10px; /* 结果标题下边距 */
}

#score-display {
    font-size: 1.8em; /* 分数显示字体大小 */
    font-weight: bold; /* 分数显示字体加粗 */
    color: var(--accent-color); /* 分数显示颜色 */
    margin-bottom: 15px; /* 分数显示下边距 */
}

#interpretation {
    color: var(--text-secondary); /* 解释文本颜色 */
    line-height: 1.6; /* 解释文本行高 */
}

/* --- 响应式设计 --- */
/* ... existing responsive styles ... */

/* --- 页脚样式 --- */
/* ... existing footer styles ... */

/* --- 包裹两个测试板块的容器样式 --- */
.test-sections-container {
    display: flex; /* 使用 Flexbox 布局 */
    gap: 20px; /* 设置两个板块之间的间距 */
    padding: 40px 20px; /* 容器的上下内边距40px，左右内边距20px (根据需要调整) */
    max-width: 1200px; /* 限制最大宽度 */
    margin: 0 auto; /* 水平居中 */
}

/* 容器内的每个测试板块样式 */
.test-sections-container > section {
    flex: 1; /* 让每个板块占据可用空间的一半 */
    padding: 30px; /* 板块内部的内边距 */
    border-radius: 8px; /* 添加圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); /* 添加轻微阴影 */
    /* 保留各自的背景颜色 */
}

.test-sections-container .quick-test {
    background-color: #f0f8ff; /* 浅蓝色 */
}

.test-sections-container .comprehensive-test {
    background-color: #e6ffe6; /* 浅绿色 */
}

/* 移除原先独立板块的上下内边距，因为容器已经有了 */
.quick-test,
.comprehensive-test {
   /* padding: 40px 0; */ /* 注释掉或删除原先的上下 padding */
    /* text-align 保持 center */
}

/* 响应式调整：在小屏幕上恢复上下排列 */
@media (max-width: 768px) {
    .test-sections-container {
        flex-direction: column; /* 改为垂直排列 */
        padding: 20px; /* 调整容器内边距 */
    }

    /* 恢复独立板块的上下内边距 */
    .quick-test,
    .comprehensive-test {
        padding: 40px 20px; /* 恢复上下内边距 */
    }
}

/* --- Buttons --- */
.cta-button {
    display: inline-block;
    padding: 12px 25px; /* Increased padding */
    margin-top: 20px;
    background-color: #007bff; /* Default Blue */
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 1rem; /* Slightly larger font */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.cta-button:hover {
    background-color: #0056b3; /* Darker Blue on hover */
    transform: translateY(-1px); /* Slight lift effect */
}

/* Specific button style for Quick Test section */
.quick-test .cta-button {
    background-color: #ffc107; /* Yellow background */
    color: #333; /* Dark grey/black text */
    border: 1px solid #e0a800; /* Optional: slightly darker border */
}

.quick-test .cta-button:hover {
    background-color: #e0a800; /* Darker yellow on hover */
    color: #333; /* Keep text color dark */
    border-color: #c69500; /* Optional: even darker border on hover */
}

/* Ensure Comprehensive Test button retains default blue or has its own style */
/* If .comprehensive-test button needs specific styles, add them here */
.comprehensive-test .cta-button {
    /* Keeps the default blue styles defined in .cta-button */
    /* Or override specific styles if needed */
}

/* Styles for the question options */
.options {
    margin-top: 10px;
    text-align: left; /* Align options to the left */
    max-width: 500px; /* Limit width for better readability */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; /* Indent options slightly */
}

.options label {
    display: block; /* Each option on a new line */
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}

.options input[type="radio"] {
    margin-right: 8px;
    vertical-align: middle; /* Align radio button nicely with text */
}