body.login {
  --loginwacht-primary: #E00C1C;
  --loginwacht-primary-hover: #8A0711;
  --loginwacht-bg: #e2e2e3;
  --loginwacht-border: #a0a0a0;
  --loginwacht-card: #ffffff;
  --loginwacht-text: #111827;
  --loginwacht-muted: #6b7280;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(224, 12, 28, 0.18), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(138, 7, 17, 0.18), transparent 55%),
    linear-gradient(180deg, var(--loginwacht-bg-start, #f2f2f3) 0%, var(--loginwacht-bg-end, #e2e2e3) 70%);
  color: var(--loginwacht-text);
  position: relative;
}

body.login::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 620px at 50% 5%, rgba(17, 24, 39, 0.08), transparent 70%),
    radial-gradient(900px 700px at 50% -20%, rgba(224, 12, 28, 0.20), transparent 65%),
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 14px);
  opacity: 0.5;
}

body.login::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 680px at 50% 8%, rgba(17, 24, 39, 0.12), transparent 70%),
    radial-gradient(700px 700px at 50% -10%, rgba(224, 12, 28, 0.20), transparent 65%);
  mix-blend-mode: multiply;
}

body.login #login {
  width: 360px;
  padding: 28px 0 0;
}

@media (max-width: 480px) {
  body.login #login {
    width: 92%;
  }
}

body.login #login h1 a {
  background-image: var(--loginwacht-logo);
  background-size: contain;
  background-position: center;
  width: 220px;
  height: 80px;
  margin: 0 auto 12px;
  pointer-events: none;
  cursor: default;
}

body.login .login-message,
body.login .message,
body.login #login_error,
body.login .success {
  border-radius: 10px;
}

body.login .login-message {
  margin-bottom: 6px;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
  background: var(--loginwacht-card);
  border: 1px solid var(--loginwacht-border);
  border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
  padding: 26px 26px 22px;
}

body.login #loginform .input,
body.login #registerform .input,
body.login #lostpasswordform .input {
  border-radius: 10px;
  border-color: #c7c7c7;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.login .button-primary {
  background: var(--loginwacht-primary);
  border-color: var(--loginwacht-primary);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  text-shadow: none;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
  background: var(--loginwacht-primary-hover);
  border-color: var(--loginwacht-primary-hover);
}

body.login #nav,
body.login #backtoblog {
  text-align: center;
}

.loginwacht-login-badge {
  margin: 0 auto 10px;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(224, 12, 28, 0.12);
  color: var(--loginwacht-primary-hover);
  font-weight: 600;
  font-size: 12px;
}

.loginwacht-login-badge img {
  width: 16px;
  height: 16px;
  display: block;
}

body.login details.loginwacht-helper {
  margin-top: 6px;
  margin-bottom: 10px;
}

body.login details.loginwacht-helper summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--loginwacht-muted);
  list-style: none;
}

body.login details.loginwacht-helper summary::-webkit-details-marker {
  display: none;
}

body.login details.loginwacht-helper summary::after {
  content: '\25BE';
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  transform: translateY(-1px);
}

body.login details.loginwacht-helper[open] summary::after {
  content: '\25B4';
}

body.login details.loginwacht-helper span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--loginwacht-muted);
}

body.login .loginwacht-2fa-field {
  margin-bottom: 14px;
}

body.login .loginwacht-2fa-note {
  display: block;
  margin: 4px 0 6px;
}

body.login .loginwacht-2fa-title {
  font-size: 12px;
  color: var(--loginwacht-muted);
}

body.login .loginwacht-2fa-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.login .loginwacht-2fa-label-text {
  font-weight: 600;
}

body.login .loginwacht-2fa-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5f2b2f;
  background: rgba(224, 12, 28, 0.12);
  border: 1px solid rgba(224, 12, 28, 0.22);
}


body.login #loginform .input::placeholder {
  font-size: 11px;
  color: #9ca3af;
}

body.login #login::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  width: 260px;
  height: 320px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(224, 12, 28, 0.12), rgba(17, 24, 39, 0.10));
  clip-path: polygon(50% 0%, 92% 14%, 100% 44%, 50% 100%, 0% 44%, 8% 14%);
  z-index: 0;
  opacity: 0.5;
}

body.login #login {
  position: relative;
}

body.login #login > * {
  position: relative;
  z-index: 1;
}


body.login.loginwacht-links-plain #nav a,
body.login.loginwacht-links-plain #backtoblog a,
body.login.loginwacht-links-plain #privacy-policy-page-link a {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}


body.login.loginwacht-hide-links #nav,
body.login.loginwacht-hide-links #backtoblog,
body.login.loginwacht-hide-links #privacy-policy-page-link {
  display: none !important;
}