:root {
  --ec-navy: #102a43;
  --ec-blue: #1f6feb;
  --ec-green: #2f9e74;
  --ec-ink: #243b53;
  --ec-muted: #627d98;
  --ec-line: #d9e2ec;
  --ec-soft: #f5f8fb;
}

body.auth-page {
  min-height: 100vh;
  color: var(--ec-ink);
  background: linear-gradient(180deg, #f8fbfd 0%, #ffffff 58%);
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.auth-header {
  padding: 1.5rem 0;
}

.auth-brand {
  color: var(--ec-navy);
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2rem 0 4rem;
}

.auth-card {
  width: min(100%, 30rem);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--ec-line);
  border-radius: 1rem;
  box-shadow: 0 1rem 3rem rgba(16, 42, 67, .08);
}

.auth-card-wide { width: min(100%, 42rem); }
.auth-eyebrow { color: var(--ec-green); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.auth-title { color: var(--ec-navy); font-weight: 750; letter-spacing: -.02em; }
.auth-lead { color: var(--ec-muted); }
.auth-footer { padding: 1.5rem 0; color: var(--ec-muted); font-size: .875rem; }
.auth-footer a, .auth-link { color: var(--ec-blue); }
.auth-page label { color: var(--ec-ink); font-weight: 600; }
.auth-page input, .auth-page select { border-color: var(--ec-line); border-radius: .55rem; }
.auth-page input:focus, .auth-page select:focus, .auth-page button:focus, .auth-page a:focus { border-color: var(--ec-blue); box-shadow: 0 0 0 .2rem rgba(31, 111, 235, .18); outline: 0; }
.auth-page .btn-primary { background: var(--ec-blue); border-color: var(--ec-blue); }
.auth-page .btn-primary:hover { background: #1558bd; border-color: #1558bd; }
.auth-page .btn-secondary { background: var(--ec-navy); border-color: var(--ec-navy); color: #fff; }
.auth-page .btn-secondary:hover { background: #0a1d2f; border-color: #0a1d2f; }
.auth-page .errorlist { margin: .5rem 0 1rem; padding: .75rem 1rem; color: #842029; background: #f8d7da; border: 1px solid #f1aeb5; border-radius: .5rem; list-style: none; }
.auth-page table { width: 100%; border-collapse: separate; border-spacing: 0 .85rem; }
.auth-page table th { width: 34%; padding-right: 1rem; vertical-align: middle; }
.auth-page table td { vertical-align: middle; }
.auth-page .auth-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.auth-page .auth-muted-panel { padding: 1rem; background: var(--ec-soft); border: 1px solid var(--ec-line); border-radius: .75rem; }

@media (max-width: 575.98px) {
  .auth-header { padding: 1rem 0; }
  .auth-main { align-items: flex-start; padding-top: 1.25rem; }
  .auth-card { padding: 1.25rem; border-radius: .8rem; }
  .auth-page table, .auth-page tbody, .auth-page tr, .auth-page th, .auth-page td { display: block; width: 100%; }
  .auth-page table th { padding: 0 0 .35rem; }
  .auth-page table { border-spacing: 0; }
  .auth-page table tr { margin-bottom: 1rem; }
  .auth-page .auth-actions .btn { width: 100%; }
}