/* 文件作用：登录页面样式文件，负责实现文档要求的全屏背景、居中登录框和表单样式。 */
html, body { /* 让页面根元素和主体高度撑满浏览器。 */
    height: 100%; /* 设置页面整体高度为100%。 */
} /* 结束根元素高度设置。 */

body { /* 设置登录页主体的基础视觉效果。 */
    background-color: #eef3ff; /* 设置页面兜底背景颜色。 */
} /* 结束页面主体样式。 */

#container { /* 登录页最外层容器样式。 */
    min-height: 100%; /* 让容器至少撑满整个视口高度。 */
    background-image: url("../images/backgroundImg.jpg"); /* 设置页面背景图。 */
    background-size: cover; /* 让背景图覆盖整个容器。 */
    background-position: center; /* 让背景图保持居中显示。 */
    background-repeat: round; /* 按文档要求让背景图重复铺满整个区域。 */
    display: flex; /* 使用弹性布局实现居中。 */
    justify-content: center; /* 让内容在水平方向居中。 */
    align-items: center; /* 让内容在垂直方向居中。 */
    padding: 24px; /* 给页面边缘留出基础空白。 */
} /* 结束最外层容器样式。 */

#loginwrapper { /* 登录卡片包裹层样式。 */
    width: 850px; /* 按文档要求设置登录包裹层宽度。 */
    min-width: 850px; /* 按文档要求设置最小宽度避免变形。 */
    min-height: 470px; /* 按文档要求设置基础高度。 */
    border-radius: 12px; /* 设置圆角提升视觉效果。 */
    background-image: url("../images/loginBG.jpg"); /* 设置登录卡片背景图。 */
    background-size: cover; /* 让卡片背景图覆盖整个区域。 */
    background-position: center; /* 让卡片背景图居中显示。 */
    background-repeat: round; /* 按文档要求让卡片背景图平铺显示。 */
    overflow: hidden; /* 隐藏超出圆角区域的内容。 */
    box-shadow: 0 20px 40px rgba(15, 34, 79, 0.25); /* 设置卡片阴影。 */
    display: flex; /* 使用弹性布局排列左右区域。 */
    justify-content: flex-end; /* 让白色登录面板靠右显示。 */
} /* 结束登录卡片包裹层样式。 */

#loginwindow { /* 右侧白色登录面板样式。 */
    width: 45%; /* 按文档要求让白色区域约占45%。 */
    min-height: 470px; /* 保持与外层容器一致的基础高度。 */
    background-color: rgba(255, 255, 255, 0.96); /* 设置带轻微透明度的白色背景。 */
    display: flex; /* 使用弹性布局居中内部表单。 */
    align-items: center; /* 让内部内容垂直居中。 */
    justify-content: center; /* 让内部内容水平居中。 */
    padding: 36px 32px; /* 给面板内部留出舒适空白。 */
} /* 结束登录面板样式。 */

#loginform,
#loginForm { /* 登录表单整体样式。 */
    width: 100%; /* 让表单占满面板可用宽度。 */
} /* 结束登录表单样式。 */

#logininfo { /* 登录信息容器样式。 */
    width: 100%; /* 让信息区域占满表单宽度。 */
    color: #58606f; /* 设置基础文字颜色。 */
    font-size: 16px; /* 按文档要求统一信息区域基础字号。 */
    display: flex; /* 使用弹性布局排列表单项。 */
    flex-direction: column; /* 让表单项纵向排列。 */
    justify-content: space-between; /* 按文档要求让直接子元素在纵向两端分布。 */
    gap: 18px; /* 设置各表单块之间的间距。 */
} /* 结束登录信息容器样式。 */

#logininfo > h1, /* 兼容旧版标题标签样式。 */
#logininfo > h2 { /* 登录标题样式。 */
    text-align: center; /* 让标题水平居中。 */
    color: #547bd6; /* 设置标题主色。 */
    font-size: 30px; /* 设置标题字号。 */
    font-weight: 600; /* 设置标题字重。 */
} /* 结束登录标题样式。 */

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

.form-item label { /* 输入框标签样式。 */
    font-size: 15px; /* 设置标签字号。 */
    color: #4d5d7a; /* 设置标签文字颜色。 */
} /* 结束输入框标签样式。 */

#logininfo input { /* 登录输入框通用样式。 */
    width: 100%; /* 让输入框占满父容器宽度。 */
    padding: 12px 4px; /* 设置输入框内边距。 */
    font-size: 16px; /* 设置输入框文字大小。 */
    color: #333333; /* 设置输入内容颜色。 */
    border-bottom: 1px solid #547bd6; /* 设置下边框强调输入区域。 */
    letter-spacing: 1px; /* 设置文字间距提升可读性。 */
    background-color: transparent; /* 保持输入框背景透明。 */
} /* 结束登录输入框样式。 */

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

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

#btnwrapper,
#btn_wrapper { /* 登录按钮容器样式。 */
    text-align: center; /* 让按钮在容器内水平居中。 */
    margin-top: 8px; /* 给按钮区域增加顶部空白。 */
} /* 结束登录按钮容器样式。 */

#btnwrapper > button,
#btn_wrapper > button { /* 登录按钮样式。 */
    width: 150px; /* 按文档要求设置按钮宽度。 */
    height: 40px; /* 按文档要求设置按钮高度。 */
    border-radius: 20px; /* 按文档要求设置按钮圆角。 */
    background-color: #547bd6; /* 设置按钮背景色。 */
    color: #ffffff; /* 设置按钮文字颜色。 */
    font-size: 20px; /* 按文档要求设置按钮字号。 */
    letter-spacing: 5px; /* 按文档要求设置按钮文字间距。 */
    cursor: pointer; /* 鼠标移入按钮时显示手型。 */
    box-shadow: 0 15px 25px -5px #000000; /* 按文档要求设置按钮阴影。 */
} /* 结束登录按钮样式。 */

#awrapper,
#a_wrapper { /* 注册链接容器样式。 */
    text-align: center; /* 让注册链接居中显示。 */
    margin-top: -15px; /* 按文档要求上移注册链接区域。 */
} /* 结束注册链接容器样式。 */

#awrapper a,
#a_wrapper a { /* 注册链接文字样式。 */
    color: #547bd6; /* 设置链接主色。 */
    font-size: 14px; /* 设置链接字体大小。 */
} /* 结束注册链接文字样式。 */

#awrapper a:hover,
#a_wrapper a:hover { /* 注册链接悬停样式。 */
    color: #ff0000; /* 按文档要求将悬停颜色设为红色。 */
    text-decoration: underline; /* 鼠标移入时显示下划线。 */
} /* 结束注册链接悬停样式。 */

@media (max-width: 900px) { /* 小屏幕适配样式开始。 */
    #container { /* 调整小屏幕下外层容器边距。 */
        align-items: flex-start; /* 小屏幕下让内容从顶部开始布局。 */
        padding: 20px 12px; /* 缩小页面内边距。 */
    } /* 结束外层容器响应式样式。 */

    #loginwrapper { /* 调整小屏幕下登录卡片宽度。 */
        min-width: 0; /* 允许卡片在小屏幕下缩小。 */
        width: 100%; /* 让卡片宽度占满可用空间。 */
        flex-direction: column; /* 小屏幕下改为纵向布局。 */
    } /* 结束登录卡片响应式样式。 */

    #loginwindow { /* 调整小屏幕下白色面板宽度。 */
        width: 100%; /* 让白色面板占满整张卡片。 */
    } /* 结束登录面板响应式样式。 */
} /* 结束小屏幕适配样式。 */