*{box-sizing:border-box}
body.auth-page{
  margin:0;min-height:100vh;
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",sans-serif;
  color:#1f2533;
  background:
    radial-gradient(620px 420px at 12% 12%, rgba(176,196,255,.45), transparent 62%),
    radial-gradient(560px 420px at 88% 8%, rgba(255,206,224,.35), transparent 62%),
    radial-gradient(700px 500px at 50% 100%, rgba(198,222,255,.42), transparent 66%),
    #f4f7fd;
}
.auth-page-inner{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 18px;gap:18px}
.auth-card{
  width:100%;max-width:352px;background:#fff;border-radius:16px;
  box-shadow:0 18px 50px rgba(64,86,140,.14),0 2px 8px rgba(64,86,140,.06);
  padding:26px 26px 22px;
}
.auth-title{font-size:17px;font-weight:800;text-align:center;color:#17213a;margin:0 0 6px;letter-spacing:.01em}
.auth-sub{text-align:center;font-size:11.5px;color:#8a93a6;margin:0 0 18px}
.auth-tabs{display:flex;background:#f1f3f8;border-radius:9px;padding:3px;margin-bottom:18px}
.auth-tab{flex:1;text-align:center;padding:7px 0;border-radius:7px;font-size:12.5px;color:#6b7488;font-weight:600;transition:.18s}
.auth-tab.active{background:linear-gradient(135deg,#4d7dff,#6a97ff);color:#fff;box-shadow:0 4px 12px rgba(77,125,255,.28)}
.auth-form{display:flex;flex-direction:column}
.auth-label{font-size:12px;color:#3d475c;margin:0 0 6px;font-weight:600}
.auth-input{position:relative;display:flex;align-items:center}
.auth-input svg{position:absolute;left:11px;width:15px;height:15px;color:#a9b3c6;pointer-events:none}
.auth-input input{
  width:100%;height:38px;padding:0 12px 0 33px;border-radius:8px;border:1px solid #e3e7f0;
  background:#fff;font-size:12.5px;color:#1f2533;outline:none;transition:.16s;
}
.auth-input input::placeholder{color:#b3bbc9}
.auth-input input:focus{border-color:#7ba0ff;box-shadow:0 0 0 3px rgba(77,125,255,.1)}
.auth-form .auth-input{margin-bottom:12px}
.auth-captcha{display:flex;gap:8px;align-items:stretch;margin-bottom:4px}
.auth-captcha .auth-input{flex:1;margin-bottom:0}
.auth-captcha-img{width:104px;height:38px;border-radius:8px;border:1px solid #e3e7f0;object-fit:cover;cursor:pointer;background:#f7f9ff}
.auth-error{font-size:11px;color:#e2534f;margin:-6px 0 10px}
.auth-submit{
  height:40px;border:none;border-radius:9px;margin-top:6px;cursor:pointer;
  background:linear-gradient(135deg,#4d7dff,#6a97ff);color:#fff;font-size:13.5px;font-weight:700;
  box-shadow:0 10px 22px rgba(77,125,255,.28);transition:.18s;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(77,125,255,.34)}
.auth-links{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:11.5px}
.auth-links a{display:inline-flex;align-items:center;gap:4px;color:#5b8def}
.auth-links svg{width:13px;height:13px}
.auth-links a:hover{color:#2f6be0}
.auth-divider{position:relative;text-align:center;margin:20px 0 14px;color:#b0b8c6;font-size:11px}
.auth-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#eef1f6}
.auth-divider span{position:relative;background:#fff;padding:0 10px}
.auth-social{display:flex;justify-content:center;gap:16px}
.social-btn{width:38px;height:38px;border-radius:50%;border:1px solid #eef1f6;background:#f4f8ff;display:grid;place-items:center;cursor:pointer;transition:.16s}
.social-btn svg{width:19px;height:19px}
.social-btn.wechat{color:#22b573}
.social-btn.qq{color:#12b7f5}
.social-btn.apple{color:#2f7dfa}
.social-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(64,86,140,.12)}
.auth-agree{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:#8a93a6;margin:2px 0 10px;line-height:1.5}
.auth-agree input{margin-top:2px}
.auth-copyright{font-size:11px;color:#9aa4b8}
@media (max-width:420px){
  .auth-card{padding:22px 18px 18px}
}