/* New look for login and password reset. Linked from main/templates/login.itt and team/templates/login.itt.
   The pages keep their markup and inline rules; these selectors simply outrank them. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* Owner's call: login shows the actual wallpaper, sharp. Frosted glass is for after sign-in only. */
body.look-login { background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
body.look-login * { font-family: Inter, "Segoe UI", Arial, sans-serif; }
body.look-login .loginbox {
  background: #fff;
  border: 1px solid rgba(16, 24, 40, .12);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(16, 24, 40, .28);
  padding: 24px 32px 28px;
}
body.look-login .loginbox img { display: block; max-width: 100%; height: auto; margin: 0 auto 18px; }
body.look-login label { color: #475467; font-size: 12px; font-weight: 600; }
body.look-login .input input {
  height: 40px;
  margin: 5px auto 14px;
  padding: 8px 12px;
  background: #fff;
  color: #1b2230;
  border: 1px solid #8b94a5;
  border-radius: 8px;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
}
body.look-login .input input:focus-visible { outline: 2px solid #fff; box-shadow: 0 0 0 4px #1b2230; }
body.look-login input.button {
  height: 38px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
body.look-login .button a:not(.backup_codes) { color: #475467; font-size: 12px; font-weight: 600; }
body.look-login .button a:not(.backup_codes):hover { color: #1b2230; text-decoration: underline; }
body.look-login .button a.backup_codes { border-radius: 8px; font-size: 12px; font-weight: 600; }
body.look-login .error { background: #fef3f2; color: #b42318; border-radius: 8px; font-size: 13px; }
body.look-login #remember_device { color: #475467; font-size: 13px; }