body.auth-page {
  --auth-ink: #202728;
  --auth-paper: #f0ecdf;
  --auth-muted: #747a76;
  --auth-accent: #148d89;
  --auth-accent-bright: #39c4b7;
  --auth-danger: #a63b4a;
  min-height: 100vh;
  margin: 0;
  color: var(--auth-ink);
  background: #d8d6cf;
  font-family: "Segoe UI", Arial, sans-serif;
}

.auth-stage {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: clamp(20px, 4vh, 40px) clamp(18px, 4vw, 48px);
}

.auth-card {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  width: min(1120px, 100%);
  min-height: min(700px, calc(100svh - 56px));
  overflow: hidden;
  border: 1px solid #737776;
  border-radius: 3px;
  background: var(--auth-paper);
  box-shadow: 0 10px 34px rgba(25, 30, 30, .14);
  animation: auth-enter .32s ease-out both;
}

.auth-brand-panel {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 30px clamp(23px, 3.2vw, 42px) 24px;
  border-right: 3px solid var(--auth-accent-bright);
  background: #242929;
  color: var(--auth-paper);
}

.auth-brand-marker {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  color: #e2e0d7;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.5;
  text-transform: uppercase;
}

.auth-brand-marker span { color: #a7adaa; font-weight: 500; }

.auth-brand-illustration {
  position: absolute;
  z-index: 0;
  top: 48%;
  left: 50%;
  width: calc(100% - 24px);
  height: calc(100% - 174px);
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  opacity: .58;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.auth-brand-identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto 0 15px;
}

.auth-logo { display: block; width: 44px; height: 44px; object-fit: contain; }
.auth-brand-wordmark span { display: block; color: #c2c5bd; font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.auth-brand-wordmark strong {
  display: block;
  color: #f4f0e7;
  font-family: Bahnschrift, "Arial Narrow", "Franklin Gothic Medium", sans-serif;
  font-size: 1.8rem;
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1;
}

.auth-brand-index {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(240, 236, 223, .34);
  color: #c4c6be;
  font-size: .59rem;
  letter-spacing: .14em;
  line-height: 1.6;
}

.auth-brand-index div span,
.auth-brand-index div strong { display: block; }
.auth-brand-index div strong { color: #f0ecdf; font-size: .64rem; font-weight: 650; }
.auth-brand-code { color: var(--auth-accent-bright); white-space: nowrap; }

.auth-form-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 6vw, 76px);
  background-color: var(--auth-paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 39px,
    rgba(45, 53, 50, .022) 39px,
    rgba(45, 53, 50, .022) 40px
  );
  color: var(--auth-ink);
}

.auth-form-content { width: 100%; max-width: 430px; margin: auto; animation: auth-content-enter .28s .04s ease-out both; }
.auth-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: #57706c;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.auth-kicker-rule { display: inline-block; width: 24px; height: 2px; background: var(--auth-accent); }
.auth-title {
  margin: 0 0 11px;
  color: var(--auth-ink);
  font-family: Bahnschrift, "Arial Narrow", "Franklin Gothic Medium", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  font-stretch: condensed;
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1.04;
}
.auth-subtitle { margin: 0 0 23px; color: #626b67; font-size: .95rem; line-height: 1.6; }
.auth-form { margin-top: 26px; }
.auth-field { min-width: 0; margin: 0 0 19px; }
.auth-label { display: block; margin: 0 0 7px; color: #343c39; font-size: .83rem; font-weight: 700; letter-spacing: .01em; }

.auth-control {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #a9afa9;
  border-radius: 3px;
  outline: 0;
  background: rgba(255, 255, 255, .55);
  color: #202728;
  font: inherit;
  font-size: .95rem;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.auth-control::placeholder { color: #868d87; opacity: 1; }
.auth-control:hover { border-color: #737d77; }
.auth-control:focus { border-color: var(--auth-accent); background: #fffefa; box-shadow: 0 0 0 3px rgba(20, 141, 137, .16); }
.auth-password { position: relative; }
.auth-password .auth-control { padding-right: 54px; }
.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  transform: translateY(-50%);
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #626d68;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.auth-password-toggle:hover { background: rgba(32, 39, 40, .07); color: var(--auth-ink); }
.auth-password-toggle:focus-visible,
.auth-link:focus-visible,
.auth-submit:focus-visible,
.auth-branch:focus-within { outline: 3px solid rgba(20, 141, 137, .55); outline-offset: 3px; }
.auth-password-toggle i { font-size: 1.05rem; }

.auth-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  color: #087a77 !important;
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
}
.auth-link:hover { color: #075c5a !important; text-decoration: underline; text-underline-offset: 3px; }
.auth-submit {
  display: inline-flex;
  width: 100%;
  min-height: 53px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 3px solid var(--auth-accent-bright);
  border-radius: 2px;
  background: var(--auth-ink);
  color: #f5f1e7;
  font: inherit;
  font-size: .94rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease;
}
.auth-submit:hover { transform: translateY(-1px); background: #111819; color: #fff; }
.auth-submit:active { transform: translateY(0); }

.auth-alert { margin: 17px 0; padding: 12px 14px; border: 1px solid transparent; border-left-width: 3px; border-radius: 2px; font-size: .88rem; line-height: 1.5; }
.auth-alert--error { border-color: #d39ba2; border-left-color: var(--auth-danger); background: #f7e8e7; color: #7b2533; }
.auth-alert--success { border-color: #9cc5b9; border-left-color: var(--auth-accent); background: #e5f0e9; color: #205953; }
.auth-validation { display: none; margin-top: 6px; color: var(--auth-danger); font-size: .78rem; }
.auth-form.was-validated .auth-control:invalid { border-color: var(--auth-danger); }
.auth-form.was-validated .auth-control:invalid + .auth-validation { display: block; }
.auth-form.was-validated .auth-field:has(.auth-control:invalid) .auth-validation { display: block; }
.auth-copyright { margin: 28px auto 0; color: #747a76; font-size: .73rem; text-align: center; }
.auth-code { text-align: center; font-size: 1.35rem; font-weight: 700; letter-spacing: .42em; }
.auth-branches { display: grid; gap: 9px; margin: 21px 0; }
.auth-branch {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #c7c9bf;
  border-radius: 3px;
  background: rgba(255, 255, 255, .42);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.auth-branch:hover { transform: translateY(-1px); border-color: #76aaa0; background: #fffefa; }
.auth-branch:has(input:checked) { border-color: var(--auth-accent); background: #e6f1e9; }
.auth-branch input { width: 17px; height: 17px; flex: 0 0 auto; margin: 0; accent-color: var(--auth-accent); }
.auth-branch-name { display: block; color: var(--auth-ink); font-size: .91rem; font-weight: 700; }
.auth-branch-address { display: block; margin-top: 3px; color: var(--auth-muted); font-size: .8rem; }
.auth-form-footer { display: flex; justify-content: center; margin-top: 12px; }

@keyframes auth-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes auth-content-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
  .auth-stage { align-items: start; padding: 16px; }
  .auth-card { width: min(100%, 520px); min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: 192px 1fr; margin: auto; }
  .auth-brand-panel { min-height: 192px; padding: 17px 22px; border-right: 0; border-bottom: 2px solid var(--auth-accent-bright); }
  .auth-brand-marker { max-width: 65%; font-size: .58rem; }
  .auth-brand-illustration { top: 50%; right: 1px; left: auto; width: 180px; height: 210px; max-height: none; transform: translateY(-50%); opacity: .55; }
  .auth-brand-identity { margin: auto 0 0; gap: 9px; }
  .auth-logo { width: 35px; height: 35px; }
  .auth-brand-wordmark span { font-size: .56rem; }
  .auth-brand-wordmark strong { font-size: 1.48rem; }
  .auth-brand-index { display: none; }
  .auth-form-panel { padding: 34px clamp(22px, 7vw, 42px) 22px; }
  .auth-form-content { max-width: 100%; }
  .auth-title { font-size: clamp(2rem, 8vw, 2.55rem); }
  .auth-copyright { margin-top: 23px; }
}

@media (max-width: 390px) {
  .auth-stage { padding: 0; }
  .auth-card { width: 100%; min-height: 100svh; grid-template-rows: 178px 1fr; border: 0; }
  .auth-brand-panel { min-height: 178px; }
  .auth-brand-illustration { right: -13px; width: 166px; height: 190px; }
  .auth-form-panel { padding-right: 20px; padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card, .auth-form-content { animation: none; }
  .auth-control, .auth-password-toggle, .auth-submit, .auth-branch { transition: none; }
  .auth-submit:hover, .auth-branch:hover { transform: none; }
}