*{box-sizing:border-box}
html,body{min-height:100%}
body.user-login-page{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  color:#1f2937;
  background:
    radial-gradient(circle at 16% 18%,rgba(88,189,255,.28),transparent 28%),
    radial-gradient(circle at 86% 82%,rgba(72,116,255,.24),transparent 30%),
    linear-gradient(135deg,#0e2c61 0%,#1760b8 52%,#1a9ec4 100%);
  background-attachment:fixed;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",Arial,sans-serif;
}
.user-login-shell{
  width:100%;
  max-width:390px;
  padding:32px;
  border:1px solid #e4eaf1;
  border-radius:14px;
  background:#fff;
  box-shadow:0 16px 48px rgba(38,58,88,.12);
}
.user-login-form{display:grid;gap:18px}
.user-login-field{display:block}
.user-login-field span{
  display:block;
  margin-bottom:8px;
  color:#475569;
  font-size:13px;
  font-weight:600;
}
.user-login-field input{
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid #d8e0e9;
  border-radius:8px;
  outline:none;
  color:#1f2937;
  background:#f9fbfd;
  font:inherit;
  font-size:14px;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.user-login-field input::placeholder{color:#9aa7b6}
.user-login-field input:focus{
  border-color:#3276e8;
  background:#fff;
  box-shadow:0 0 0 4px rgba(50,118,232,.1);
}
.user-login-submit{
  width:100%;
  height:48px;
  margin-top:4px;
  border:0;
  border-radius:8px;
  color:#fff;
  background:#2563eb;
  cursor:pointer;
  font:inherit;
  font-size:15px;
  font-weight:600;
  transition:background .18s,transform .18s;
}
.user-login-submit:hover{background:#1d4ed8}
.user-login-submit:active{transform:translateY(1px)}
.user-login-error{
  padding:10px 12px;
  border:1px solid #fecaca;
  border-radius:8px;
  color:#b42318;
  background:#fff1f0;
  font-size:13px;
  line-height:1.5;
}
@media(max-width:480px){
  body.user-login-page{padding:16px}
  .user-login-shell{padding:24px 20px;border-radius:12px}
}