/* 文件作用：注册页面样式文件，负责实现注册表单卡片、输入项和提示信息的视觉效果。 */
html, body { /* 让页面根元素和主体撑满浏览器高度。 */
    min-height: 100%; /* 让页面至少占满整个视口。 */
} /* 结束页面高度设置。 */

body { /* 设置注册页主体的背景效果。 */
    background: linear-gradient(135deg, #eef4ff 0%, #dfe9ff 100%); /* 使用渐变背景提升页面层次感。 */
} /* 结束注册页主体样式。 */

.page { /* 注册页最外层容器样式。 */
    min-height: 100vh; /* 让页面容器至少占满一屏。 */
    display: flex; /* 使用弹性布局实现整体居中。 */
    align-items: center; /* 让卡片垂直居中。 */
    justify-content: center; /* 让卡片水平居中。 */
    padding: 32px 16px; /* 设置页面边缘留白。 */
} /* 结束外层容器样式。 */

.card { /* 注册卡片样式。 */
    width: 100%; /* 让卡片宽度占满可用空间。 */
    max-width: 560px; /* 限制卡片最大宽度。 */
    background-color: #ffffff; /* 设置卡片背景色。 */
    border-radius: 16px; /* 设置卡片圆角。 */
    box-shadow: 0 20px 40px rgba(32, 54, 96, 0.18); /* 设置卡片阴影。 */
    padding: 32px; /* 设置卡片内部留白。 */
} /* 结束注册卡片样式。 */

.card-header { /* 注册卡片头部样式。 */
    margin-bottom: 24px; /* 设置头部与表单之间的间距。 */
    text-align: center; /* 让头部内容居中显示。 */
} /* 结束卡片头部样式。 */

.card-header h1 { /* 注册标题样式。 */
    font-size: 30px; /* 设置标题字号。 */
    color: #355db8; /* 设置标题颜色。 */
    margin-bottom: 10px; /* 设置标题下边距。 */
} /* 结束注册标题样式。 */

.card-header p { /* 注册说明文字样式。 */
    font-size: 14px; /* 设置说明文字大小。 */
    color: #6a7485; /* 设置说明文字颜色。 */
} /* 结束说明文字样式。 */

.form { /* 注册表单整体样式。 */
    display: flex; /* 使用弹性布局排列表单项。 */
    flex-direction: column; /* 让表单项纵向排列。 */
    gap: 16px; /* 设置表单项之间的间距。 */
} /* 结束注册表单样式。 */

.form-item { /* 单个表单项容器样式。 */
    display: flex; /* 使用弹性布局排列标签和输入框。 */
    flex-direction: column; /* 让标签和输入框纵向排列。 */
    gap: 8px; /* 设置标签与输入框的间距。 */
} /* 结束表单项容器样式。 */

.form-item label { /* 表单标签样式。 */
    color: #475266; /* 设置标签颜色。 */
    font-size: 15px; /* 设置标签字体大小。 */
} /* 结束表单标签样式。 */

.form-item input { /* 表单输入框样式。 */
    height: 44px; /* 设置输入框高度。 */
    padding: 0 14px; /* 设置输入框左右内边距。 */
    border: 1px solid #d4ddf0; /* 设置输入框边框。 */
    border-radius: 10px; /* 设置输入框圆角。 */
    background-color: #f8fbff; /* 设置输入框背景颜色。 */
    font-size: 15px; /* 设置输入框字体大小。 */
    color: #2d3645; /* 设置输入内容颜色。 */
} /* 结束表单输入框样式。 */

.form-item input:focus { /* 输入框聚焦样式。 */
    border-color: #547bd6; /* 聚焦时高亮边框颜色。 */
    box-shadow: 0 0 0 3px rgba(84, 123, 214, 0.12); /* 聚焦时显示柔和高亮阴影。 */
} /* 结束输入框聚焦样式。 */

.message { /* 注册提示信息样式。 */
    min-height: 20px; /* 预留提示文本显示高度。 */
    text-align: center; /* 让提示信息居中显示。 */
    color: #e54d42; /* 默认使用错误提示颜色。 */
    font-size: 14px; /* 设置提示文字大小。 */
} /* 结束注册提示信息样式。 */

.message.success { /* 注册成功提示样式。 */
    color: #1f9d55; /* 使用绿色显示成功消息。 */
} /* 结束成功提示样式。 */

.button-row { /* 注册按钮区域样式。 */
    margin-top: 4px; /* 给按钮区域增加上边距。 */
} /* 结束按钮区域样式。 */

.button-row button { /* 注册按钮样式。 */
    width: 100%; /* 让按钮占满整行宽度。 */
    height: 46px; /* 设置按钮高度。 */
    border-radius: 12px; /* 设置按钮圆角。 */
    background-color: #547bd6; /* 设置按钮背景色。 */
    color: #ffffff; /* 设置按钮文字颜色。 */
    font-size: 16px; /* 设置按钮字号。 */
    font-weight: 600; /* 设置按钮文字字重。 */
    cursor: pointer; /* 鼠标移入时显示手型。 */
} /* 结束注册按钮样式。 */

.link-row { /* 登录跳转链接区域样式。 */
    text-align: center; /* 让链接居中显示。 */
} /* 结束登录跳转链接区域样式。 */

.link-row a { /* 登录跳转链接文字样式。 */
    color: #547bd6; /* 设置链接颜色。 */
    font-size: 14px; /* 设置链接字号。 */
} /* 结束登录跳转链接文字样式。 */

.link-row a:hover { /* 登录跳转链接悬停样式。 */
    text-decoration: underline; /* 鼠标移入时显示下划线。 */
} /* 结束登录跳转链接悬停样式。 */