/* static/css/style.css */

/* 重置 margin/padding，如果你已经有其他 reset CSS，可自行省略 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =========================================
   修改说明：
   - 将 body 从 “锁死 100vh 且 flex 居中” 改为 “min-height:100vh” 允许滚动
   - 将 container 从 “height:90vh” 改为 “min-height” 并去掉 flex 居中锁死
   - 统一 form-box 下所有 <input>（text/password/email/tel）的圆角 & 边框 & 聚焦样式
   ========================================= */

body {
    font-family: "Helvetica Neue", Arial, sans-serif;
    /* 取消 height:100vh; display:flex; align-items:center; justify-content:center; */
    min-height: 100vh;
    background-color: #f2f2f2;
    margin: 0;
}

.container {
    width: 90%;
    max-width: 1600px;
    /* 原来 height:90vh 改为 min-height:90vh */
    min-height: 90vh;
    margin: 20px auto;  /* 顶部留白 20px，左右自动居中 */
    display: flex;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;    /* 左右两栏内容不可溢出 */
}

/* 左侧背景 */
.left-panel {
    flex: 1;
    background: url("../images/background_2.jpg") no-repeat center center;
    background-size: cover;
    /* 如果希望左侧也能垂直滚动（在内容超高时），可以加上 overflow-y:auto */
}

/* 右侧登录/注册框 */
.right-panel {
    width: 480px;
    background-color: #ffffff;
    /* 这里不再使用 align-items:center/justify-content:center，
       而是让内部 .login-box 本身撑开，必要时滚动。 */
    display: flex;
    justify-content: center;
    /* align-items: center;  <-- 可删除，让内容靠顶部对齐 */
    /* 如果想让右侧滚动时右侧出现自身滚动条：可加 overflow-y:auto */
}

.login-box {
    width: 100%;
    /* 当右侧内容过高时，给 login-box 本身一个最大高度并允许滚动 */
    max-height: 85vh;
    overflow-y: auto;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Logo 区 */
.logo-box img {
    width: 180px;
    /* 根据实际 logo 大小调整 */
    margin-bottom: 24px;
}

/* 提示文字区 */
.info-box {
    width: 100%;
    background-color: #f7f5f1;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 24px;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;

    /* 新增：固定高度 + 可滚动 */
    height: 350px;
    overflow: auto;

    /* 避免被父级 flex 压缩（如有） */
    flex: 0 0 auto;
}

.info-box ol {
    list-style: decimal inside;
    /* 建议去掉默认外边距，避免多出滚动 */
    margin: 0;
    padding-left: 1.25rem; /* 可选 */
}

.info-box li {
    margin-bottom: 8px;
}

/* 表单区 */
.form-box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.input-label {
    margin-top: 12px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: #555;
}

/* --------- 统一所有输入框（text / password / email / tel）的样式 --------- */
.form-box input[type="text"],
.form-box input[type="password"],
.form-box input[type="email"],
.form-box input[type="tel"] {
    width: 100%;
    padding: 10px 14px;
    font-size: 1rem;
    border: 2px solid #5b214b; /* 深紫色边框（可根据需求调整） */
    border-radius: 24px;
    outline: none;
    transition: border-color 0.2s;
}

/* 聚焦状态下，高亮边框 */
.form-box input[type="text"]:focus,
.form-box input[type="password"]:focus,
.form-box input[type="email"]:focus,
.form-box input[type="tel"]:focus {
    border-color: #21d9b4; /* 聚焦时边框颜色，示例用青绿色 */
}
/* ------------------------------------------------------------------------ */

/* 按钮容器 */
.btn-container {
    width: 100%;
    margin-top: 20px;
}

.btn-login {
    width: 100%;
    padding: 12px 0;
    background-color: #21d9b4; /* 按钮背景色 */
    border: none;
    color: #fff;
    font-size: 1rem;
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-login:hover {
    background-color: #1bc8a1;
}

/* 页面底部的“注册/找回密码” */
.extra-action {
    width: 100%;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.extra-action .link {
    color: #5b214b;
    text-decoration: none;
}

.extra-action .link:hover {
    text-decoration: underline;
}

/* 分隔线 “或” */
.separator {
    width: 100%;
    text-align: center;
    margin: 24px 0;
    position: relative;
}

.separator span {
    background-color: #ffffff;
    padding: 0 12px;
    color: #999;
    font-size: 0.9rem;
}

/* 分隔线的横线 */
.separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    right: 12px;
    height: 1px;
    background-color: #e0e0e0;
    transform: translateY(-50%);
    z-index: -1;
}

/* 如果项目中已经彻底移除 .btn-steam，这段可留可删 */
.btn-steam {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    border: 2px solid #5b214b;
    border-radius: 24px;
    text-decoration: none;
    color: #5b214b;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
}

.btn-steam img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.btn-steam:hover {
    background-color: #5b214b;
    color: #fff;
}

/* Flash 消息样式 */
.flash-container {
    width: 100%;
    margin-bottom: 12px;
}

.flash {
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 6px;
    font-size: 0.9rem;
}

/* 不同类型消息不同背景色 */
.flash.success {
    background-color: #e6ffed;
    border: 1px solid #6fcf97;
    color: #256d41;
}

.flash.error {
    background-color: #ffe6e6;
    border: 1px solid #eb5757;
    color: #991b1b;
}

.flash.info {
    background-color: #e6f0ff;
    border: 1px solid #4f7df0;
    color: #1f4fcc;
}