*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
  background:#eef4fb;
  background-image:
    radial-gradient(circle at 14% 74%, rgba(59,130,246,.12) 0%, transparent 32%),
    radial-gradient(circle at 84% 16%, rgba(37,99,235,.12) 0%, transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(31,53,90,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,53,90,.045) 1px, transparent 1px);
  background-size:46px 46px;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(29,36,64,.05) 0%, rgba(29,36,64,0) 24%),
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%);
}
#login-wrap{position:relative;z-index:1;width:100%;max-width:400px}

.login-card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(195,208,227,.9);
  border-radius:20px;
  padding:46px 42px 40px;
  box-shadow:0 28px 64px rgba(31,53,90,.16), 0 1px 0 rgba(255,255,255,.75) inset;
  backdrop-filter:blur(14px);
  animation:cardIn .45s cubic-bezier(.34,1.35,.64,1);
}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:none}}

.login-logo{
  text-align:center;margin-bottom:20px;
  background:linear-gradient(180deg,#fff 0%,#f6f9ff 100%);
  border:1px solid #d8e3f3;
  border-radius:14px;
  padding:12px 16px;
  display:inline-block;
  width:100%;
  box-shadow:0 10px 26px rgba(31,53,90,.12);
}
.login-logo img{
  height:64px;width:auto;object-fit:contain;display:block;margin:0 auto;
}

.login-title{
  text-align:center;font-size:23px;font-weight:800;
  color:#1f355a;letter-spacing:-.025em;margin-bottom:4px;margin-top:18px;
}
.login-sub{
  text-align:center;font-size:11px;color:#70819c;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:30px;
}

.login-err{
  background:#eff6ff;border:1px solid #bfdbfe;
  color:#3b82f6;font-size:12.5px;font-weight:600;
  padding:0 13px;border-radius:9px;margin-bottom:16px;
  text-align:center;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .25s, max-height .3s, padding .3s;
  line-height: 1.5;
}
.login-err.show{opacity:1;max-height:200px;padding:12px 13px}
.login-err.locked{
  background:#fff7e8;
  border-color:#f2d598;
  color:#8a5a00;
  box-shadow:0 10px 30px rgba(180,128,26,.18);
}

.field-group{margin-bottom:14px}
.field-group label{
  display:block;font-size:10.5px;font-weight:700;
  color:#60708b;text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px;
}
.field-group input{
  width:100%;padding:12px 14px;
  background:#f8fbff;
  border:1.5px solid #d7e2f0;
  border-radius:10px;font-size:14px;font-family:inherit;
  color:#1f355a;outline:none;transition:.2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.field-group input::placeholder{color:#93a2ba}
.field-group input:focus{
  border-color:#3b82f6;background:#fff;
  box-shadow:0 0 0 4px rgba(59,130,246,.14);
}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-eye{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:#7d8ea8;display:flex;align-items:center;
  padding:2px;transition:color .15s;
}
.pw-eye:hover{color:#35598c}

.btn-signin{
  width:100%;padding:14px;margin-top:10px;
  background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);
  color:#fff;border:none;border-radius:10px;
  font-size:15px;font-weight:700;font-family:inherit;
  cursor:pointer;letter-spacing:.01em;transition:.2s;
}
.btn-signin:hover{
  background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%);
  box-shadow:0 12px 28px rgba(59,130,246,.24);transform:translateY(-1px);
}
.btn-signin:active{transform:none;box-shadow:none}
@media(max-width:440px){.login-card{padding:34px 22px 28px}}