body.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    radial-gradient(70% 60% at 15% 0%, rgba(243,121,101,.28), transparent 60%),
    radial-gradient(70% 60% at 100% 10%, rgba(44,59,119,.30), transparent 60%),
    #0F111E;
  color: #F3F4FA;
}
.login-card {
  width: min(420px, 100%); background: rgba(21,24,41,.86); border: 1px solid #262B44; border-radius: 22px;
  padding: 36px 32px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45); backdrop-filter: blur(20px);
}
.login-card .mark { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #F37965, #C8506B); display: grid; place-items: center; }
.login-card .mark svg { width: 26px; height: 26px; }
.login-card h1 { font-family: var(--display); font-size: 32px; margin: 16px 0 6px; letter-spacing: -0.02em; }
.lede { color: #C9CCDC; margin: 0 0 22px; }
.wide { width: 100%; height: 48px; font-size: 17px; margin-bottom: 10px; }
.btn.google { background: #fff; color: #1F1F1F; }
.btn.google:hover { background: #F1F2F6; }
.fine { font-size: 13px; color: #9599AF; margin: 10px 0 0; }
.fine a { color: #C9CCDC; }
.fine.bottom { margin-top: 26px; text-align: center; }
.link { background: none; border: 0; color: #FF9A87; font-size: 15px; padding: 6px 0; font-weight: 600; }
.error { color: #FF9A87; background: rgba(243,121,101,.12); padding: 12px 14px; border-radius: 10px; font-size: 15px; margin: 14px 0 0; }
.login .input { background: #0F111E; border-color: #333957; color: #F3F4FA; }
.login .field { margin: 14px 0 12px; }
.login .field label { color: #9599AF; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; font-family: var(--mono); font-size: 17px; background: #0F111E; padding: 16px; border-radius: 12px; margin: 0 0 16px; letter-spacing: .02em; }
.btn:not(.primary):not(.google) { background: rgba(255,255,255,.08); color: #F3F4FA; }

#privacy { width: min(680px, 100%); }
#privacy h2.label { color: #C9CCDC; margin: 24px 0 6px; }