body.login{
  background: radial-gradient(circle at top, #243b8a 0%, #0b1220 55%, #070b14 100%);
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}

body.login:before{
  content:"";
  position: fixed;
  inset: -40%;
  background:
    radial-gradient(circle at 30% 20%, rgba(79, 70, 229, .35), transparent 55%),
    radial-gradient(circle at 70% 40%, rgba(14, 165, 233, .28), transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(34, 197, 94, .10), transparent 55%);
  filter: blur(28px);
  z-index: 0;
  pointer-events:none;
}

#login{
  position: relative;
  z-index: 2;
  width: 380px;
  padding: 30px 28px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}

#login:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(79,70,229,.65),
    rgba(14,165,233,.55),
    rgba(34,197,94,.25)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity: .75;
}

body.login #login h1{
  margin: 0 0 16px;
  text-align:center;
}

body.login #login h1 a{
  width: 230px;
  height: 92px;
  display:block;
  margin: 0 auto;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  text-indent: -9999px;
  overflow: hidden;
}

.login form{
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin-top: 6px;
}

.login label{
  color: rgba(255,255,255,0.88);
  font-weight: 600;
}

.login input[type="text"],
.login input[type="password"]{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(10,14,28,0.45);
  color: #fff;
  padding: 12px 14px;
  margin-top: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  transition: all .18s ease;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus{
  outline: none;
  border-color: rgba(14,165,233,.95);
  box-shadow: 0 0 0 4px rgba(14,165,233,.18), 0 14px 28px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

body.login .wp-pwd{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
body.login .wp-pwd input#user_pass{ flex: 1 1 auto !important; margin:0 !important; }
body.login .wp-pwd button.button.wp-hide-pw{
  width:44px !important; height:44px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  background: rgba(10,14,28,0.55) !important;
  color:#fff !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important; padding:0 !important;
}

.wp-core-ui .button-primary{
  width: 100%;
  height: 44px;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 18px 40px rgba(14,165,233,.20), 0 10px 22px rgba(0,0,0,.28);
  transition: all .18s ease;
}

.wp-core-ui .button-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(79,70,229,.18), 0 22px 52px rgba(14,165,233,.25), 0 12px 26px rgba(0,0,0,.32);
}

.login #nav a, .login #backtoblog a{
  color: rgba(255,255,255,0.70);
  text-decoration:none;
}
.login #nav a:hover, .login #backtoblog a:hover{
  color: rgba(14,165,233,0.95);
  text-decoration: underline;
}