.mdl{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;
}

.mdl[hidden]{display:none;}

.mdl-mask{position:absolute;inset:0;background:rgba(17,23,38,.46);}
.mdl-box{
  position:relative;z-index:1;width:100%;max-width:860px;max-height:calc(100vh - 48px);
  overflow:auto;overscroll-behavior:contain;background:#fff;
  border-radius:12px;box-shadow:0 20px 52px rgba(14,22,42,.24);
  
  padding:0;
}

.mdl:not([hidden]) .mdl-mask{animation:mdlMask .22s ease;}
.mdl:not([hidden]) .mdl-box{animation:mdlBox .22s cubic-bezier(.2,.8,.3,1);}
@keyframes mdlMask{from{opacity:0}}
@keyframes mdlBox{from{opacity:0;transform:translateY(12px) scale(.99)}}

.mdl.out .mdl-mask{opacity:0;transition:opacity .14s linear;}
.mdl.out .mdl-box{opacity:0;transform:translateY(6px);transition:opacity .14s linear,transform .14s linear;}

/* scrollbar-gutter 已保留槽位，锁定滚动时无需补偿 body 宽度。 */
html.mdl-open{overflow:hidden;}

.mdl-x{
  position:absolute;top:20px;right:20px;z-index:2;width:32px;height:32px;border-radius:var(--r-s);
  display:grid;place-items:center;color:var(--ink3);background:none;border:0;cursor:pointer;transition:.15s;
}
.mdl-x:hover{background:var(--bg2);color:var(--ink);}
.mdl-x svg{width:15px;height:15px;}

@media (prefers-reduced-motion:reduce){
  .mdl:not([hidden]) .mdl-mask,.mdl:not([hidden]) .mdl-box{animation:none;}
}

.abody{display:grid;grid-template-columns:minmax(0,1fr) 414px;align-items:stretch;}
.abody.no-wechat{grid-template-columns:minmax(0,1fr);}
.mdl-box.no-wechat{max-width:460px;}
a[data-reg-link][hidden] + i{display:none;}
.amain{min-width:0;padding:42px 48px 32px;}

.ahead{display:flex;align-items:center;gap:9px;margin-bottom:18px;}
.ahead .logo-mk{
  width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:17px;font-weight:700;
}
.ahead .logo-img{width:30px;height:30px;border-radius:8px;flex:none;object-fit:contain;display:block;}
.ahead .logo-tx strong{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.15;}
.ahead .logo-tx span{display:block;font-size:11.5px;color:var(--ink4);letter-spacing:.06em;line-height:1.3;}
.atitle{font-size:23px;letter-spacing:-.022em;line-height:1.35;margin:18px 0 16px;}

.aqr[hidden]{display:none;}
.aqr{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:42px 20px;background:var(--bg2);border-left:1px solid var(--line);
  
  border-radius:0 12px 12px 0;
}
.aqr-box{
  width:230px;height:230px;padding:34px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--sh);
  display:grid;place-items:center;
}
.aqr-box svg{width:100%;height:100%;display:block;}
.aqr b{font-size:15.5px;margin-top:17px;}
.aqr p{font-size:13.5px;color:var(--ink3);margin-top:6px;line-height:1.62;}

.authroot[data-mode="reg"],.authroot[data-mode="find"]{max-width:460px;}
.authroot[data-mode="reg"] .abody,
.authroot[data-mode="find"] .abody{grid-template-columns:minmax(0,1fr);}
.authroot[data-mode="reg"] .aqr,
.authroot[data-mode="find"] .aqr{display:none;}

.apanel[hidden]{display:none;}
.apanel>.ph{font-size:14.5px;color:var(--ink3);line-height:1.72;margin-bottom:16px;}

.apanel[data-pane="login"] .asub{margin-top:-12px;}
.asub{display:flex;gap:26px;border-bottom:1px solid var(--line);}
.asub button{
  position:relative;height:42px;font-size:16px;font-weight:600;color:var(--ink3);
  font-family:inherit;background:none;border:0;cursor:pointer;transition:color .15s;
}
.asub button:hover{color:var(--ink2);}
.asub button.on{color:var(--brand);}
.asub button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brand);}
.asubpane{padding-top:18px;}
.asubpane[hidden]{display:none;}

.afld{margin-bottom:18px;}
.ain{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 13px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.15s;
}
.ain:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg);}
.ain.bad{border-color:var(--red);box-shadow:none;}
.ain .ai{width:15px;height:15px;flex:none;color:var(--ink4);transition:color .15s;}
.ain:focus-within .ai{color:var(--brand);}
.ain .apre{flex:none;font-size:15px;color:var(--ink2);padding-right:8px;border-right:1px solid var(--line);}
.ain input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15.5px;background:none;color:var(--ink);}
.ain input::placeholder{color:var(--ink4);}
.ain input::-ms-reveal,.ain input::-ms-clear{display:none;}

.aeye{
  flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:4px;
  /* 清除原生按钮内边距，避免 15px 图标溢出内容区后向右偏移 */
  padding:0;
  align-self:center;
  background:none;color:var(--ink4);cursor:pointer;transition:.15s;
}
.aeye:hover{color:var(--brand);background:var(--brand-bg);}
.aeye:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.aeye.on{color:var(--brand);}
.aeye svg{width:15px;height:15px;}

.ain .code-btn{
  flex:none;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-s);
  background:#fff;font-family:inherit;font-size:14px;color:var(--brand);cursor:pointer;transition:.15s;
}
.ain .code-btn:hover:not(:disabled){border-color:var(--brand-line);background:var(--brand-bg);}
.ain .code-btn:disabled{color:var(--ink4);cursor:not-allowed;}

.aerr{display:none;font-size:14px;color:var(--red);margin-top:6px;line-height:1.5;}
.aerr.on{display:block;}

.arow2{display:grid;grid-template-columns:minmax(0,1fr) 108px;gap:10px;}
.acap{
  width:108px;height:44px;padding:0;border:1px solid var(--line);border-radius:var(--r);
  background:#F3F6FB;overflow:hidden;line-height:0;cursor:pointer;transition:.15s;
}
.acap:hover{border-color:var(--brand-line);}
.acap svg{width:100%;height:100%;display:block;}
/* 嵌在输入框内的验证码需留出上下间距，避免聚焦边框紧贴图片。 */
.ain .acap{flex:0 0 108px;height:32px;align-self:center;border-radius:var(--r-s);}

.adone{
  padding:11px 13px;margin-bottom:16px;background:#E9F8F1;border:1px solid #B7E4CE;
  border-radius:var(--r);font-size:14.5px;color:#0E8A57;line-height:1.68;
}
.adone b{color:#0A6B44;}
.adone.warn{background:#FFF3EC;border-color:#FFD5BC;color:#C4521D;}
.adone.warn b{color:#A8431A;}

.abtn{
  width:100%;height:48px;margin-top:14px;border:0;border-radius:var(--r);
  background:var(--brand);color:#fff;font-family:inherit;font-size:17px;font-weight:600;
  letter-spacing:.02em;cursor:pointer;transition:.15s;
}
.abtn:hover{background:var(--brand-d);}
.abtn[disabled]{background:var(--brand-line);cursor:not-allowed;}

.aterm{font-size:13.5px;color:var(--ink3);line-height:1.62;margin-top:14px;}
.aterm a{color:var(--brand);}
.aterm a:hover{text-decoration:underline;}

.aagree{margin:16px 0 4px;font-size:14.5px;color:var(--ink2);line-height:1.62;cursor:pointer;}
.aagree input{width:15px;height:15px;margin:0 9px 0 0;vertical-align:-3px;accent-color:var(--brand);cursor:pointer;}
.aagree a{color:var(--brand);}
.aagree a:hover{text-decoration:underline;}

.afoot{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;font-size:14.5px;color:var(--ink3);}
.afoot a{color:var(--brand);}
.afoot a:hover{text-decoration:underline;}
.afoot i{width:1px;height:11px;background:var(--line);}

.apwr{display:flex;gap:5px;margin-top:8px;}
.apwr i{flex:1;height:3px;border-radius:2px;background:var(--line);transition:background .2s;}
.apwr.s1 i:nth-child(1){background:var(--red);}
.apwr.s2 i:nth-child(-n+2){background:var(--gold);}
.apwr.s3 i{background:var(--green);}

@media (max-width:900px){
  .mdl{padding:16px;}
  .mdl-box{max-width:460px;}
  
  .abody{grid-template-columns:minmax(0,1fr);}
  .aqr{display:none;}
}
@media (max-width:640px){
  .mdl{padding:12px;}
  
  .mdl-box{max-height:calc(100vh - 24px);border-radius:10px;}
  .amain{padding:22px 18px 20px;}
  .atitle{font-size:21px;}
  .asub{gap:20px;}
}