:root {
  --zs-red: #d2072e;
  --zs-red-dark: #97001f;
  --zs-red-deep: #760018;
  --zs-soft: #fbf1f3;
  --zs-border: #edc9d1;
}

body { background: #f7f8fa; color: #292329; }
a { color: var(--zs-red); }
a:hover { color: var(--zs-red-dark); }
.btn-primary,
.btn-success { background-color: var(--zs-red); border-color: var(--zs-red); }
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus { background-color: var(--zs-red-dark); border-color: var(--zs-red-dark); }
.btn-outline-primary { color: var(--zs-red); border-color: var(--zs-red); }
.btn-outline-primary:hover { background-color: var(--zs-red); border-color: var(--zs-red); }

.zero-navbar {
  background: #fff;
  border-top: 4px solid var(--zs-red-dark);
  border-bottom: 1px solid #eadde1;
  box-shadow: 0 2px 12px rgba(45, 20, 28, .07);
}

.brand-logo { display: block; width: 205px; height: auto; }
.portal-brand-logo { width: 160px; }
.product-badge { color: #76666b; border-left: 1px solid #dacbd0; margin-left: .8rem; padding-left: .8rem; font-weight: 600; }
.portal-identity { color: #594a4f; }

.auth-page {
  min-height: 100vh;
  background: linear-gradient(122deg, #93001f 0%, #c6092e 48%, #ed183b 100%);
}

.auth-page > .container-fluid,
.auth-page > main.container-fluid {
  min-height: 100vh;
  margin-top: 0 !important;
  padding: 36px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-shell { width: min(100%, 390px); }
.auth-shell-wide { width: min(100%, 500px); }
.auth-brand { text-align: center; color: rgba(255, 255, 255, .78); font-size: .7rem; letter-spacing: .18em; margin: 0 auto 26px; }
.auth-brand img { display: block; width: min(100%, 285px); height: auto; margin: 0 auto 8px; }
.auth-card { border: 0; border-radius: 15px; box-shadow: 0 22px 50px rgba(65, 0, 16, .28); overflow: hidden; }
.auth-card .card-body { padding: 32px; }
.auth-title { margin: 0 0 24px; font-size: 1.22rem; font-weight: 750; color: #211b1d; }
.auth-title i { color: var(--zs-red); margin-right: .35rem; }
.auth-copy { color: #6e6064; font-size: .92rem; }
.auth-card .form-label { font-size: .86rem; font-weight: 600; color: #4f4246; }
.auth-input { display: flex; align-items: stretch; border: 1px solid var(--zs-border); border-radius: 7px; overflow: hidden; background: #fff; }
.auth-input:focus-within { border-color: var(--zs-red); box-shadow: 0 0 0 .2rem rgba(210, 7, 46, .1); }
.auth-input i { width: 43px; display: grid; place-items: center; color: var(--zs-red); background: #fff8f9; }
.auth-input .form-control { border: 0; border-left: 1px solid #f4e0e5; border-radius: 0; min-height: 44px; box-shadow: none; }
.auth-submit { min-height: 46px; margin-top: 8px; font-weight: 700; border-radius: 7px; }
.auth-help { margin-top: 16px; text-align: center; color: #786a6e; font-size: .78rem; }
.auth-help i { color: var(--zs-red); }
.auth-switch { margin-top: 18px; padding-top: 15px; border-top: 1px solid #f1e5e8; text-align: center; font-size: .82rem; }
.auth-footer { margin-top: 24px; color: rgba(255, 255, 255, .78); text-align: center; font-size: .72rem; line-height: 1.65; }
.auth-footer strong { color: #fff; }
.auth-footer span { opacity: .8; }
.auth-code { text-align: center; letter-spacing: .28em; font-weight: 700; border-color: var(--zs-border); }
.auth-code:focus { border-color: var(--zs-red); box-shadow: 0 0 0 .2rem rgba(210, 7, 46, .1); }
.auth-qr { max-width: 230px; width: 100%; margin: 4px auto 18px; border: 8px solid #fff; border-radius: 8px; box-shadow: 0 4px 18px rgba(55, 19, 28, .12); }
.legal-document { white-space: pre-line; max-height: 430px; overflow-y: auto; padding: 1rem; background: #faf8f9; border: 1px solid #eadde1; border-radius: .5rem; line-height: 1.55; }

@media (max-width: 767.98px) {
  .portal-brand-logo { width: 135px; }
  .portal-identity span { display: none; }
  .product-badge { font-size: .82rem; }
  .auth-page > .container-fluid, .auth-page > main.container-fluid { padding: 24px 14px; }
  .auth-card .card-body { padding: 25px 22px; }
  .auth-brand { margin-bottom: 20px; }
}