:root {
  color-scheme: dark;
  --login-bg: #07110e;
  --login-card: rgba(9, 22, 18, 0.92);
  --login-card-border: rgba(218, 176, 86, 0.26);
  --login-text: #eff9ef;
  --login-muted: #aab9a6;
  --login-accent: #e3b95c;
  --login-accent-strong: #6dbc73;
  --login-input: rgba(4, 12, 10, 0.9);
  --login-input-border: rgba(239, 249, 239, 0.18);
  --login-danger-bg: rgba(148, 45, 45, 0.2);
  --login-danger-border: rgba(255, 129, 129, 0.32);
  --login-danger: #ffd7d7;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.login-page {
  min-height: 100vh;
  margin: 0;
  color: var(--login-text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background:
    linear-gradient(90deg, rgba(7, 17, 14, 0.98) 0%, rgba(7, 17, 14, 0.76) 48%, rgba(7, 17, 14, 0.94) 100%),
    linear-gradient(180deg, rgba(7, 17, 14, 0.62), rgba(7, 17, 14, 0.98)),
    url("/images/login-brand-bg.png"),
    var(--login-bg);
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: cover, cover, min(78vw, 760px), cover;
}

.login-shell {
  width: min(100%, 1120px);
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding: clamp(20px, 5vw, 56px);
}

.login-card {
  width: min(100%, 430px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.35rem, 4vw, 2rem);
  border: 1px solid var(--login-card-border);
  border-radius: 8px;
  background: var(--login-card);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(18px);
}

.login-copy {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.login-eyebrow {
  color: var(--login-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-copy h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 2.65rem);
  line-height: 1.1;
}

.login-copy p {
  margin: 0;
  color: var(--login-muted);
  line-height: 1.5;
}

.login-alert {
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--login-danger-border);
  border-radius: 8px;
  background: var(--login-danger-bg);
  color: var(--login-danger);
}

.login-form,
.login-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.login-form {
  gap: 0.9rem;
}

.login-field span {
  color: var(--login-muted);
  font-weight: 700;
}

.login-field input {
  width: 100%;
  min-height: 44px;
  padding: 0.78rem 0.86rem;
  border: 1px solid var(--login-input-border);
  border-radius: 6px;
  background: var(--login-input);
  color: var(--login-text);
  font: inherit;
}

.login-field input:focus {
  border-color: rgba(227, 185, 92, 0.72);
  outline: 3px solid rgba(227, 185, 92, 0.18);
}

.login-submit {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--login-accent), var(--login-accent-strong));
  color: #07110e;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.login-submit:hover {
  filter: brightness(1.05);
}

.login-submit:focus-visible {
  outline: 3px solid rgba(227, 185, 92, 0.24);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  body.login-page {
    background-position: center, center, center top;
    background-size: cover, cover, min(122vw, 680px), cover;
  }

  .login-shell {
    align-items: end;
  }
}