/* ============================================================
 * 登录页（2026-09-19 三端身份合一 · UI 定稿版）
 * 风格：极简白（参考微信/小红书——成熟 APP 的共性是克制）
 *
 * ⚠️ 本文件分两部分，缺一不可：
 *   A. 结构骨架（沿用原始 login.css，页面可用性依赖它，禁止删除）
 *      - .login .box dl/dt/dd 表单两栏布局
 *      - #zeai_yzm 图形验证码弹层（必须初始 display:none）
 *      - #clausebox 协议弹层（必须初始 display:none，否则全文裸露在页面上）
 *      - .forgetpassbox 忘记密码弹层
 *   B. 极简白视觉（配色/圆角/间距/动画）
 * 只被 m/login.php 一个页面引用，安全。
 * 品牌色由 PHP 内联 <style> 注入（head 中后加载，同特异性可覆盖本文件）。
 * ============================================================ */

/* ========== A0. 基础 ========== */
::-webkit-input-placeholder{color:#b9b9c0;font-size:1.45rem}
@keyframes div_leftAnm1 {0% {-webkit-transform: translateX(100vmin);transform: translateX(100vmin)}}
@keyframes div_leftAnm2 {100% {-webkit-transform: translateX(100vmin);transform: translateX(100vmin)}}
*{box-sizing:border-box;-webkit-box-sizing:border-box}
body{
    margin:0;padding:0;background:#fff;min-height:100vh;color:#222;
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;overflow-x:hidden
}

/* ========== B1. 品牌区 ========== */
/* 光斑装饰仅深色版需要——极简白版隐藏（PHP 结构不动，CSS 收起） */
.login_blob{display:none}
.login_hero{position:relative;z-index:1;text-align:center;padding:10rem 0 3.4rem;animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both}
.login_slogan{font-size:1.45rem;color:#9a9a9f;margin:0;letter-spacing:.14em}

/* ========== B2. 面板（极简白不用卡片，内容直接上屏） ========== */
.login_panel{position:relative;z-index:1;margin:0 3.2rem;animation:panelIn .7s cubic-bezier(.2,.7,.2,1) .12s both}

/* ========== B3. 微信主按钮（绿底与图标由 PHP 内联注入） ========== */
#wxlogin_btn{transition:transform .12s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}
#wxlogin_btn:active{transform:scale(.98);opacity:.9}
#wxlogin_btn .ico{color:#fff}

/* ========== B4. 注册说明文案（注册/登录一体化提示） ========== */
.login_note{text-align:center;color:#a9a9b0;font-size:1.3rem;line-height:1.7;margin:1.4rem 0 0}

/* ========== B5. 分隔线 / 折叠触发 ========== */
.login_divider{display:flex;align-items:center;margin:2.6rem 0 1.4rem;color:#b9b9c0;font-size:1.25rem;letter-spacing:.06em}
.login_divider::before,.login_divider::after{content:'';flex:1;height:1px;background:#eee}
.login_divider span{padding:0 1.4rem}
#mobile_login_toggle{
    display:block;text-align:center;color:#8a8a90;font-size:1.4rem;
    padding:.4rem 0;margin:0;
    -webkit-transition:color .15s ease;transition:color .15s ease
}
#mobile_login_toggle:active{color:#555}
/* 折叠区过渡 */
#mobile_login_area{overflow:hidden;padding-top:1.8rem;-webkit-transition:max-height .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease;transition:max-height .35s cubic-bezier(.2,.7,.2,1),opacity .25s ease;max-height:120rem;opacity:1}
#mobile_login_area.collapsed{max-height:0;opacity:0;pointer-events:none}

/* ========== B6. 分段切换 TAB ========== */
.logintab{display:flex;width:100%;margin:0 auto 1.6rem;border-radius:2.6rem;overflow:hidden;background:#f4f4f6;padding:.4rem;box-sizing:border-box;-webkit-box-sizing:border-box}
.logintab span{flex:1;text-align:center;font-size:1.5rem;line-height:4.2rem;color:#8a8a90;border-radius:2.2rem;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}
.logintab span.on{background:#fff;color:#1a1a1a;font-weight:600;box-shadow:0 .2rem .8rem rgba(0,0,0,.08)}

/* ========== A1. 登录表单骨架（原始布局，仅换配色/圆角） ========== */
.login .box dl{width:100%;margin:1.4rem auto 0 auto;height:5.2rem;line-height:5.2rem;text-align:left;overflow:hidden;background-color:#f5f6f8;border-radius:1.3rem}
.login .box dl:first-child{margin-top:0}
.login .box dl dt{width:16%;padding-left:2%;float:left;text-align:center;line-height:2.6rem;margin-top:1.4rem}
.login .box dl dd{width:82%;float:right;position:relative;padding-left:1rem;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}
.login .box dl dt i{display:inline-block;color:#b9b9c0;line-height:2.4rem;font-size:2.2rem;width:2.4rem}
.login .box dl dd input{width:95%;border:0;padding:0;margin:0;font-size:1.6rem;height:3rem;line-height:3rem;box-sizing:border-box;margin-top:1.1rem;background-color:transparent;color:#222}
.login .box dl dd input:-webkit-autofill{-webkit-box-shadow:0 0 0 100rem #f5f6f8 inset !important}
.login .box dl dd span{font-size:2.2rem;color:#b9b9c0;position:absolute;right:2rem;top:.2rem}
#reset,#reset_reg{font-size:2rem;right:2rem;display:none}

/* 验证码行：获取验证码按钮（绝对定位在输入行右侧） */
.login .box dd.yzmF{position:relative}
.login .box dd.yzmF a.yzmbtn{width:9.2rem;display:block;position:absolute;text-align:center;line-height:1.8rem;height:1.8rem;top:1.7rem;right:1.2rem;padding-left:.6rem;border-left:#e5e5ea 1px solid;font-size:1.4rem}
.login .box dd.yzmF a.yzmbtn.disabled{color:#b9b9c0;border-left:0}
.login .box dd.yzmF a.disabled{color:#999;border:0;padding:0;margin:0;font-size:1.2rem}

/* 注册/忘记密码链接行 */
.login .regfindpass{width:100%;margin:1.8rem auto 0 auto}
.login .regfindpass a{font-size:1.4rem;color:#8a8a90}
.login .regfindpass a:first-child{float:left}
.login .regfindpass a:nth-child(2){float:right}
.login .regfindpass a:active{color:#555}

/* 协议勾选行 */
.login .agreebox{margin:2.4rem 0 0;font-size:1.4rem;color:#666;line-height:2rem}

/* 按钮区 */
.login .btns{width:100%;display:block;margin:2.4rem auto 0 auto}
.login .btns .btn{width:100%;margin:0 auto 1.4rem auto;display:block;font-size:1.6rem;font-weight:500;letter-spacing:.2rem;height:4.8rem;line-height:4.8rem;box-sizing:border-box;border-radius:2.4rem}

/* 登录/注册按钮按压态（配色由 PHP 内联注入） */
.login .box button,.forgetpassbox button{transition:transform .12s ease,opacity .15s ease;-webkit-tap-highlight-color:transparent}
.login .box button:active,.forgetpassbox button:active{transform:scale(.985);opacity:.9}

/* ========== B7. 底部协议行 ========== */
.login_footer{position:relative;z-index:1;text-align:center;color:#b9b9c0;font-size:1.2rem;padding:2.8rem 2.4rem 3rem;margin:0;line-height:1.8}
.login_footer a{color:#8a8a90;text-decoration:none;margin:0 .3rem}
.login_footer a:active{color:#555}

/* ========== A2. 图形验证码弹层（必须初始隐藏） ========== */
#zeai_yzm{display:none;position:fixed;height:17rem;top:9rem;width:80%;left:0;right:0;margin:auto;max-width:640px;padding:1.5rem 2rem 1rem 2rem;border-radius:1.2rem;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;background-color:#fff;box-shadow:0 .6rem 2.4rem rgba(0,0,0,.12)}
#zeai_yzm:after{font-family:"www_zeai_cn_iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:'\e6aa';position:absolute;font-size:2rem;bottom:-1.3rem;right:4rem;width:2rem;height:2rem;color:#fff}
#zeai_yzm em,#zeai_yzm span{display:inline-block;vertical-align:middle;font-size:1.3rem}
#zeai_yzm em{margin:0 .5rem 0 0;border-radius:1.5rem;font-size:2.4rem;color:#f00;font-weight:bold;font-style:normal}
#zeai_yzm .text{width:100%;margin:.5rem auto 0 auto;text-align:center;}
#zeai_yzm .text li{width:16%;height:4rem;line-height:4rem;display:inline-block;margin:.5rem 2%;font-size:2rem;color:#000;background-color:#f9f9f9;text-align:center;border-radius:2rem;border:#eee 1px solid;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;list-style:none}
#zeai_yzm .text li:hover{background-color:#eee;cursor:pointer}

/* ========== A3. 忘记密码弹层 ========== */
.forgetpassbox{padding:3rem;background-color:#fff;line-height:200%;font-size:1.6rem;box-sizing:border-box}
.forgetpassbox dl{width:100%;margin:0 auto;height:5.2rem;line-height:5.2rem;text-align:left;background-color:#fff}
.forgetpassbox dl:first-child{margin:.1rem auto}
.forgetpassbox dl dt{width:12%;float:left;text-align:center;line-height:2.6rem;margin-top:1.3rem}
.forgetpassbox dl dd{width:88%;float:right;position:relative;height:5.2rem;border-bottom:#f2f2f4 1px solid}
.forgetpassbox dl dt i{display:inline-block;color:#b9b9c0;width:100%}
.forgetpassbox dl:nth-child(1) dt i{font-size:2.2rem;width:2.2rem;height:2.2rem;line-height:2.2rem}
.forgetpassbox dl:nth-child(2) dt i,.forgetpassbox dl:nth-child(3) dt i{font-size:2rem;width:2rem;height:2.2rem;line-height:2.4rem}
.forgetpassbox dl dd input{width:95%;border:0;padding:0;margin:0;font-size:1.6rem;height:3rem;line-height:3rem;box-sizing:border-box;margin-top:1.1rem;background-color:#fff}
.forgetpassbox dl dd input:-webkit-autofill{-webkit-box-shadow:0 0 0 100rem #ffffff inset !important}
.forgetpassbox button{width:100%;margin-top:2.4rem}
.forgetpassbox dd.yzmF{position:relative}
.forgetpassbox dd.yzmF a.yzmbtn{font-size:1.4rem;width:10rem;display:block;line-height:2.4rem;height:2.4rem;position:absolute;text-align:center;top:1.4rem;right:0;background-color:#fff;border-left:#f2f2f4 1px solid;color:#8a8a90}
.forgetpassbox dd.yzmF a.yzmbtn:hover{color:#8a8a90}
.forgetpassbox dd.yzmF a.yzmbtn font{color:#f00}
.forgetpassbox dd.yzmF a.yzmbtn b{color:#f00;font-weight:normal;margin-right:.2rem}
.forgetpassbox dd.yzmF a.disabled{color:#999;border:0;padding:0;margin:0;font-size:1.2rem}
.forgetpassbox .ok{margin-top:3rem;display:none}
.forgetpassbox .ok h4{display:block}
.forgetpassbox .ok .flag{font-size:6rem;color:#07C160;margin:1rem 0 0}
.forgetpassbox .ok .textok{font-size:1.8rem;font-weight:bold;margin-top:1rem}
.forgetpassbox .ok .title{margin:1rem auto}
.forgetpassbox .ok .title b{color:#f00;font-weight:normal;vertical-align:middle}
.forgetpassbox .ok .title span,.forgetpassbox .ok .title a{vertical-align:middle}
.forgetpassbox .ok .title a{line-height:2rem}

/* ========== A4. 协议全文弹层（display:none 是弹层机制前提，勿删） ========== */
#clausebox{display:none;background:#fff;color:#444}
#clausebox .title{margin-top:2rem;font-size:1.8rem}
#clausebox .C{padding:3rem 2rem;line-height:200%;font-size:1.4rem;text-align:left}
#clausebox .Ugoback{position:fixed;background-color:#fff;color:#333;left:.5rem;top:.5rem}

/* ========== B8. 入场动画 ========== */
@keyframes heroIn{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes logoIn{0%{opacity:0;-webkit-transform:scale(.6) translateY(12px);transform:scale(.6) translateY(12px)}100%{opacity:1;-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}
@keyframes panelIn{from{opacity:0;-webkit-transform:translateY(28px);transform:translateY(28px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.login_hero,.login_panel{animation:none}}