:root {
  --auth-accent:#0b5e3b;
  --auth-accent-hover:#0a5233;
  --auth-accent-surface:#e6f2ec;
  --auth-canvas:#fafbfc;
  --auth-card:#fff;
  --auth-n100:#f1f4f3;
  --auth-n200:#e3e8e6;
  --auth-n300:#cdd5d1;
  --auth-n500:#5f6e66;
  --auth-ink:#1a201d;
  --auth-radius-card:12px;
  --auth-radius-control:8px;
  --auth-shadow:0 4px 12px rgba(16,24,40,.08);
}

body {
  background:var(--auth-canvas);
  color:var(--auth-ink);
  font-family:-apple-system,"Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.app-header-stack > .navbar {
  background:var(--auth-card) !important;
  border-bottom:1px solid var(--auth-n200);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
}

.app-header-stack .navbar-brand,
.app-header-stack .navbar .nav-link {
  color:var(--auth-ink);
}

.app-header-stack .navbar-brand:hover,
.app-header-stack .navbar-brand:focus,
.app-header-stack .navbar .nav-link:hover,
.app-header-stack .navbar .nav-link:focus {
  color:var(--auth-accent);
}

.app-header-stack .brand-2row > span:last-child {
  color:var(--auth-n500);
}

.app-header-stack .btn-outline-light {
  --bs-btn-color:var(--auth-accent);
  --bs-btn-border-color:var(--auth-accent);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--auth-accent);
  --bs-btn-hover-border-color:var(--auth-accent);
  --bs-btn-focus-shadow-rgb:11,94,59;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--auth-accent-hover);
  --bs-btn-active-border-color:var(--auth-accent-hover);
}

.app-header-stack .navbar-toggler {
  background:var(--auth-accent);
  border-color:var(--auth-accent);
}

.auth-shell {
  align-items:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:clamp(2rem, 7vh, 5rem) !important;
  padding-top:clamp(2rem, 7vh, 5rem) !important;
}

.auth-shell > .alert {
  border-radius:var(--auth-radius-control);
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  font-size:.875rem;
  margin-bottom:1rem;
  max-width:440px;
  width:100%;
}

.auth-shell > .alert-danger {
  background:#fee4e2;
  border-color:#fecdca;
  color:#912018;
}

.auth-shell > .alert-info {
  background:#eaf1fd;
  border-color:#c7d7f8;
  color:#1345a5;
}

.auth-shell > .alert-success {
  background:var(--auth-accent-surface);
  border-color:#b9d8c8;
  color:#0a4a30;
}

.auth-shell > .alert-warning {
  background:#fdf1e3;
  border-color:#f3d1aa;
  color:#8a3e06;
}

.auth-page {
  max-width:440px;
  width:100%;
}

.auth-card {
  background:var(--auth-card);
  border:1px solid var(--auth-n200);
  border-radius:var(--auth-radius-card);
  box-shadow:var(--auth-shadow);
  overflow:hidden;
}

.auth-card .card-body {
  padding:2rem;
}

.auth-brand {
  color:var(--auth-accent);
  margin-bottom:1.5rem;
}

.auth-brand .brand-2row > span:first-child {
  font-size:1.25rem;
}

.auth-brand .brand-2row > span:last-child {
  color:var(--auth-n500);
  font-size:.75rem;
}

.auth-card h1 {
  font-size:1.75rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  margin:0 0 .5rem;
}

.auth-intro {
  color:var(--auth-n500);
  font-size:.9375rem;
  margin-bottom:1.5rem;
}

.auth-card .form-label {
  color:var(--auth-ink);
  font-size:.875rem;
  font-weight:600;
  margin-bottom:.375rem;
}

.auth-card .form-control {
  border-color:var(--auth-n300);
  border-radius:var(--auth-radius-control);
  color:var(--auth-ink);
  min-height:42px;
}

.auth-card .form-control:hover {
  border-color:#9aa6a0;
}

.auth-card .form-control:focus {
  border-color:var(--auth-accent);
  box-shadow:0 0 0 .2rem rgba(11,94,59,.16);
}

.auth-card .btn-primary {
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--auth-accent);
  --bs-btn-border-color:var(--auth-accent);
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--auth-accent-hover);
  --bs-btn-hover-border-color:var(--auth-accent-hover);
  --bs-btn-focus-shadow-rgb:11,94,59;
  --bs-btn-active-color:#fff;
  --bs-btn-active-bg:var(--auth-accent-hover);
  --bs-btn-active-border-color:var(--auth-accent-hover);
  border-radius:var(--auth-radius-control);
  font-weight:600;
  min-height:42px;
}

body > footer {
  background:var(--auth-canvas) !important;
  border-color:var(--auth-n200) !important;
}

@media (max-width: 767.98px) {
  .app-header-stack .navbar-toggler {
    /* Touch scale parity with the app chrome (44px rule). */
    min-height: 44px;
    min-width: 44px;
  }

  .auth-shell {
    justify-content:flex-start;
    padding-bottom:2rem !important;
    padding-left:1rem;
    padding-right:1rem;
    padding-top:2rem !important;
  }

  .auth-card .card-body {
    padding:1.5rem;
  }

  .auth-card .form-control,
  .auth-card .btn-primary {
    min-height:44px;
  }
}