:root {
  --auth-navy: #0f2a4a;
  --auth-accent: #2e7d9a;
  --auth-surface: #ffffff;
  --auth-ink: #172b3a;
  --auth-muted: #526a78;
  --auth-line: #cfdee5;
}

.login-page {
  min-height: 100vh;
  margin: 0;
  color: var(--auth-ink);
  background: linear-gradient(145deg, #edf5f7 0%, #f8fbfc 55%, #dfecef 100%);
}

.login-shell {
  width: min(100% - 32px, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 28px 0;
  display: grid;
  align-content: center;
  gap: 16px;
}

.login-card,
.login-shell > .page-heading,
.login-shell > .form-panel {
  margin: 0;
  border: 1px solid var(--auth-line);
  background: var(--auth-surface);
  box-shadow: 0 18px 50px rgba(15, 42, 74, .12);
}

.login-card { padding: 28px; border-radius: 18px; }
.login-shell > .page-heading { padding: 22px 26px 10px; border-radius: 18px 18px 0 0; border-bottom: 0; }
.login-shell > .form-panel { padding: 10px 26px 26px; border-radius: 0 0 18px 18px; border-top: 0; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}

.auth-brand-login { padding: 14px 18px; margin: 0; color: #fff; background: var(--auth-navy); border-radius: 14px; }
.login-logo { display: block; width: 58px; height: 66px; max-width: 58px; max-height: 66px; object-fit: contain; flex: 0 0 auto; }
.auth-brand strong,.auth-brand small { display: block; }
.auth-brand strong { font-size: 18px; }
.auth-brand small { margin-top: 2px; color: var(--auth-muted); font-size: 12px; }
.auth-brand-login small { color: #b9ceda; }
.login-card h1 { margin: 5px 0 8px; font-size: clamp(24px, 5vw, 32px); }
.login-card > p { margin: 0 0 16px; color: var(--auth-muted); }
.login-card form { display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; font-weight: 700; }
.login-card input { min-height: 46px; }
.password-requirements { display: grid; gap: 4px; margin: 0 0 16px; padding: 12px 14px; color: #214a60; background: #eef7f9; border-left: 4px solid var(--auth-accent); border-radius: 8px; }
.password-requirements span { font-size: 13px; line-height: 1.45; }

@media (max-width: 480px) {
  .login-shell { width: min(100% - 20px, 560px); padding: 10px 0; align-content: start; }
  .login-card { padding: 20px 18px; }
  .login-logo { width: 46px; height: 53px; }
  .auth-brand { margin-bottom: 12px; }
}

@media (prefers-color-scheme: dark) {
  :root { --auth-surface: #112a3e; --auth-ink: #edf5f8; --auth-muted: #b8ccd6; --auth-line: #365369; }
  .login-page { background: #091c2c; }
  .password-requirements { color: #d9f1f6; background: #15384b; }
}