*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,#fff0f2 0%,#f7f7f8 45%,#f7f7f8 100%);
  color:#17171a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.auth-card{
  width:min(400px,100%);background:#fff;border:1px solid #ececf0;border-radius:20px;
  padding:32px 30px;box-shadow:0 20px 60px rgba(20,20,30,.08);
}
.auth-brand{display:flex;align-items:center;gap:9px;margin-bottom:24px}
.auth-logo{
  width:36px;height:36px;border-radius:12px;background:#fff0f2;color:#ff2e4d;
  display:grid;place-items:center;font-size:18px;flex:0 0 36px;
}
.auth-brand b{font-size:15px;font-weight:650}
h1{font-size:21px;margin:0 0 6px;font-weight:650}
.sub{margin:0 0 22px;color:#8b8b93;font-size:13px;line-height:1.6}
label{display:block;font-size:12.5px;color:#6b6b73;margin:0 0 6px}
input{
  width:100%;padding:11px 13px;border:1px solid #e4e4ea;border-radius:11px;font-size:14px;
  outline:0;margin-bottom:14px;background:#fff;color:inherit;transition:.16s;
}
input:focus{border-color:#ffc2cb;box-shadow:0 0 0 3px #fff0f2}
.btn{
  width:100%;padding:11px;border:0;border-radius:11px;background:#ff2e4d;color:#fff;
  font-size:14px;font-weight:650;cursor:pointer;transition:.16s;
}
.btn:hover{filter:brightness(1.04)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.err{background:#fff1f2;color:#e11d48;font-size:12.5px;padding:10px 12px;border-radius:9px;margin-bottom:14px;line-height:1.6}
.ok{background:#ecfdf3;color:#067647;font-size:12.5px;padding:10px 12px;border-radius:9px;margin-bottom:14px;line-height:1.6}
.alt{text-align:center;margin-top:18px;font-size:12.5px;color:#9a9aa2}
.alt a{color:#ff2e4d;text-decoration:none;font-weight:600}
.alt a:hover{text-decoration:underline}
.note{font-size:11.5px;color:#b0b0b8;line-height:1.7;margin:14px 0 0;text-align:center}