:root { --blue:#12b7f5; --ink:#26333e; --muted:#8b9aa6; }
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
body {
  display:grid; place-items:center; padding:24px;
  background:
    radial-gradient(600px 420px at 85% -10%, rgba(155,220,247,.55), transparent 65%),
    linear-gradient(160deg,#eef7fc,#eef3f7 55%,#f8fbfd);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif; color:var(--ink);
}
.login-card {
  width:min(360px,100%); padding:34px 26px 26px; text-align:center;
  background:rgba(255,255,255,.94); border:1px solid #fff; border-radius:20px;
  box-shadow:0 18px 50px rgba(34,74,96,.12);
}
.avatar { width:78px; height:78px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 6px 18px rgba(20,90,120,.16); background:#dceaf3; }
h1 { margin:14px 0 5px; font-size:20px; letter-spacing:.04em; }
p { margin:0 0 24px; color:var(--muted); font-size:12px; }
form { display:flex; flex-direction:column; gap:10px; }
input {
  width:100%; height:44px; border:1px solid #dfe8ef; border-radius:9px;
  padding:0 13px; outline:0; font-size:14px; background:#fbfdff; color:var(--ink);
}
input:focus { border-color:#9adcf7; box-shadow:0 0 0 3px rgba(18,183,245,.08); }
button {
  height:44px; border:0; border-radius:9px; background:var(--blue); color:#fff;
  font-size:14px; font-weight:650; cursor:pointer;
}
button:hover { background:#009fe3; }
.error { display:none; color:#d45a5a; font-size:11px; margin-top:2px; }
small { display:block; margin-top:20px; color:#a3b0ba; font-size:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }