/* AI:opt-2026-06-15-LOGIN-MATURE 登录/注册/找回密码 重塑(成熟/科技/简洁)
   AI:opt-2026-06-15-LOGIN-SOFTCARD 弱化分栏:左右两栏收进一张居中横卡(留白包围+圆角+柔和阴影+柔和中蓝),不再整屏劈分 */

/* ===== 外层:柔和留白背景 + 居中 ===== */
.login-wrapper{
  min-height:100vh;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;
  background:linear-gradient(135deg,#e9f0fa 0%,#f4f7fc 55%,#eaf1fb 100%);
}

/* ===== 居中横卡(把品牌区 + 表单裹成一个整体) ===== */
.login-card{
  display:flex;width:880px;max-width:100%;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 60px rgba(23,54,106,.14);
}

/* ===== 左侧品牌区(柔和中蓝,卡内左半) ===== */
.login-brand{
  flex:0 0 44%;position:relative;overflow:hidden;color:#fff;
  display:flex;align-items:center;padding:52px 44px;
  background:linear-gradient(150deg,#3461a6 0%,#4a85cf 55%,#62a0e4 100%);
}
.login-brand::before{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(circle at 28% 36%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 28% 36%,#000,transparent 78%);
}
.login-brand::after{
  content:"";position:absolute;width:420px;height:420px;right:-150px;bottom:-160px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);
}
.login-brand-inner{position:relative;z-index:2;}
.login-brand-logo{display:flex;align-items:center;gap:13px;margin-bottom:34px;}
.login-brand-mark{
  width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);
}
.login-brand-mark svg{width:25px;height:25px;display:block;}
.login-brand-name{font-size:23px;font-weight:700;letter-spacing:2px;}
.login-brand-title{font-size:29px;font-weight:700;line-height:1.3;margin:0 0 14px;letter-spacing:.5px;}
.login-brand-slogan{font-size:14px;line-height:1.7;color:rgba(255,255,255,.85);margin:0 0 30px;}
.login-brand-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.login-brand-feats li{display:flex;align-items:center;gap:11px;font-size:13.5px;color:rgba(255,255,255,.92);}
.login-brand-feats svg{width:19px;height:19px;flex:0 0 auto;color:#d6ecff;}

/* ===== 右侧表单区(卡内右半,纯白无独立边框) ===== */
.login-form{
  flex:1 1 auto;min-width:0;background:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:44px 44px 36px;box-sizing:border-box;
}
.login-form h4{
  margin:0;padding:0;text-align:center;
  font-size:23px;font-weight:700;color:#1f2329;letter-spacing:.5px;
}
.login-subtitle{text-align:center;color:#8a909c;font-size:13px;margin:8px 0 22px;line-height:1.6;}

/* ===== Tabs ===== */
.login-tabs{display:flex;gap:6px;margin:16px 0 22px;justify-content:center;}
.login-tab{
  position:relative;height:38px;line-height:38px;padding:0 6px;
  font-size:15px;color:#8a909c;cursor:pointer;transition:color .2s;
}
.login-tab::after{
  content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;
  background:var(--c-primary);transform:translateX(-50%);transition:width .25s;
}
.login-tab:hover{color:var(--c-primary);}
.login-tabs[data-active="passwd"] .login-tab[data-key="passwd"],
.login-tabs[data-active="sms"] .login-tab[data-key="sms"],
.login-tabs[data-active="wechat"] .login-tab[data-key="wechat"],
.login-tabs[data-active="phone"] .login-tab[data-key="phone"],
.login-tabs[data-active="email"] .login-tab[data-key="email"]{
  color:#1f2329;font-size:16px;font-weight:600;
}
.login-tabs[data-active="passwd"] .login-tab[data-key="passwd"]::after,
.login-tabs[data-active="sms"] .login-tab[data-key="sms"]::after,
.login-tabs[data-active="wechat"] .login-tab[data-key="wechat"]::after,
.login-tabs[data-active="phone"] .login-tab[data-key="phone"]::after,
.login-tabs[data-active="email"] .login-tab[data-key="email"]::after{width:60%;}

/* ===== 输入框 ===== */
.login-form .byg-form-item{margin-bottom:16px;}
.login-form .byg-input{
  height:46px;border-radius:10px;border:1px solid #e5e8ed;background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.login-form .byg-input:hover{border-color:#b9c2cf;}
.login-form .byg-input:focus-within{border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(29,148,255,.12);}
.login-form .byg-input > input{font-size:14px;color:#1f2329;}
.login-form .byg-input-prefix{display:flex;align-items:center;color:#9aa3af;transition:color .2s;}
.login-form .byg-input-prefix svg{width:18px;height:18px;display:block;}
.login-form .byg-input:focus-within .byg-input-prefix{color:var(--c-primary);}
.login-form .byg-input-suffix{display:flex;align-items:center;color:#9aa3af;cursor:pointer;transition:color .2s;}
.login-form .byg-input-suffix svg{width:18px;height:18px;display:block;}
.login-form .byg-input-suffix:hover{color:var(--c-primary);}

.login-input-group{display:flex;align-items:center;gap:10px;}
.login-input-group .byg-input{flex:1;}
.login-captcha{
  min-width:116px;height:46px;padding:0 14px;border-radius:10px;white-space:nowrap;
  font-size:13px;font-weight:500;border:1px solid var(--c-primary);
  color:var(--c-primary);background:#eef6ff;transition:all .2s;
}
.login-captcha:hover:not(:disabled){background:var(--c-primary);color:#fff;}
.login-captcha:disabled{border-color:#e5e8ed;color:#b3b8c2;background:#f4f5f7;cursor:not-allowed;}

.login-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13px;}
.login-link{color:var(--c-primary);}
.login-link:hover{text-decoration:underline;}

/* ===== 主按钮(页面唯一主 CTA,实底为行业惯例例外)===== */
.login-form .byg-btn-primary{
  height:46px;border-radius:10px;font-weight:600;font-size:15px;letter-spacing:2px;border:none;
  background:linear-gradient(135deg,#1565c0 0%,#1d94ff 100%);
  box-shadow:0 6px 16px rgba(21,101,192,.24);transition:all .25s;
}
.login-form .byg-btn-primary:hover{box-shadow:0 8px 22px rgba(21,101,192,.32);transform:translateY(-1px);}
.login-form .byg-btn-primary:active{transform:translateY(0);}
.login-form .byg-btn-primary:disabled{transform:none;opacity:.7;box-shadow:none;}

.login-register{text-align:center;margin-top:16px;font-size:14px;color:#8a909c;}
.login-agreement{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:2px;margin-top:16px;font-size:13px;color:#8a909c;
}
.login-agreement .byg-checkbox{margin-right:2px;}
.login-agreement .login-link{font-size:13px;}

/* ===== 微信扫码 ===== */
.wechat-login-area{padding:8px 0 4px;min-height:248px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.qr-wrapper{
  width:196px;height:196px;padding:14px;background:#fff;border-radius:14px;
  box-shadow:0 2px 16px rgba(7,193,96,.12);margin-bottom:18px;border:1px solid #e8f8f0;
}
.qr-loading{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fffe,#f0fdf9);border-radius:8px;}
.qr-loading p{margin-top:12px;font-size:13px;color:#07c160;}
.qr-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fafafa;border-radius:8px;overflow:hidden;}
.qr-image{width:100%;height:100%;display:block;}
.qr-hint{display:flex;align-items:center;gap:8px;color:#646a73;font-size:14px;}
.qr-hint svg{width:20px;height:20px;color:#07c160;}

/* ===== 版权(卡片下方) ===== */
.login-copyright{margin-top:22px;color:#9aa3b3;text-align:center;font-size:12px;letter-spacing:.5px;}

/* ===== 响应式:窄屏品牌区隐藏,卡片仅表单 ===== */
@media (max-width:820px){
  .login-card{width:420px;}
  .login-brand{display:none;}
}
@media (max-width:480px){
  .login-card{box-shadow:0 10px 36px rgba(23,54,106,.12);}
  .login-form{padding:34px 24px 26px;}
}