/* Base layout like the screenshot: large bg image, centered card */
body.login {
  background: var(--km-bg) no-repeat center/cover fixed;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* Center wrapper and remove WP defaults */
body.login #login {
  width: 420px;
  padding: 0;
  margin: 0;
}

/* Card */
body.login #loginform,
body.login .message,
body.login .success,
body.login #lostpasswordform,
body.login #resetpassform {
  background: var(--km-card);
  color: var(--km-text);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 18px 20px 20px;
}

body.login .message, body.login .success { margin-bottom: 14px; }

/* Logo */
body.login h1 a {
  width: 88px;
  height: 88px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto 14px;
  border-radius: 12px;
}

/* Labels & inputs */
body.login label { color: var(--km-text); font-weight: 600; }
body.login input[type="text"],
body.login input[type="password"] {
  background: var(--km-input);
  border: 1px solid var(--km-input-border);
  border-radius: 10px;
  color: var(--km-text);
  padding: 10px 12px;
  box-shadow: none;
}
body.login input:focus {
  outline: 2px solid color-mix(in oklab, var(--km-primary), transparent 70%);
  border-color: transparent;
}

/* Eye button */
.kmoto-eye {
  position: absolute;
  right: 10px;
  top: 35px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  opacity: .65;
}

/* Remember + links row */
body.login .forgetmenot label { color: color-mix(in oklab, var(--km-text), var(--km-muted)); font-weight: 500; }
body.login #nav, body.login #backtoblog a {
  color: var(--km-muted) !important;
}

/* Buttons */
body.login .button-primary {
  background: var(--km-primary);
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  text-shadow: none;
}
body.login .button-primary:hover { filter: brightness(0.95); }
body.login .button-primary:active { transform: translateY(1px); }

/* Make the login box float above the background image crop */
@media (min-width: 768px) {
  body.login #login { margin-left: auto; margin-right: auto; }
}