*{box-sizing:border-box}
body{margin:0;height:100vh;display:flex;align-items:center;justify-content:center;
  font-family:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:radial-gradient(1100px 620px at 18% 0%,#f4f8ff,#dde7f7 60%,#cfdcf1)}
.card{width:360px;background:#fff;border-radius:20px;padding:28px 26px;
  box-shadow:0 30px 60px -30px rgba(20,40,80,.45)}
h1{margin:0 0 4px;font-size:20px;color:#16233a}
p.sub{margin:0 0 18px;font-size:12.5px;color:#7b879c}
label{display:block;font-size:12.5px;color:#54617a;margin:12px 0 6px}
input{width:100%;padding:11px 12px;border:1px solid #dfe7f5;border-radius:12px;font-size:14px;
  outline:none;background:#f8fbff;font-family:inherit}
input:focus{border-color:#9dbcf5;background:#fff}
button{width:100%;margin-top:18px;padding:12px;border:0;border-radius:12px;background:#2f6df6;
  color:#fff;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
button:hover{background:#255ee0}
.msg{margin-top:12px;font-size:12.5px;color:#d64545;min-height:16px}
.foot{margin-top:16px;font-size:12.5px;color:#7b879c;text-align:center}
.foot a{color:#2f6df6;text-decoration:none}
.brand{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.brand i{width:10px;height:10px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}