/* =========================================================
   登录页 · 统一设计（桌面 + 移动）
   简洁 / 正式 / 平面化
   ========================================================= */
.login-page{
    min-height:100dvh;
    background:#f3f5f8;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
    color:#1b2434;
    overflow-x:hidden;
}

.auth-shell{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    min-height:100dvh;
}

/* ---------- 左侧品牌面板 ---------- */
.auth-brand{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:48px 50px;
    color:#fff;
    background:#173554;
}
.auth-brand-top{display:flex;align-items:center;gap:14px}
.auth-logo{
    width:52px;height:52px;border-radius:12px;
    background:rgba(255,255,255,.14);
    display:grid;place-items:center;
    font-size:22px;font-weight:800;color:#fff;
}
.auth-brand-top .kicker{font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.6);display:block}
.auth-brand-top strong{font-size:18px;font-weight:700;display:block;margin-top:2px}
.auth-brand-main{margin:44px 0}
.auth-brand-main .eyebrow{font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.auth-brand-main h1{font-size:42px;font-weight:800;line-height:1.14;margin:14px 0;letter-spacing:-.01em}
.auth-brand-main h1 em{font-style:normal;color:rgba(255,255,255,.92)}
.auth-brand-main p{font-size:14px;color:rgba(255,255,255,.72);max-width:360px;line-height:1.7}
.auth-points{display:flex;gap:18px;margin-top:24px;flex-wrap:wrap}
.auth-points span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:rgba(255,255,255,.78)}
.auth-points i{width:6px;height:6px;border-radius:50%;background:#7fb0e6}
.auth-brand-foot{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em;color:rgba(255,255,255,.45)}

/* ---------- 右侧表单面板 ---------- */
.auth-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 28px;
    background:#f3f5f8;
}
.auth-card{
    width:min(400px,100%);
    background:#fff;
    border:1px solid #e6eaf0;
    border-radius:16px;
    box-shadow:0 2px 8px rgba(27,36,52,.05),0 12px 30px rgba(27,36,52,.06);
    padding:32px 30px 24px;
}
.auth-card-brand{display:none;align-items:center;gap:12px;margin-bottom:20px}
.auth-card-brand .auth-logo{width:42px;height:42px;border-radius:11px;background:#173554;font-size:17px}
.auth-card-brand b{font-size:15px;display:block}
.auth-card-brand small{font-size:11px;color:#8a97a8;display:block;margin-top:2px}
.auth-heading{margin-bottom:20px}
.auth-heading .eyebrow{font-size:10px;letter-spacing:.12em;color:#2f6fed;font-weight:700}
.auth-heading h2{font-size:24px;font-weight:800;margin:6px 0 4px;letter-spacing:-.01em}
.auth-heading p{font-size:12px;color:#8a97a8;margin:0}

.auth-alert{
    display:flex;align-items:center;gap:9px;
    background:#fdeeee;border:1px solid #f3d2d2;border-radius:11px;
    padding:10px 12px;margin-bottom:16px;font-size:12px;
}
.auth-alert .alert-icon{
    width:20px;height:20px;border-radius:6px;background:#e05252;color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:12px;flex:0 0 auto;
}
.auth-alert b{display:block;color:#c64545;font-size:12px}
.auth-alert small{display:block;color:#b06464;font-size:11px;margin-top:1px}

.auth-form{display:grid;gap:14px}
.auth-field{display:block}
.auth-field>span{display:block;font-size:12px;font-weight:700;color:#4a5a70;margin-bottom:6px}
.auth-input-wrap{position:relative}
.auth-input-wrap .field-icon{
    position:absolute;left:13px;top:50%;transform:translateY(-50%);
    color:#9aa7b6;pointer-events:none;
}
.auth-input-wrap .field-icon svg{width:18px;height:18px;display:block}
.auth-input{
    width:100%;height:48px;padding:0 14px 0 42px;
    border:1px solid #d5dce6;border-radius:11px;
    font-size:14px;background:#fff;color:#1b2434;transition:.15s;
}
.auth-input:focus{border-color:#2f6fed;box-shadow:0 0 0 3px #eef4ff;outline:none}
.auth-input-wrap.password-field .auth-input{padding-right:72px}
.password-toggle{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    height:36px;min-width:52px;padding:0 10px;
    border:1px solid #e0e6ee;border-radius:9px;background:#f7f9fb;
    color:#66758a;font-size:12px;cursor:pointer;
}
.password-toggle:active{background:#eef2f7}

.auth-submit{
    display:flex;align-items:center;justify-content:center;gap:8px;
    width:100%;height:48px;margin-top:2px;
    border:0;border-radius:11px;
    background:#2f6fed;color:#fff;font-size:15px;font-weight:700;cursor:pointer;
    transition:.15s;
}
.auth-submit:hover{background:#2055c4}
.auth-submit:active{transform:translateY(1px)}
.auth-submit:disabled{opacity:.6;cursor:not-allowed}
.auth-submit .btn-arrow{font-size:17px}

.auth-security{
    display:flex;align-items:center;justify-content:center;gap:7px;
    margin-top:16px;padding-top:12px;border-top:1px solid #eef1f5;
    font-size:11px;color:#9aa6b5;
}
.auth-security .pulse{width:6px;height:6px;border-radius:50%;background:#18a06b}

/* ---------- 移动端 ---------- */
@media (max-width:900px){
    .login-page{background:linear-gradient(180deg,#e9eef7 0%,#f4f6fa 40%)}
    .auth-shell{grid-template-columns:1fr;min-height:100dvh}
    .auth-brand{display:none}
    .auth-panel{
        padding:max(24px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom));
        align-items:center;
    }
    .auth-card{
        padding:30px 24px 22px;
        border-radius:20px;
        box-shadow:0 10px 30px rgba(27,36,52,.08);
    }
    .auth-card-brand{display:flex;margin-bottom:24px}
    .auth-card-brand .auth-logo{width:46px;height:46px;border-radius:12px;background:#173554;font-size:19px}
    .auth-card-brand b{font-size:16px}
    .auth-card-brand small{font-size:11px}
    .auth-heading{margin-bottom:20px}
    .auth-heading h2{font-size:21px}
}
@media (max-width:420px){
    .auth-card{padding:26px 20px 18px}
}