:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #15243a;
  background: #fbfcfd;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body.login-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: #fbfcfd;
}

.login-card {
  width: min(576px, 100%);
  min-height: 578px;
  padding: 36px 46px 46px;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(27 43 62 / 5%);
  transform: translateY(13px);
}

.login-brand {
  display: block;
  width: 252px;
  height: 158px;
  object-fit: contain;
  margin: 0 auto 3px;
  transform: translateY(-25px);
}

.login-heading-group { text-align: center; margin-bottom: 32px; }
.login-heading-group h1 { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -.035em; }
.login-heading-group p { margin: 7px 0 0; color: #748197; font-size: 15px; line-height: 1.5; }

.login-field { display: grid; gap: 5px; margin-bottom: 18px; }
.login-field label { color: #17243a; font-size: 14px; font-weight: 500; }
.login-input-wrap { position: relative; display: flex; align-items: center; height: 52px; border: 1px solid #d2dae4; border-radius: 8px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.login-input-wrap:focus-within { border-color: #879bb4; box-shadow: 0 0 0 3px rgb(40 67 98 / 11%); }
.login-input-wrap input { width: 100%; height: 100%; min-width: 0; padding: 0 44px 0 48px; border: 0; outline: 0; border-radius: inherit; color: #18283e; background: transparent; font: inherit; font-size: 15px; }
.login-input-wrap input::placeholder { color: #8290a3; opacity: 1; }
.field-icon { position: absolute; left: 16px; width: 17px; height: 17px; fill: none; stroke: #60718a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.visibility-button { position: absolute; right: 9px; display: grid; place-items: center; width: 31px; height: 34px; border: 0; border-radius: 5px; background: transparent; color: #65758b; cursor: pointer; }
.visibility-button:hover { background: #f3f6f9; }
.visibility-button:focus-visible, .login-submit:focus-visible { outline: 3px solid #6f88a6; outline-offset: 2px; }
.eye-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.visibility-button[aria-pressed="true"] .eye-slash { display: none; }

.login-submit { display: flex; justify-content: center; align-items: center; gap: 9px; width: 100%; height: 50px; margin-top: 21px; border: 1px solid #e84826; border-radius: 8px; background: linear-gradient(100deg, #f04420, #e93c1c); color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: filter .15s ease, transform .15s ease; }
.login-submit:hover { filter: brightness(.97); }
.login-submit:active { transform: translateY(1px); }
.login-submit:disabled { cursor: wait; opacity: .88; }
.login-submit-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / 45%); border-top-color: #fff; border-radius: 50%; animation: login-spin .7s linear infinite; }
.login-submit[aria-busy="true"] .login-submit-spinner { display: inline-block; }
.login-error { margin: -15px 0 18px; color: #a42e20; font-size: 14px; text-align: center; }

@keyframes login-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  body.login-page { padding: 20px 16px; }
  .login-card { min-height: 0; padding: 28px 24px 30px; transform: none; }
  .login-brand { width: min(220px, 75vw); height: auto; margin-bottom: 29px; transform: none; }
  .login-heading-group { margin-bottom: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}