@charset "UTF-8";
/* ==========================================================================
   学生个人信息登记页面样式表  student-info.css
   任务：在 student-info.html 基础上，使用 CSS 对页面进行美化
   说明：仅使用原生 CSS，不依赖任何第三方框架
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. 为页面设置合适的背景颜色、字体和文字颜色
   -------------------------------------------------------------------------- */
body {
    margin: 0;
    padding: 32px 16px 56px;
    background: linear-gradient(180deg, #eef4fc 0%, #e6eef9 100%);
    background-attachment: fixed;
    font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333f4f;
}

/* --------------------------------------------------------------------------
   4. 美化页面标题，使其居中显示
   -------------------------------------------------------------------------- */
.page-title {
    max-width: 900px;
    margin: 0 auto 24px;
    padding-bottom: 14px;
    font-size: 26px;
    font-weight: 700;
    color: #1a3f6b;
    text-align: center;
    letter-spacing: 1px;
    border-bottom: 3px solid #1a73e8;
}

/* --------------------------------------------------------------------------
   3. 将表单设置为最大宽度，并在浏览器中水平居中
   -------------------------------------------------------------------------- */
.student-form {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 36px 32px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(26, 63, 107, 0.12);
}

/* --------------------------------------------------------------------------
   5. 为 fieldset 设置边框、圆角、内外边距及背景颜色
   -------------------------------------------------------------------------- */
fieldset {
    margin: 0 0 22px;
    padding: 18px 22px 20px;
    background: #f8fbff;
    border: 1px solid #d3e3f5;
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   6. 为 legend 设置字体大小、颜色和字重
   -------------------------------------------------------------------------- */
legend {
    padding: 0 12px;
    font-size: 17px;
    font-weight: 700;
    color: #1a73e8;
    letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   7. 调整 label、input、select 和 textarea 的间距，使表单排列整齐
      说明：每一行使用 flex 布局，标签固定宽度，控件占据剩余空间
   -------------------------------------------------------------------------- */
.form-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
}

.item-label {
    flex: 0 0 110px;
    padding-top: 9px;
    padding-right: 14px;
    font-size: 15px;
    color: #40536b;
    text-align: right;
}

.item-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* 同行排列的控件组（单选按钮、复选框） */
.control-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 8px;
}

.control-group > label {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #40536b;
    cursor: pointer;
}

.control-group input[type="radio"],
.control-group input[type="checkbox"] {
    margin: 0 6px 0 0;
    width: 16px;
    height: 16px;
    accent-color: #1a73e8;
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. 设置文本框、日期框、下拉框和文本域的宽度、边框及内边距
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: 360px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 15px;
    color: #333f4f;
    background-color: #ffffff;
    border: 1px solid #c3d4e8;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

textarea {
    max-width: 100%;
    min-height: 92px;
    line-height: 1.6;
    resize: vertical;
}

select {
    height: 38px;
    cursor: pointer;
}

/* 占位符文字颜色 */
input::placeholder,
textarea::placeholder {
    color: #a8b4c4;
}

/* --------------------------------------------------------------------------
   10. 为获得焦点的输入控件设置明显的边框或轮廓效果
   -------------------------------------------------------------------------- */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #1a73e8;
    background-color: #fbfdff;
    box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}

/* --------------------------------------------------------------------------
   9. 为“保存”和“重置”按钮设置不同的背景颜色
   -------------------------------------------------------------------------- */
.form-actions {
    margin-top: 26px;
    padding-top: 20px;
    text-align: center;
    border-top: 1px dashed #d3e3f5;
}

.btn {
    min-width: 132px;
    padding: 10px 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.15s, box-shadow 0.25s;
}

.btn-save {
    background-color: #1a73e8;   /* 保存：蓝色 */
    box-shadow: 0 3px 8px rgba(26, 115, 232, 0.35);
}

.btn-reset {
    background-color: #8c9aab;   /* 重置：灰色 */
    box-shadow: 0 3px 8px rgba(140, 154, 171, 0.35);
}

.btn + .btn {
    margin-left: 18px;
}

/* --------------------------------------------------------------------------
   10. 为按钮添加鼠标悬停效果
   -------------------------------------------------------------------------- */
.btn:hover {
    transform: translateY(-2px);
}

.btn-save:hover {
    background-color: #1558b0;
    box-shadow: 0 6px 14px rgba(21, 88, 176, 0.42);
}

.btn-reset:hover {
    background-color: #6c7a8c;
    box-shadow: 0 6px 14px rgba(108, 122, 140, 0.42);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn:focus-visible {
    outline: 3px solid rgba(26, 115, 232, 0.45);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   以下样式配合 student-info.js 的校验提示使用
   （错误提示元素由 JavaScript 动态创建，不使用行内样式）
   -------------------------------------------------------------------------- */

/* 单个字段的错误提示文字 */
.error-msg {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    color: #d93025;
}

/* 通过 :empty 伪类隐藏没有内容的提示元素 */
.error-msg:empty {
    display: none;
}

/* 校验不通过的控件 */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: #d93025;
    background-color: #fff6f5;
}

input.is-invalid:focus,
select.is-invalid:focus,
textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.18);
}

/* 表单顶部的整体提示信息（保存成功 / 校验失败） */
.form-message {
    margin: 0 0 20px;
    padding: 12px 18px;
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-line;      /* 保留错误清单中的换行 */
    border-radius: 8px;
    border-left: 5px solid transparent;
}

.form-message:empty {
    display: none;
}

.form-message.success {
    color: #17603a;
    background-color: #e7f6ec;
    border-left-color: #23a55a;
}

.form-message.error {
    color: #a3231a;
    background-color: #fdeceb;
    border-left-color: #d93025;
}

/* --------------------------------------------------------------------------
   窄屏适配：小屏幕下标签与控件改为上下排列
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .student-form {
        padding: 20px 16px 24px;
    }

    .form-item {
        display: block;
    }

    .item-label {
        display: block;
        padding: 0 0 6px;
        text-align: left;
    }

    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        max-width: 100%;
    }

    .btn {
        min-width: 110px;
        padding: 10px 18px;
    }
}