@charset "UTF-8";

/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f0f2f5;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.login-container {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
}

/* 标题样式 */
h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #1a73e8;
}

/* 表单样式 */
.form-group {
    margin-bottom: 1rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: #5f6368;
    font-weight: 500;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #dfe1e5;
    border-radius: 4px;
    font-size: 1rem;
    outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: #1a73e8;
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

/* 按钮样式 */
button[type="submit"] {
    width: 100%;
    padding: 0.9rem;
    background-color: #1a73e8;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: #1556b7;
}

/* 错误提示样式 */
.error-message {
    color: #dc3545;
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* 响应式调整 */
@media (max-width: 480px) {
    .login-container {
        padding: 1.5rem;
        margin: 1rem;
    }
}

/* 验证码区域样式 */
.code-group {
    display: flex; /* 启用flex布局 */
    gap: 10px; /* 输入框和图片之间的间距 */
    align-items: center; /* 垂直居中对齐 */
}

/* 验证码输入框样式 */
.code-input {
    flex: 1; /* 输入框占满剩余空间 */
}

/* 验证码图片样式 */
.code-image {
    cursor: pointer; /* 鼠标悬停显示手型，提示可点击刷新 */
    height: 42px; /* 与输入框高度保持一致（配合输入框padding计算） */
    border: 1px solid #dfe1e5; /* 给图片加边框，与输入框风格统一 */
    border-radius: 4px; /* 圆角效果，与输入框一致 */
}


/* ################################################################# */
/* 备案信息样式：底部居中，与登录表单保持间距，样式简洁 */
/* ################################################################# */
.beian-info {
    margin-top: 2rem; /* 与上方登录按钮/错误提示保持足够间距 */
    text-align: center; /* 备案号居中显示 */
    padding-top: 1rem; /* 顶部内边距，增加视觉分层 */
    border-top: 1px solid #f0f2f5; /* 顶部细线分隔，与页面背景呼应 */
}

/* 备案号链接样式：避免默认蓝色下划线， hover 时轻微提示 */
.beian-info a {
    color: #5f6368; /* 文字颜色：与表单 label 颜色一致，不突兀 */
    font-size: 0.85rem; /* 字体大小：比正文小，符合备案号常规样式 */
    text-decoration: none; /* 取消默认下划线 */
}

.beian-info a:hover {
    color: #1a73e8; /* hover 时颜色：与登录按钮主色一致，增加交互提示 */
    text-decoration: underline; /* hover 时显示下划线，明确链接属性 */
}

/* 响应式适配：小屏幕下保持居中，字体略小 */
@media (max-width: 480px) {
    .beian-info {
        margin-top: 1.5rem; /* 小屏幕减少间距，节省空间 */
    }
    .beian-info a {
        font-size: 0.8rem; /* 小屏幕字体略小 */
    }
}