/* login.css - 登录页面样式 */

/* 登录表单样式 */
form {
    width: 700px;  /* 宽度700像素 */
    margin:35px auto;  /* 外边距：上下35像素，左右自动（居中） */
    background: #fff;  /* 白色背景 */
    padding: 35px;  /* 内边距35像素 */
    border-radius: 16px;  /* 16像素圆角 */
    box-shadow: 0 12px 35px rgba(183, 28, 28, 0.15);  /* 红色调阴影效果 */
    border: 2px solid #ffebee;  /* 2像素浅红色边框 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
}

/* 登录表单悬停效果 */
form:hover {
    box-shadow: 0 15px 45px rgba(183, 28, 28, 0.2);  /* 加深阴影效果 */
    transform: translateY(-5px);  /* 向上移动5像素 */
    border-color: #ffccbc;  /* 边框颜色变为浅橙色 */
}

/* 登录表单标题样式 */
h3 {
    text-align: center;  /* 文字水平居中 */
    margin-bottom: 30px;  /* 底部外边距30像素 */
    color: #c62828;  /* 红色文字 */
    font-size: 36px;  /* 字体大小36像素 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    position: relative;  /* 相对定位 */
    padding-bottom: 15px;  /* 底部内边距15像素 */
}

/* 登录表单标题底部装饰线 */
h3::after {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    bottom: 0;  /* 底部对齐 */
    left: 50%;  /* 左侧50%位置 */
    transform: translateX(-50%);  /* 向左平移自身宽度的50%，实现居中 */
    width: 100px;  /* 宽度100像素 */
    height: 3px;  /* 高度3像素 */
    background: linear-gradient(90deg, #ff9800, #c62828, #ff9800);  /* 橙色-红色-橙色渐变 */
    border-radius: 3px;  /* 3像素圆角 */
}

/* 表单标签样式 */
label {
    display: block;  /* 块级显示 */
    margin-bottom: 10px;  /* 底部外边距10像素 */
    color: #5d4037;  /* 深棕色文字 */
    font-weight: 600;  /* 字体粗细600（中等粗体） */
    font-size: 16px;  /* 字体大小16像素 */
    position: relative;  /* 相对定位 */
    padding-left: 15px;  /* 左侧内边距15像素，为装饰符号留空间 */
}

/* 表单标签前的装饰符号 */
label::before {
    content: '✦';  /* 星形符号作为装饰 */
    position: absolute;  /* 绝对定位 */
    left: 0;  /* 左侧对齐 */
    color: #ff9800;  /* 橙色 */
    font-size: 12px;  /* 字体大小12像素 */
    top: 2px;  /* 顶部偏移2像素 */
}

/* 表单文本输入框样式 */
form  input[type="text"] {
    width: 100%;  /* 宽度100%填充父元素 */
    padding: 14px 18px;  /* 内边距：上下14像素，左右18像素 */
    margin-bottom: 20px;  /* 底部外边距20像素 */
    border: 2px solid #ffebee;  /* 2像素浅红色边框 */
    border-radius: 10px;  /* 10像素圆角 */
    box-sizing: border-box;  /* 盒模型为边框盒（宽度包含padding和border） */
    font-size: 16px;  /* 字体大小16像素 */
    transition: all 0.4s ease;  /* 所有属性0.4秒过渡效果 */
    background-color: #fffaf5;  /* 浅米色背景 */
    color: #5d4037;  /* 深棕色文字 */
}

/* 表单文本输入框聚焦状态样式 */
form  input[type="text"]:focus {
    outline: none;  /* 移除浏览器默认的聚焦轮廓线 */
    border-color: #ff9800;  /* 聚焦时边框颜色变为橙色 */
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.2);  /* 橙色发光效果 */
    background-color: white;  /* 聚焦时背景变为白色 */
    transform: translateY(-2px);  /* 向上移动2像素 */
}

/* 表单提交按钮样式 */
form button {
    width: 100%;  /* 宽度100%填充父元素 */
    padding: 16px;  /* 内边距16像素 */
    border: none;  /* 无边框 */
    border-radius: 10px;  /* 10像素圆角 */
    background: linear-gradient(to right, #c62828, #b71c1c);  /* 红色渐变背景 */
    color: white;  /* 白色文字 */
    cursor: pointer;  /* 鼠标悬停时显示手形指针 */
    font-size: 18px;  /* 字体大小18像素 */
    font-weight: bold;  /* 文字加粗 */
    font-family: "楷体", "STKaiti", serif;  /* 楷体字体族 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);  /* 所有属性0.4秒贝塞尔曲线过渡效果 */
    margin-top: 15px;  /* 顶部外边距15像素 */
    box-shadow: 0 6px 20px rgba(198, 40, 40, 0.25);  /* 红色调阴影效果 */
    position: relative;  /* 相对定位 */
    overflow: hidden;  /* 隐藏溢出内容 */
}

/* 按钮流光效果伪元素 */
form button::before {
    content: '';  /* 伪元素必须有content属性 */
    position: absolute;  /* 绝对定位 */
    top: 0;  /* 顶部对齐 */
    left: -100%;  /* 从左侧完全隐藏开始 */
    width: 100%;  /* 宽度100% */
    height: 100%;  /* 高度100% */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);  /* 透明-半透明白色-透明渐变 */
    transition: left 0.6s ease;  /* left属性0.6秒过渡效果 */
}

/* 按钮悬停时流光效果 */
form button:hover::before {
    left: 100%;  /* 移动到右侧完全隐藏 */
}

/* 按钮悬停效果 */
form button:hover {
    background: linear-gradient(to right, #d32f2f, #c62828);  /* 悬停时背景变为更亮的红色渐变 */
    transform: translateY(-4px);  /* 向上移动4像素 */
    box-shadow: 0 12px 35px rgba(198, 40, 40, 0.35);  /* 加深阴影效果 */
    letter-spacing: 2px;  /* 字符间距增加到2像素 */
}