:root {
  --cl-bg: #070a10;
  --cl-surface: #0e1520;
  --cl-border: rgba(151, 205, 255, 0.26);
  --cl-text: #edf5ef;
  --cl-muted: #aeb9c6;
  --cl-green: #78b7ff;
  --cl-cyan: #7de7ff;
  --cl-amber: #f2c879;
}

body.login {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(120, 183, 255, 0.18), transparent 28rem),
    linear-gradient(180deg, #070a10 0%, #0a111b 52%, #070a10 100%);
  color: var(--cl-text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body.login::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(120, 183, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 183, 255, 0.032) 1px, transparent 1px);
  background-size: 48px 48px;
}

#login {
  width: min(420px, calc(100% - 32px));
  padding: 7vh 0 0;
  position: relative;
}

.login h1 a {
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0 0 1.25rem;
  background: none;
  color: var(--cl-green);
  font-size: clamp(1.85rem, 9vw, 2.65rem);
  font-weight: 850;
  line-height: 1.05;
  text-indent: 0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 0 0 30px rgba(120, 183, 255, 0.34);
}

.login h1 a::after {
  content: "ACCESS TERMINAL";
  display: block;
  margin-top: 0.55rem;
  color: var(--cl-muted);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.login form {
  border: 1px solid var(--cl-border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(14, 21, 32, 0.96), rgba(7, 11, 18, 0.97));
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
  padding: 1.5rem;
}

.login label {
  color: var(--cl-muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  min-height: 46px;
  border: 1px solid rgba(151, 205, 255, 0.26);
  border-radius: 6px;
  background: #070a10;
  color: var(--cl-text);
  font-size: 1rem;
  box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: var(--cl-green);
  box-shadow: 0 0 0 2px rgba(120, 183, 255, 0.2);
}

.wp-core-ui .button-primary {
  min-height: 42px;
  border: 1px solid rgba(151, 205, 255, 0.42);
  border-radius: 6px;
  background: #10243a;
  color: #ffffff;
  font-weight: 850;
  letter-spacing: 0;
  text-shadow: none;
  box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
  border-color: var(--cl-green);
  background: #143250;
  color: #ffffff;
}

.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link {
  text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
  color: var(--cl-cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
  color: var(--cl-green);
}

.login .message,
.login .notice,
.login #login_error {
  border-left: 4px solid var(--cl-amber);
  border-radius: 6px;
  background: rgba(14, 21, 32, 0.96);
  color: var(--cl-text);
  box-shadow: none;
}

.login #login_error {
  border-left-color: #ff7d7d;
}

.login .forgetmenot label,
.login .language-switcher label {
  color: var(--cl-muted);
}

.login .button.wp-hide-pw {
  color: var(--cl-cyan);
}

.login .button.wp-hide-pw:hover {
  color: var(--cl-green);
}

@media (max-width: 480px) {
  #login {
    padding-top: 4vh;
  }

  .login form {
    padding: 1.1rem;
  }
}