/* auth: estilos consolidados por responsabilidade. */
.panel,
.table-card,
.login-card,
.empty-card,
.barra-lateral-user {
  padding: 14px;
}

.form-grid,
.table-list,
.auth-form,
.field,
.inline-form,
.content-columns {
  display: grid;
  gap: 12px;
}

.auth-form__notice,
.auth-form__error {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #e4aaa6;
  border-radius: var(--radius-control);
  background: #fcebeb;
  color: var(--danger-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.auth-form__notice {
  border-color: color-mix(in srgb, var(--teal) 38%, var(--border));
  background: color-mix(in srgb, var(--teal) 10%, var(--surface));
  color: var(--text-1);
}

.auth-form__notice[hidden],
.auth-form__error[hidden] {
  display: none;
}

.login-shell { min-height: 100svh; display: grid; place-items: center; padding: clamp(18px, 4vw, 48px); background: radial-gradient(circle at 12% 8%, rgb(0 126 122 / 10%), transparent 30%),
    radial-gradient(circle at 88% 92%, rgb(192 48 94 / 7%), transparent 30%),
    var(--login-page); }

.login-card { width: min(1120px, 100%); }

.login-field { gap: 8px; }

.login-field label { color: var(--teal-dark); font-size: 13px; font-weight: 740; }

.login-input-wrap { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 56px; padding: 0 14px; border: 1.5px solid var(--login-line); border-radius: 15px; background: #ffffff; transition: border-color 160ms, box-shadow 160ms, transform 160ms; }

.login-input-wrap:focus-within { border-color: var(--teal); box-shadow: rgb(0 126 122 / 13%) 0 0 0 4px; transform: translateY(-1px); }

.login-input-wrap__icon { color: var(--teal); font-size: 20px; }

.login-input-wrap input { width: 100%; min-width: 0; height: 52px; padding: 0; border: 0; background: transparent; color: var(--text); font-size: 16px; }

.login-input-wrap input:focus { box-shadow: none; }

.login-password-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; transition: background-color 160ms, color 160ms; }

.login-password-toggle:hover, .login-password-toggle:focus-visible { background: #eef8f7; color: var(--teal-dark); }

.login-page__actions { display: grid; gap: 9px; }

html[data-theme="dark"] .login-input-wrap { border-color: var(--login-line); background: var(--login-panel); }

@media (prefers-reduced-motion: reduce) {
  .login-input-wrap, .login-password-toggle, .login-page__submit { transition: none; }
}

.login-page--portal {
  --login-portal-page: #f3f6f7;
  --login-portal-surface: #ffffff;
  --login-portal-soft: #f7f9fa;
  --login-portal-border: #dce3e6;
  --login-portal-text: #1f2530;
  --login-portal-muted: #697581;
  --login-portal-field: #ffffff;
  --login-portal-field-border: #ccd5da;
  --login-portal-teal: #047e7d;
  --login-portal-teal-dark: #035f5e;
  --login-portal-amber: #ecb11f;
  --login-portal-cherry: #c0305e;
  --login-portal-shadow: 0 24px 64px rgb(26 39 45 / 12%);
}

html:has(.login-page--portal),
html:has(.login-page--portal) body {
  width: 100%;
  min-height: 100%;
  background: var(--login-portal-page);
}

#app-root:has(.login-page--portal) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  background: var(--login-portal-page);
  box-shadow: none;
}

.login-page--portal.login-shell {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 36px;
  background: var(--login-portal-page);
}

.login-portal__frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(500px, 0.97fr);
  width: min(1430px, 100%);
  min-height: min(830px, calc(100dvh - 72px));
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--login-portal-border);
  border-radius: 28px;
  background: var(--login-portal-surface);
  box-shadow: var(--login-portal-shadow);
}

.login-portal__overview {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  overflow: hidden;
  padding: clamp(54px, 5.2vw, 82px) clamp(52px, 6vw, 94px);
  background: #fbfcfc;
}

.login-portal__ornament {
  position: absolute;
  pointer-events: none;
}

.login-portal__ornament--top {
  top: -260px;
  left: -190px;
  width: 700px;
  height: 430px;
  border: 2px solid var(--login-portal-amber);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-12deg);
}

.login-portal__ornament--bottom {
  right: -205px;
  bottom: -245px;
  width: 890px;
  height: 455px;
  border: 2px solid var(--login-portal-amber);
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  box-shadow: -14px -14px 0 -12px #dff3f1, -28px -28px 0 -26px #edf7f6;
  transform: rotate(8deg);
}

.login-portal__brand {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
}

.login-portal__vale-mark {
  display: block;
  width: 220px;
  aspect-ratio: 360 / 138;
}

.login-portal__vale-mark-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.login-portal__vale-mark-image--dark { display: none; }

html[data-theme="dark"] .login-portal__vale-mark-image--light { display: none; }
html[data-theme="dark"] .login-portal__vale-mark-image--dark { display: block; }

.login-portal__vale-mark--overview { width: clamp(188px, 17vw, 242px); }

.login-portal__brand-line {
  width: 80px;
  height: 3px;
  margin-top: 24px;
  border-radius: 999px;
  background: var(--login-portal-amber);
}

.login-portal__brand h1 {
  margin: 25px 0 0;
  color: var(--login-portal-text);
  font-size: clamp(34px, 3.1vw, 46px);
  font-weight: 770;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.login-portal__brand p {
  margin: 13px 0 0;
  color: #d99000;
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 690;
  letter-spacing: 0.29em;
  line-height: 1;
}

.login-portal__brand-accent { display: none; }

.login-portal__features {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  width: min(100%, 520px);
  margin: 38px auto 0;
}

.login-portal__feature {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.login-portal__feature-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 1px solid #a7d8d4;
  border-radius: 17px;
  background: #eef8f7;
  color: var(--login-portal-teal);
  font-size: 30px;
}

.login-portal__feature--amber .login-portal__feature-icon {
  border-color: #efdca6;
  background: #fff8e7;
  color: #d99000;
}

.login-portal__feature-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.login-portal__feature-copy strong {
  color: var(--login-portal-text);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.2;
}

.login-portal__feature-copy > span {
  max-width: 390px;
  color: var(--login-portal-muted);
  font-size: 14px;
  line-height: 1.45;
}

.login-portal__feature-arrow { display: none; }

.login-portal__access {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  padding: clamp(46px, 4.6vw, 70px) clamp(52px, 5vw, 78px) 28px;
  border-left: 1px solid var(--login-portal-border);
  background: var(--login-portal-surface);
}

.login-portal__access-inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  width: min(100%, 575px);
  margin: 0 auto;
}

.login-portal__heading {
  display: grid;
  justify-items: center;
  text-align: center;
}

.login-portal__mobile-brand { display: none; }

.login-portal__lock {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 2px solid #b9dedb;
  border-radius: 50%;
  background: #f4faf9;
  color: var(--login-portal-teal-dark);
  font-size: 40px;
}

.login-portal__heading h2 {
  margin: 23px 0 0;
  color: var(--login-portal-text);
  font-size: clamp(31px, 3vw, 39px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.login-portal__heading p {
  margin: 9px 0 0;
  color: var(--login-portal-muted);
  font-size: 15px;
  line-height: 1.45;
}

.login-portal__heading-line {
  width: 44px;
  height: 3px;
  margin-top: 22px;
  border-radius: 999px;
  background: var(--login-portal-amber);
}

.login-portal__form {
  width: 100%;
  gap: 17px;
  margin-top: 34px;
}

.login-page--portal .login-field { gap: 8px; }

.login-page--portal .login-field label {
  color: var(--login-portal-text);
  font-size: 14px;
  font-weight: 680;
}

.login-page--portal .login-input-wrap {
  width: 100%;
  min-height: 60px;
  padding: 0 17px;
  border: 1.35px solid var(--login-portal-field-border);
  border-radius: 11px;
  background: var(--login-portal-field);
  box-shadow: none;
}

.login-page--portal .login-input-wrap:focus-within {
  border-color: var(--login-portal-teal);
  box-shadow: rgb(4 126 125 / 11%) 0 0 0 3px;
  transform: none;
}

.login-page--portal .login-input-wrap__icon {
  color: #667581;
  font-size: 23px;
}

.login-page--portal .login-input-wrap input {
  height: 56px;
  color: var(--login-portal-text);
  font-size: 16px;
}

.login-page--portal .login-input-wrap input::placeholder {
  color: #8a949c;
  opacity: 1;
}

.login-page--portal .login-password-toggle { color: #667581; }

.login-page--portal .login-password-toggle:hover,
.login-page--portal .login-password-toggle:focus-visible {
  background: #eef8f7;
  color: var(--login-portal-teal);
}

.login-portal__form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 28px;
  margin-top: 1px;
}

.login-portal__remember {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--login-portal-text);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.login-portal__remember input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.login-portal__checkmark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.4px solid #9da4aa;
  border-radius: 4px;
  background: #ffffff;
  color: transparent;
  font-size: 14px;
  transition: background-color 150ms, border-color 150ms, color 150ms, box-shadow 150ms;
}

.login-portal__remember input:checked + .login-portal__checkmark {
  border-color: var(--login-portal-teal);
  background: var(--login-portal-teal);
  color: #ffffff;
}

.login-portal__remember input:focus-visible + .login-portal__checkmark {
  box-shadow: rgb(4 126 125 / 16%) 0 0 0 3px;
}

.login-portal__recovery-link {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: var(--login-portal-teal-dark);
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
}

.login-portal__recovery-link:hover,
.login-portal__recovery-link:focus-visible {
  color: var(--login-portal-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-portal__actions { gap: 12px; }

.login-page--portal .login-portal__submit {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 58px;
  border-radius: 11px;
  background: linear-gradient(90deg, #047e7d, #058f8c);
  box-shadow: rgb(4 126 125 / 18%) 0 10px 24px;
  font-size: 17px;
  font-weight: 740;
}

.login-page--portal .login-portal__submit > span { grid-column: 2; }

.login-portal__submit-icon {
  grid-column: 3;
  justify-self: end;
  margin-right: 2px;
  font-size: 22px;
}

.login-page--portal .login-portal__submit:hover,
.login-page--portal .login-portal__submit:focus-visible {
  background: linear-gradient(90deg, #036f6e, #047f7d);
  transform: translateY(-1px);
}

.login-portal__passkey-row {
  display: grid;
  grid-template-columns: minmax(32px, 1fr) auto minmax(32px, 1fr);
  align-items: center;
  gap: 13px;
}

.login-portal__passkey-line {
  height: 1px;
  background: #dce3e6;
}

.login-portal__passkey {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: #ffffff;
  color: var(--login-portal-teal-dark);
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.login-portal__passkey i { font-size: 20px; }

.login-portal__passkey:hover,
.login-portal__passkey:focus-visible {
  background: #eef8f7;
  color: var(--login-portal-teal);
}

.login-portal__passkey:disabled {
  cursor: wait;
  opacity: 0.65;
}

.login-portal__first-access {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid #dce8eb;
  border-radius: 11px;
  background: #eef6f8;
  color: #36505b;
}

.login-portal__first-access-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--login-portal-teal);
  font-size: 23px;
}

.login-portal__first-access p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
}

.login-portal__first-access strong { font-weight: 760; }

.login-portal__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--login-portal-border);
  color: #7b8790;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.login-portal__footer i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--login-portal-amber);
}

html[data-theme="dark"] .login-page--portal {
  --login-portal-page: #0f141a;
  --login-portal-surface: #171e26;
  --login-portal-soft: #1d252e;
  --login-portal-border: #303b45;
  --login-portal-text: #f3f5f6;
  --login-portal-muted: #aeb7bf;
  --login-portal-field: #111820;
  --login-portal-field-border: #3a4650;
  --login-portal-shadow: 0 24px 64px rgb(0 0 0 / 34%);
}

html[data-theme="dark"] .login-portal__overview { background: #151d24; }
html[data-theme="dark"] .login-portal__feature-icon { border-color: #285f5c; background: #123330; }
html[data-theme="dark"] .login-portal__feature--amber .login-portal__feature-icon { border-color: #5d4b1e; background: #30270f; }
html[data-theme="dark"] .login-portal__lock { border-color: #2c5c59; background: #12302e; color: #67c7be; }
html[data-theme="dark"] .login-page--portal .login-input-wrap { border-color: var(--login-portal-field-border); background: var(--login-portal-field); }
html[data-theme="dark"] .login-page--portal .login-input-wrap input { color: var(--login-portal-text); }
html[data-theme="dark"] .login-page--portal .login-input-wrap input::placeholder { color: #84909a; }
html[data-theme="dark"] .login-portal__checkmark { background: #111820; }
html[data-theme="dark"] .login-portal__passkey { background: #171e26; color: #67c7be; }
html[data-theme="dark"] .login-portal__passkey:hover, html[data-theme="dark"] .login-portal__passkey:focus-visible { background: #12302e; }
html[data-theme="dark"] .login-portal__first-access { border-color: #304650; background: #172932; color: #d7e4e9; }

/* Tablet em paisagem: mantém a composição de PC, mas com densidade própria. */
@media (min-width: 960px) and (max-width: 1199px) {
  .login-page--portal.login-shell { padding: 24px; }
  .login-portal__frame { grid-template-columns: minmax(360px, 0.86fr) minmax(470px, 1.14fr); min-height: calc(100dvh - 48px); border-radius: 24px; }
  .login-portal__overview { padding: 40px 38px; }
  .login-portal__vale-mark--overview { width: 160px; }
  .login-portal__brand-line { width: 58px; margin-top: 17px; }
  .login-portal__brand h1 { margin-top: 18px; font-size: 29px; }
  .login-portal__brand p { margin-top: 10px; font-size: 13px; }
  .login-portal__features { gap: 17px; margin-top: 27px; }
  .login-portal__feature { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; }
  .login-portal__feature-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 23px; }
  .login-portal__feature-copy strong { font-size: 15px; }
  .login-portal__feature-copy > span { font-size: 12px; line-height: 1.38; }
  .login-portal__access { padding: 38px 42px 24px; }
  .login-portal__access-inner { width: min(100%, 540px); }
  .login-portal__lock { width: 70px; height: 70px; font-size: 32px; }
  .login-portal__heading h2 { margin-top: 18px; font-size: 31px; }
  .login-portal__heading-line { margin-top: 17px; }
  .login-portal__form { margin-top: 26px; gap: 14px; }
  .login-page--portal .login-input-wrap { min-height: 56px; }
  .login-page--portal .login-input-wrap input { height: 52px; }
  .login-page--portal .login-portal__submit { min-height: 54px; }
  .login-portal__footer { margin-top: 18px; padding-top: 16px; }
}

/* Tablet em retrato: marca no topo e formulário amplo abaixo, sem card estreito. */
@media (min-width: 700px) and (max-width: 959px) {
  .login-page--portal.login-shell { display: grid; place-items: stretch center; padding: 20px; overflow-y: auto; }
  .login-portal__frame { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); width: min(860px, 100%); min-height: calc(100dvh - 40px); border-radius: 24px; }
  .login-portal__overview { display: grid; align-content: center; min-height: 235px; padding: 28px 34px 26px; }
  .login-portal__vale-mark--overview { width: 148px; }
  .login-portal__brand-line { width: 50px; margin-top: 12px; }
  .login-portal__brand h1 { margin-top: 14px; font-size: 29px; }
  .login-portal__brand p { margin-top: 8px; font-size: 12px; }
  .login-portal__features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 620px); margin-top: 22px; }
  .login-portal__feature { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 9px 10px; border: 1px solid #e1e7e9; border-radius: 14px; background: #ffffff; }
  .login-portal__feature-icon { width: 40px; height: 40px; border-radius: 11px; font-size: 19px; }
  .login-portal__feature-copy { gap: 0; }
  .login-portal__feature-copy strong { font-size: 13px; }
  .login-portal__feature-copy > span { display: none; }
  .login-portal__access { padding: 34px 50px 22px; border-top: 1px solid var(--login-portal-border); border-left: 0; }
  .login-portal__access-inner { width: min(100%, 650px); }
  .login-portal__lock { width: 66px; height: 66px; font-size: 29px; }
  .login-portal__heading h2 { margin-top: 16px; font-size: 32px; }
  .login-portal__heading p { font-size: 14px; }
  .login-portal__heading-line { margin-top: 16px; }
  .login-portal__form { margin-top: 25px; gap: 15px; }
  .login-page--portal .login-input-wrap { min-height: 58px; }
  .login-page--portal .login-input-wrap input { height: 54px; }
  .login-page--portal .login-portal__submit { min-height: 56px; }
  .login-portal__footer { margin-top: 20px; }
  html[data-theme="dark"] .login-portal__feature { border-color: #303b45; background: #171e26; }
}

/* Celular: tela inteira, fiel ao desenho aprovado, sem container interno. */
@media (max-width: 699px) {
  html:has(.login-page--portal),
  html:has(.login-page--portal) body,
  #app-root:has(.login-page--portal) {
    min-height: 100dvh;
    background: var(--login-portal-surface);
  }

  body:has(.login-page--portal)::before,
  body:has(.login-page--portal)::after { display: none; content: none; }

  .login-page--portal.login-shell {
    display: block;
    width: 100%;
    min-height: 100dvh;
    padding: 0;
    overflow-x: hidden;
    background: var(--login-portal-surface);
  }

  .login-portal__frame {
    display: block;
    width: 100%;
    min-height: 100dvh;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--login-portal-surface);
    box-shadow: none;
  }

  .login-portal__overview { display: none; }

  .login-portal__access {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    width: 100%;
    min-height: 100dvh;
    padding: 0 0 max(14px, env(safe-area-inset-bottom));
    overflow: hidden;
    border: 0;
    background: var(--login-portal-surface);
  }

  .login-portal__access::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(100px, 25vw, 126px);
    background: url("../../assets/brand/login-mobile-wave.svg") top center / 100% 100% no-repeat;
    pointer-events: none;
  }

  .login-portal__access-inner {
    position: relative;
    z-index: 2;
    align-self: start;
    display: grid;
    align-content: start;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: max(142px, calc(env(safe-area-inset-top) + 118px)) 22px 18px;
  }

  .login-portal__heading {
    justify-items: start;
    text-align: left;
  }

  .login-portal__mobile-brand {
    display: grid;
    grid-template-columns: minmax(118px, 150px) 1px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 44px;
  }

  .login-portal__vale-mark--mobile {
    display: block;
    width: 100%;
  }

  .login-portal__mobile-brand-line {
    width: 1px;
    height: 54px;
    background: #aeb7bf;
  }

  .login-portal__mobile-brand-copy {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .login-portal__mobile-brand-copy strong {
    color: var(--login-portal-teal-dark);
    font-size: clamp(18px, 5vw, 23px);
    font-weight: 780;
    line-height: 1.05;
  }

  .login-portal__mobile-brand-copy span {
    color: #778491;
    font-size: clamp(11px, 3vw, 13px);
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .login-portal__lock,
  .login-portal__heading-line { display: none; }

  .login-portal__heading h2 {
    margin: 0;
    font-size: clamp(31px, 8.8vw, 38px);
    line-height: 1.04;
  }

  .login-portal__heading p {
    margin-top: 9px;
    font-size: clamp(15px, 4.1vw, 17px);
    line-height: 1.45;
  }

  .login-portal__form {
    gap: 16px;
    margin-top: 34px;
  }

  .login-page--portal .login-field { gap: 7px; }

  .login-page--portal .login-field label {
    font-size: 14px;
    line-height: 1.2;
  }

  .login-page--portal .login-input-wrap {
    min-height: 58px;
    padding-inline: 14px;
    border-radius: 12px;
  }

  .login-page--portal .login-input-wrap__icon { font-size: 22px; }

  .login-page--portal .login-input-wrap input {
    height: 54px;
    font-size: 16px;
  }

  .login-portal__form-options {
    gap: 10px;
    margin-top: 2px;
  }

  .login-portal__remember,
  .login-portal__recovery-link { font-size: 13.5px; }

  .login-portal__checkmark {
    width: 21px;
    height: 21px;
  }

  .login-portal__actions { gap: 13px; }

  .login-page--portal .login-portal__submit {
    min-height: 58px;
    border-radius: 12px;
    font-size: 17px;
  }

  .login-portal__passkey-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .login-portal__passkey-line { display: none; }

  .login-portal__passkey {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 15px;
  }

  .login-portal__passkey i { font-size: 23px; }

  .login-portal__first-access {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    margin-top: 3px;
    padding: 14px 15px;
    border-color: #f0dfac;
    border-radius: 12px;
    background: #fff8e8;
    color: #34424d;
  }

  .login-portal__first-access-icon {
    width: 34px;
    height: 34px;
    color: #d99000;
  }

  .login-portal__first-access p { font-size: 12.5px; }

  .login-portal__footer {
    position: relative;
    z-index: 2;
    gap: 5px;
    min-height: 34px;
    margin: 8px 0 0;
    padding: 8px 16px 4px;
    border-top: 0;
    font-size: 11px;
  }

  .login-portal__footer span:last-child,
  .login-portal__footer i:last-of-type { display: none; }

  html[data-theme="dark"] .login-portal__mobile-brand-copy strong { color: #67c7be; }
  html[data-theme="dark"] .login-portal__mobile-brand-copy span { color: #aeb7bf; }
  html[data-theme="dark"] .login-portal__mobile-brand-line { background: #54616b; }
  html[data-theme="dark"] .login-portal__first-access { border-color: #5d4b1e; background: #30270f; color: #f4ead0; }
}

@media (max-width: 390px) {
  .login-portal__access-inner { padding-right: 17px; padding-left: 17px; }
  .login-portal__mobile-brand { grid-template-columns: minmax(108px, 136px) 1px minmax(0, 1fr); gap: 12px; margin-bottom: 36px; }
  .login-portal__mobile-brand-line { height: 48px; }
  .login-portal__form { margin-top: 28px; gap: 14px; }
  .login-portal__remember, .login-portal__recovery-link { font-size: 12.5px; }
  .login-portal__first-access { padding: 12px 13px; }
}

@media (max-width: 699px) and (max-height: 740px) {
  .login-portal__access-inner { padding-top: max(124px, calc(env(safe-area-inset-top) + 100px)); }
  .login-portal__mobile-brand { margin-bottom: 28px; }
  .login-portal__heading h2 { font-size: 29px; }
  .login-portal__heading p { font-size: 14px; }
  .login-portal__form { margin-top: 24px; gap: 12px; }
  .login-page--portal .login-input-wrap { min-height: 52px; }
  .login-page--portal .login-input-wrap input { height: 48px; }
  .login-page--portal .login-portal__submit { min-height: 52px; }
  .login-portal__first-access { padding-top: 11px; padding-bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-page--portal .login-input-wrap,
  .login-portal__checkmark,
  .login-page--portal .login-portal__submit,
  .login-portal__passkey { transition: none; }
}

/* Fluxos de autenticação secundários: página própria, sem card dentro do container do app. */
html:has(.auth-flow),
html:has(.auth-flow) body {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
}

#app-root:has(.auth-flow) {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  background: #ffffff;
  box-shadow: none;
}

.auth-flow {
  width: 100%;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(360px, 38%) minmax(0, 1fr);
  background: #ffffff;
  color: #1f2530;
}

.auth-flow__brand-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 44px;
  min-width: 0;
  padding: clamp(38px, 5vw, 72px);
  overflow: hidden;
  background: #007e7a;
  color: #ffffff;
}

.auth-flow__brand-lockup {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.auth-flow__brand-logo {
  width: clamp(104px, 9vw, 136px);
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.auth-flow__brand-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-left: 20px;
  border-left: 2px solid #ecb11f;
}

.auth-flow__brand-copy strong {
  color: #ffffff;
  font-size: clamp(19px, 1.5vw, 24px);
  font-weight: 760;
  line-height: 1.08;
}

.auth-flow__brand-copy span {
  color: #ffffff;
  font-size: 12px;
  font-weight: 730;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.auth-flow__brand-message {
  align-self: center;
  display: grid;
  gap: 14px;
  max-width: 460px;
}

.auth-flow__brand-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid #ecb11f;
  border-radius: 18px;
  color: #ecb11f;
  font-size: 28px;
}

.auth-flow__brand-message h2,
.auth-flow__brand-message p {
  margin: 0;
}

.auth-flow__brand-message h2 {
  color: #ffffff;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 780;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.auth-flow__brand-message p {
  max-width: 420px;
  color: #e8f5f4;
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.6;
}

.auth-flow__brand-bars {
  display: grid;
  grid-template-columns: minmax(90px, 180px) minmax(44px, 78px);
  gap: 10px;
  align-items: center;
}

.auth-flow__brand-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
}

.auth-flow__brand-bar--yellow { background: #ecb11f; }
.auth-flow__brand-bar--cherry { background: #c0305e; }

.auth-flow__content {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 100dvh;
  background: #ffffff;
}

.auth-flow__content-inner {
  align-self: center;
  width: min(100%, 800px);
  margin: 0 auto;
  padding: clamp(46px, 6vw, 88px) clamp(40px, 6vw, 82px);
}

.auth-flow__topline {
  display: flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 22px;
}

.auth-flow__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ecb11f;
  color: #513600;
  font-size: 12px;
  font-weight: 780;
  white-space: nowrap;
}

.auth-flow__heading {
  display: grid;
  gap: 10px;
  margin-bottom: 30px;
}

.auth-flow__eyebrow {
  color: #c0305e;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.auth-flow__heading h1,
.auth-flow__heading p {
  margin: 0;
}

.auth-flow__heading h1 {
  color: #1f2530;
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 790;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.auth-flow__heading p {
  max-width: 680px;
  color: #66707a;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.58;
}

.auth-flow__body,
.auth-flow__stack,
.auth-flow__form,
.auth-flow__dynamic {
  width: 100%;
}

.auth-flow__stack,
.auth-flow__form {
  display: grid;
  gap: 18px;
}

.auth-flow__field {
  display: grid;
  gap: 8px;
}

.auth-flow__field label {
  color: #1f2530;
  font-size: 14px;
  font-weight: 720;
}

.auth-flow__input {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 0 16px;
  border: 1px solid #c9d3d8;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
}

.auth-flow__input:focus-within {
  border-color: #007e7a;
  box-shadow: 0 0 0 3px #cce8e5;
  transform: none;
}

.auth-flow__input .login-input-wrap__icon {
  color: #007e7a;
  font-size: 23px;
}

.auth-flow__input input {
  width: 100%;
  height: 58px;
  border: 0;
  outline: 0;
  background: #ffffff;
  color: #1f2530;
  font-size: 16px;
}

.auth-flow__input input::placeholder {
  color: #8a949c;
  opacity: 1;
}

.auth-flow__input--plain {
  padding: 0 15px;
}

.auth-flow__input--plain input {
  padding: 0;
}

.auth-flow .login-password-toggle {
  color: #68747d;
}

.auth-flow .login-password-toggle:hover,
.auth-flow .login-password-toggle:focus-visible {
  background: #edf7f6;
  color: #007e7a;
}

.auth-flow__email-summary,
.auth-flow__notice,
.auth-flow__verified-line,
.auth-flow__status {
  border-radius: 16px;
}

.auth-flow__email-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid #b8d9d5;
  background: #edf8f6;
}

.auth-flow__email-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #007e7a;
  color: #ffffff;
  font-size: 23px;
}

.auth-flow__email-summary > div,
.auth-flow__email-summary-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.auth-flow__email-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #77bfb5;
  border-radius: 10px;
  background: #ffffff;
  color: #007e7a;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}

.auth-flow__email-change:hover,
.auth-flow__email-change:focus-visible {
  border-color: #007e7a;
  background: #e7f5f2;
  color: #006c69;
}

.auth-flow__email-summary span {
  color: #49605f;
  font-size: 12px;
  font-weight: 690;
}

.auth-flow__email-summary strong {
  overflow-wrap: anywhere;
  color: #1f2530;
  font-size: 16px;
  font-weight: 760;
}

.auth-flow__notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid #e3bd55;
  background: #fff5d8;
  color: #654700;
}

.auth-flow__notice > i {
  margin-top: 1px;
  font-size: 22px;
}

.auth-flow__notice strong,
.auth-flow__notice p {
  margin: 0;
}

.auth-flow__notice strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.auth-flow__notice p {
  font-size: 13px;
  line-height: 1.5;
}

.auth-flow__verified-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 13px;
  border: 1px solid #9bd3ca;
  background: #edf8f6;
  color: #076963;
  font-size: 13px;
  font-weight: 680;
}

.auth-flow__verified-line i {
  color: #007e7a;
  font-size: 18px;
}

.auth-flow__requirements {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 0;
  padding: 0;
  list-style: none;
}

.auth-flow__requirement {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d6dfe3;
  border-radius: 999px;
  background: #f5f7f8;
  color: #66707a;
  font-size: 12px;
  font-weight: 650;
}

.auth-flow__requirement i {
  color: #909ba3;
  font-size: 14px;
}

.auth-flow__requirement.is-valid {
  border-color: #77bfb5;
  background: #eaf7f4;
  color: #076963;
}

.auth-flow__requirement.is-valid i {
  color: #007e7a;
}

.auth-flow__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 12px;
}

.auth-flow__primary,
.auth-flow__secondary {
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 760;
}

.auth-flow__primary {
  background: #007e7a;
  color: #ffffff;
  box-shadow: none;
}

.auth-flow__primary:hover,
.auth-flow__primary:focus-visible {
  background: #006c69;
}

.auth-flow__secondary {
  justify-content: center;
  border: 1px solid #007e7a;
  background: #ffffff;
  color: #007e7a;
}

.auth-flow__secondary:hover,
.auth-flow__secondary:focus-visible {
  background: #edf7f6;
  color: #006c69;
}

.auth-flow__primary:disabled,
.auth-flow__secondary:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
}

.auth-flow__link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: max-content;
  min-height: 34px;
  margin: 0 auto;
  padding: 2px 6px;
  border: 0;
  background: #ffffff;
  color: #5c6972;
  font-size: 13px;
  font-weight: 690;
  cursor: pointer;
}

.auth-flow__link-button:hover,
.auth-flow__link-button:focus-visible {
  color: #007e7a;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-flow__status {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #9bd3ca;
  background: #eaf7f4;
  color: #076963;
  font-size: 13px;
  line-height: 1.5;
}

.auth-flow__error {
  font-size: 13px;
}

.auth-flow__hint--center {
  margin-inline: auto;
  text-align: center;
}


.auth-flow__hint {
  color: #66707a;
  font-size: 12px;
  line-height: 1.5;
}

.auth-flow__checking {
  margin: 0;
  padding: 18px 0;
  color: #66707a;
  font-size: 14px;
}

.auth-flow__result {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 4px 0;
}

.auth-flow__result > i {
  color: #007e7a;
  font-size: 42px;
}

.auth-flow__result h2,
.auth-flow__result p {
  margin: 0;
}

.auth-flow__result h2 {
  color: #1f2530;
  font-size: 24px;
  font-weight: 770;
}

.auth-flow__result p {
  max-width: 620px;
  color: #66707a;
  font-size: 15px;
  line-height: 1.55;
}

.auth-flow__result .auth-flow__primary,
.auth-flow__result .auth-flow__secondary {
  width: auto;
  min-width: 220px;
  margin-top: 8px;
  padding-inline: 22px;
}

.auth-flow__result--error > i {
  color: #c0305e;
}

.auth-flow__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 52px;
  padding: 10px 24px;
  border-top: 1px solid #e4eaed;
  color: #7c868e;
  font-size: 11px;
}

.auth-flow .registration-invite-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
  border: 1px solid #d5dee2;
  border-radius: 14px;
  background: #f5f7f8;
}

.auth-flow .registration-invite-summary > span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.auth-flow .registration-invite-summary small {
  color: #66707a;
  font-size: 11px;
  font-weight: 680;
}

.auth-flow .registration-invite-summary strong {
  overflow: hidden;
  color: #1f2530;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 700px) and (max-width: 1199px) {
  #app-root:has(.auth-flow) {
    min-height: 100dvh;
  }

  .auth-flow {
    grid-template-columns: 1fr;
    grid-template-rows: 132px minmax(0, 1fr);
  }

  .auth-flow__brand-panel {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 28px;
    padding: 24px clamp(28px, 6vw, 54px);
  }

  .auth-flow__brand-logo {
    width: 108px;
  }

  .auth-flow__brand-copy {
    padding-left: 16px;
  }

  .auth-flow__brand-copy strong {
    font-size: 20px;
  }

  .auth-flow__brand-message {
    display: none;
  }

  .auth-flow__brand-bars {
    justify-self: end;
    grid-template-columns: 110px 50px;
  }

  .auth-flow__content {
    min-height: calc(100dvh - 132px);
  }

  .auth-flow__content-inner {
    width: min(100%, 820px);
    padding: clamp(34px, 5vw, 52px) clamp(38px, 8vw, 78px);
  }

  .auth-flow__heading {
    margin-bottom: 26px;
  }

  .auth-flow__heading h1 {
    font-size: clamp(34px, 5vw, 44px);
  }
}

@media (max-width: 699px) {
  html:has(.auth-flow),
  html:has(.auth-flow) body,
  #app-root:has(.auth-flow) {
    min-height: 100dvh;
    background: #ffffff;
  }

  .auth-flow {
    grid-template-columns: 1fr;
    grid-template-rows: 88px minmax(0, 1fr);
  }

  .auth-flow__brand-panel {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    padding: 14px 16px;
  }

  .auth-flow__brand-lockup {
    gap: 12px;
  }

  .auth-flow__brand-logo {
    width: 92px;
  }

  .auth-flow__brand-copy {
    gap: 3px;
    padding-left: 12px;
    border-left-width: 2px;
  }

  .auth-flow__brand-copy strong {
    font-size: 16px;
  }

  .auth-flow__brand-copy span {
    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .auth-flow__brand-message,
  .auth-flow__brand-bars {
    display: none;
  }

  .auth-flow__content {
    min-height: calc(100dvh - 88px);
  }

  .auth-flow__content-inner {
    align-self: start;
    width: 100%;
    padding: 26px 16px 22px;
  }

  .auth-flow__topline {
    min-height: 30px;
    margin-bottom: 16px;
  }

  .auth-flow__badge {
    min-height: 30px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .auth-flow__heading {
    gap: 8px;
    margin-bottom: 22px;
  }

  .auth-flow__eyebrow {
    font-size: 11px;
  }

  .auth-flow__heading h1 {
    font-size: clamp(28px, 8vw, 34px);
  }

  .auth-flow__heading p {
    font-size: 14px;
    line-height: 1.5;
  }

  .auth-flow__stack,
  .auth-flow__form {
    gap: 15px;
  }

  .auth-flow__input {
    min-height: 54px;
    border-radius: 12px;
  }

  .auth-flow__input input {
    height: 52px;
  }

  .auth-flow__email-summary {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
    border-radius: 14px;
  }

  .auth-flow__email-change {
    grid-column: 2;
    justify-self: start;
    min-height: 34px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .auth-flow__email-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
  }

  .auth-flow__email-summary strong {
    font-size: 14px;
  }

  .auth-flow__actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .auth-flow__primary,
  .auth-flow__secondary {
    min-height: 52px;
    border-radius: 12px;
    font-size: 14px;
  }

  .auth-flow__requirements {
    gap: 7px;
  }

  .auth-flow__requirement {
    min-height: 30px;
    font-size: 11px;
  }

  .auth-flow__result > i {
    font-size: 36px;
  }

  .auth-flow__result h2 {
    font-size: 21px;
  }

  .auth-flow__result p {
    font-size: 14px;
  }

  .auth-flow__result .auth-flow__primary,
  .auth-flow__result .auth-flow__secondary {
    width: 100%;
    min-width: 0;
  }

  .auth-flow__footer {
    min-height: 44px;
    padding: 8px 16px max(8px, env(safe-area-inset-bottom));
  }

  .auth-flow .registration-invite-summary {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"]:has(.auth-flow),
html[data-theme="dark"]:has(.auth-flow) body,
html[data-theme="dark"] #app-root:has(.auth-flow),
html[data-theme="dark"] .auth-flow,
html[data-theme="dark"] .auth-flow__content {
  background: #111820;
}

html[data-theme="dark"] .auth-flow__brand-panel {
  background: #006b68;
}

html[data-theme="dark"] .auth-flow__content-inner,
html[data-theme="dark"] .auth-flow__link-button,
html[data-theme="dark"] .auth-flow__input input,
html[data-theme="dark"] .auth-flow__secondary {
  background: #111820;
}

html[data-theme="dark"] .auth-flow__heading h1,
html[data-theme="dark"] .auth-flow__field label,
html[data-theme="dark"] .auth-flow__email-summary strong,
html[data-theme="dark"] .auth-flow__result h2,
html[data-theme="dark"] .auth-flow .registration-invite-summary strong {
  color: #f3f5f6;
}

html[data-theme="dark"] .auth-flow__heading p,
html[data-theme="dark"] .auth-flow__hint,
html[data-theme="dark"] .auth-flow__checking,
html[data-theme="dark"] .auth-flow__result p,
html[data-theme="dark"] .auth-flow__link-button,
html[data-theme="dark"] .auth-flow .registration-invite-summary small {
  color: #aeb7bf;
}

html[data-theme="dark"] .auth-flow__email-change {
  border-color: #3d8f87;
  background: #111820;
  color: #67c7be;
}

html[data-theme="dark"] .auth-flow__email-change:hover,
html[data-theme="dark"] .auth-flow__email-change:focus-visible {
  border-color: #67c7be;
  background: #16302e;
  color: #8addd5;
}

html[data-theme="dark"] .auth-flow__input {
  border-color: #3a4650;
  background: #111820;
}

html[data-theme="dark"] .auth-flow__input input {
  color: #f3f5f6;
}

html[data-theme="dark"] .auth-flow__input:focus-within {
  border-color: #58c7bc;
  box-shadow: 0 0 0 3px #183c3a;
}

html[data-theme="dark"] .auth-flow__email-summary,
html[data-theme="dark"] .auth-flow__verified-line,
html[data-theme="dark"] .auth-flow__status {
  border-color: #256f69;
  background: #12302f;
  color: #d5f0ed;
}

html[data-theme="dark"] .auth-flow__requirement,
html[data-theme="dark"] .auth-flow .registration-invite-summary {
  border-color: #35434e;
  background: #19232c;
  color: #aeb7bf;
}

html[data-theme="dark"] .auth-flow__requirement.is-valid {
  border-color: #397f78;
  background: #12302f;
  color: #d5f0ed;
}

html[data-theme="dark"] .auth-flow__secondary {
  border-color: #58c7bc;
  color: #58c7bc;
}

html[data-theme="dark"] .auth-flow__secondary:hover,
html[data-theme="dark"] .auth-flow__secondary:focus-visible,
html[data-theme="dark"] .auth-flow .login-password-toggle:hover,
html[data-theme="dark"] .auth-flow .login-password-toggle:focus-visible {
  background: #17302f;
}

html[data-theme="dark"] .auth-flow__footer {
  border-top-color: #2d3842;
  color: #8f9aa3;
}

@media (prefers-reduced-motion: reduce) {
  .auth-flow__input,
  .auth-flow__primary,
  .auth-flow__secondary {
    transition: none;
  }
}

.login-layout, .login-cover, .stats-row { display: grid; gap: 12px; }

.login-cover h2 { margin: 0px; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.2; }

.login-cover p, .hero-card p { margin: 0px; color: var(--text-2); font-size: 11.5px; }

@media (min-width: 700px) {
  .login-layout, .content-columns { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

.login-page__recovery { display: flex; justify-content: flex-end; margin-top: -5px; }

.login-page__recovery-link { color: var(--teal-dark); padding: 2px 0; font-size: 12px; }

.login-page__recovery-link:hover, .login-page__recovery-link:focus-visible { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }