/* ====================== 全局初始化 ====================== */
/* 匹配页面全部html标签 */
* {
    margin: 0;           /* 清除默认外边距 */
    padding: 0;          /* 清除默认内边距 */
    box-sizing: border-box; /* 盒模型，宽高包含边框内边距 */
    font-family: "Microsoft YaHei", sans-serif; /* 统一字体 */
}

/* ====================== 顶部导航栏 ====================== */
.nav-bar {
    width: 100%;                          /* 铺满屏幕宽度 */
    background-color: #2563eb;           /* 主题蓝色背景 */
    display: flex;                        /* 弹性布局，按钮横向排列 */
    align-items: center;                  /* 内部元素垂直居中 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.12); /* 底部阴影分层 */
    height: 62px;                          /* 固定导航高度 */
    padding-left: 45px;                    /* 左侧留白 */
    gap: 22px;                             /* 按钮之间间距 */
}
/* 导航按钮通用样式 */
.nav-btn {
    background-color: #ffffff; /* 白底按钮 */
    border: none;               /* 去除默认边框 */
    border-radius: 8px;        /* 圆角 */
    cursor: pointer;            /* 悬浮手型光标 */
    transition: all 0.2s ease; /* 样式平滑过渡 */
    padding: 11px 26px;        /* 按钮内边距 */
    font-size: 16px;            /* 文字大小 */
}
/* 鼠标悬浮导航按钮效果 */
.nav-btn:hover {
    background-color: #eff6ff; /* 浅蓝底色 */
    transform: translateY(-2px);/* 轻微上浮 */
}

/* ====================== 页面主体容器 ====================== */
.container {
    max-width: 820px; /* 限制页面最大宽度，大屏不拉伸 */
    margin: 65px auto 0; /* 顶部外边距，左右自动居中 */
    padding: 0 18px; /* 左右留白，手机不贴边 */
}

/* ====================== 外层白色卡片 ====================== */
.main-box {
    background: #ffffff; /* 白色卡片背景 */
    padding: 40px 35px;  /* 卡片内部留白 */
    border-radius: 20px; /* 大圆角柔和视觉 */
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.08); /* 卡片阴影 */
}

/* ====================== 页面标题 ====================== */
.page-title {
    text-align: center; /* 文字居中 */
    color: #1e293b;     /* 深灰文字 */
    font-weight: 600;   /* 文字加粗 */
    font-size: 22px;    /* 标题字号 */
    margin-bottom: 35px;/* 标题下方间距 */
}

/* ====================== 单题容器 ====================== */
.question-box {
    background-color: #f8faff; /* 浅蓝背景区分卡片底色 */
    border-radius: 14px;        /* 圆角 */
    padding: 26px 20px;         /* 内部留白 */
    margin-bottom: 22px;         /* 底部外边距 */
}

/* ====================== 题目文字 ====================== */
.question-text {
    text-align: center; /* 居中显示题目 */
    font-size: 17px;    /* 字号 */
    color: #27374d;     /* 深色文字清晰阅读 */
    margin-bottom: 18px;/* 和下方提示分隔 */
    font-weight: 500;   /* 轻微加粗 */
}

/* 填写警告提示文字 */
.tip_warning {
    text-align: center; /* 居中 */
    font-size: 15px;    /* 小号提示字体 */
    color: #991b1b;      /* 红色提醒 */
    margin-bottom: 14px;/* 和输入框分隔 */
}

/* ====================== 答案输入框 ====================== */
.answer-input {
    display: block;        /* 块级元素可居中 */
    width: 80%;             /* 宽度占题目框80% */
    margin: 0 auto;        /* 水平居中 */
    border: none;           /* 清除默认边框 */
    border-bottom: 2px solid #94a3b8; /* 仅保留底部横线 */
    background: transparent;/* 背景透明贴合底色 */
    text-align: center;    /* 输入文字居中 */
    font-size: 16px;        /* 输入文字字号 */
    padding: 6px 0;         /* 上下内边距 */
    transition: border-color 0.2s; /* 下划线过渡 */
}
/* 输入框激活样式 */
.answer-input:focus {
    outline: none; /* 清除浏览器默认高亮框 */
    border-bottom: 2px solid #2563eb; /* 下划线变主题蓝 */
}

/* ====================== 提交按钮 ====================== */
.submit-btn {
    width: 100%;                  /* 铺满容器宽度 */
    height: 50px;                 /* 固定高度 */
    background-color: #2563eb;   /* 主题蓝色 */
    color: #fff;                   /* 白色文字 */
    border: none;                   /* 无边框 */
    border-radius: 12px;           /* 圆角 */
    font-size: 17px;               /* 文字字号 */
    cursor: pointer;                /* 悬浮手型 */
    margin-top: 15px;               /* 和输入框分隔 */
    transition: background 0.2s;  /* 背景色过渡 */
}
/* 提交按钮悬浮 */
.submit-btn:hover {
    background-color: #1d4ed8; /* 加深蓝色 */
}

/* ====================== 结果提示文本 ====================== */
.tip-text {
    text-align: center; /* 居中展示提示 */
    margin-top: 22px;   /* 和按钮分隔 */
    font-size: 15px;    /* 小号字体 */
}
/* 错误提示文字颜色 */
.error-tip {
    color: #dc2626;
}
/* 正确提示文字颜色 */
.success-tip {
    color: #16a34a;
}

/* ====================== 结局页面内容区域 ====================== */
.home-content {
    text-align: center; /* 全部文字居中 */
    margin-top: 80px;    /* 顶部大量留白，视觉居中 */
}
.home-content h1 {
    font-size: 36px;    /* 大标题字号 */
    color: #1e293b;     /* 深灰文字 */
    margin-bottom: 20px;/* 标题下方间距 */
}
.home-content p {
    font-size: 18px;    /* 段落字号 */
    color: #475569;     /* 柔和浅灰色 */
    max-width: 600px;   /* 限制段落宽度，避免文字过长 */
    margin: 0 auto;      /* 段落居中 */
    line-height: 1.8;    /* 行高提升阅读舒适度 */
}