body.login-body{
  height:100vh;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background:#050506;
}
.wallpaper{
  position:fixed;inset:-10%;z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(10,132,255,.55), transparent 42%),
    radial-gradient(circle at 85% 15%, rgba(191,90,242,.5), transparent 45%),
    radial-gradient(circle at 75% 85%, rgba(255,55,95,.4), transparent 45%),
    radial-gradient(circle at 20% 85%, rgba(48,209,88,.35), transparent 45%),
    linear-gradient(160deg,#0a0a0d,#050506);
  filter:blur(60px) saturate(140%);
  animation:wallpaper-drift 22s ease-in-out infinite alternate;
}
@keyframes wallpaper-drift{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.08) translate(-2%,2%);}
}
.wallpaper-grain{
  position:fixed;inset:0;z-index:1;opacity:.025;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.login-card{
  position:relative;z-index:2;
  width:min(380px,88vw);
  padding:40px 34px 34px;
  border-radius:28px;
  background:rgba(28,28,30,.55);
  backdrop-filter:blur(40px) saturate(180%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  color:#f5f5f7;
  animation:card-in .7s cubic-bezier(.22,.9,.32,1.04) both;
}
@keyframes card-in{
  from{opacity:0;transform:translateY(18px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.login-card.shake{animation:shake .5s;}
@keyframes shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-6px);}
  40%,60%{transform:translateX(6px);}
}

.login-icon{
  width:64px;height:64px;border-radius:18px;margin:0 auto 20px;
  background:linear-gradient(155deg,#409CFF,#0A84FF);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(10,132,255,.4);
}
.login-icon svg{width:32px;height:32px;color:#fff;}

.login-title{text-align:center;font-size:20px;font-weight:650;letter-spacing:-.01em;margin-bottom:4px;}
.login-sub{text-align:center;font-size:13px;color:rgba(255,255,255,.5);margin-bottom:28px;}

.login-field{margin-bottom:14px;}
.login-field input{
  width:100%;padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:15.5px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.login-field input::placeholder{color:rgba(255,255,255,.38);}
.login-field input:focus{
  outline:none;border-color:#0A84FF;background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(10,132,255,.22);
}

.login-error{
  font-size:12.5px;color:#FF6961;text-align:center;margin:-2px 0 14px;
  height:0;opacity:0;overflow:hidden;transition:all .25s ease;
}
.login-error.show{height:16px;opacity:1;}

.login-btn{
  width:100%;padding:14px;border-radius:13px;background:#0A84FF;color:#fff;
  font-size:15.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .18s cubic-bezier(.22,.9,.32,1.04),background .2s;margin-top:6px;
}
.login-btn:hover{background:#409CFF;}
.login-btn:active{transform:scale(.97);}
.login-btn:disabled{opacity:.55;pointer-events:none;}

.login-foot{text-align:center;margin-top:22px;font-size:11.5px;color:rgba(255,255,255,.32);}