body { display: grid; place-items: center; padding: 16px; overflow: hidden; }
body::before, body::after {
  content: ""; position: fixed; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .45; z-index: -1;
}
body::before { background: radial-gradient(circle, #b4233c, transparent 65%); top: -30vmax; left: -20vmax; }
body::after { background: radial-gradient(circle, #0f5132, transparent 65%); bottom: -35vmax; right: -25vmax; }
.login { width: 100%; max-width: 380px; min-width: 0; text-align: center; }
.mark { font-weight: 800; font-size: clamp(34px, 11vw, 52px); letter-spacing: -.035em; line-height: 1.05; }
.sub { color: var(--grey-1); font-size: 17px; margin: 10px 0 40px; }
form { display: grid; gap: 12px; text-align: left; }
input {
  padding: 15px 16px; border-radius: 14px; border: 1px solid var(--glass-line);
  background: rgba(255,255,255,.06); color: var(--white); font-size: 17px; outline: none;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
input::placeholder { color: var(--grey-2); }
input:focus { border-color: rgba(255,255,255,.4); box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
button[type=submit] {
  padding: 15px; border: 0; border-radius: 14px; font-weight: 600; font-size: 17px;
  color: #000; background: var(--white); transition: transform .15s, opacity .15s;
}
button[type=submit]:active { transform: scale(.98); }
button[type=submit]:disabled { opacity: .5; }
#err { min-height: 1.4em; margin: 4px 0 0; color: var(--red); font-size: 15px; text-align: center; }