:root {
  --jhp-background: #172b36; --jhp-image: none;
  --jhp-shader-primary: #ffa36a; --jhp-shader-secondary: #ffc36c;
  --jhp-shader-highlight: #fff0bf; --jhp-shader-accent: #e97159;
  --jhp-button: #21765b; --jhp-button-text: #fff;
}
*, *::before, *::after { box-sizing: border-box; }
body.login {
  min-height: 100vh; padding: 36px 18px; display: flex; align-items: center; justify-content: center;
  color: #233640; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--jhp-background);
  background-image: var(--jhp-image);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
body.login.jhp-login-shader { background-color: var(--jhp-shader-primary); }
#jhp-theme-shader { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
body.login #login { position: relative; z-index: 1; width: min(100%, 410px); padding: 0; margin: auto; }
body.login #login h1 { margin-bottom: 28px; text-align: left; }
body.login #login h1 a {
  display: inline-flex; align-items: center; width: auto; height: auto; padding: 0; margin: 0;
  overflow: visible; background: none; color: #fff; text-indent: 0; font-size: 22px; font-weight: 680;
  letter-spacing: -.035em; line-height: 1.3; text-decoration: none;
}
body.login #login h1 a:hover { color: #d9f5e9; }
body.login form {
  padding: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 20px;
  background: #fff; box-shadow: 0 24px 70px rgba(4, 18, 26, .22);
}
body.login form .input, body.login input[type="text"], body.login input[type="password"] {
  min-height: 46px; padding: 9px 13px; border: 1px solid #cbd6dc; border-radius: 9px;
  background: #f8fafb; box-shadow: none; font-size: 16px;
}
body.login form .input:focus { border-color: #247960; box-shadow: 0 0 0 3px rgba(36,121,96,.16); }
body.login label { color: #29414b; font-size: 13px; font-weight: 600; }
body.login .button-primary {
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 9px;
  background: var(--jhp-button); color: var(--jhp-button-text); font-size: 14px; font-weight: 650; box-shadow: none;
}
body.login .button-primary:hover, body.login .button-primary:focus { background: var(--jhp-button); color: var(--jhp-button-text); filter: brightness(.9); }
body.login #nav, body.login #backtoblog { padding: 0; margin: 16px 0 0; }
body.login #nav a, body.login #backtoblog a, body.login .privacy-policy-page-link a { color: #fff; text-decoration: none; }
body.login #nav a:hover, body.login #backtoblog a:hover { color: #d9f5e9; text-decoration: underline; }
body.login .message, body.login #login_error { border-radius: 9px; box-shadow: none; }
body.login .privacy-policy-page-link { margin: 18px 0 0; }
body.login .language-switcher { display: none; }
body.login a:focus-visible, body.login button:focus-visible, body.login input:focus-visible { outline: 3px solid #7ccaaa; outline-offset: 3px; }
@media (max-width: 480px) {
  body.login { display: block; padding: 10vh 18px 24px; }
  body.login #login { margin: 0 auto; }
  body.login form { padding: 26px 22px; }
}