:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: #202329;
  background: #f8f9fb;
  --muted: #626872;
  --border: #dfe2e7;
  --accent: #c84b0b;
  --accent-hover: #ae3f08;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 3px solid #b54611; outline-offset: 3px; }

.site-header {
  min-height: 77px;
  display: flex;
  align-items: center;
  padding: 20px max(36px, env(safe-area-inset-right)) 20px max(36px, env(safe-area-inset-left));
  border-bottom: 1px solid #e6e8eb;
  background: #fff;
}
.brand { display: inline-flex; align-items: center; gap: 10px; line-height: 1; }
.brand img { flex: none; }
.brand-name { font-size: 18px; font-weight: 750; letter-spacing: -.6px; }
.brand-product { font-size: 17px; font-weight: 450; color: #5c626c; border-left: 1px solid #d9dce1; margin-left: 3px; padding-left: 13px; }
main { flex: 1; display: grid; place-items: center; padding: 52px 24px 68px; }
.login-card {
  width: min(100%, 424px);
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 5px #18243b04, 0 12px 32px #18243b03;
}
.card-heading { margin-bottom: 30px; }
h1 { margin: 0; font-size: 28px; line-height: 1.25; font-weight: 650; letter-spacing: -.8px; }
.card-heading p { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.field + .field { margin-top: 22px; }
label { display: block; margin-bottom: 9px; font-size: 13px; line-height: 1.4; font-weight: 600; }
input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 10px 13px;
  border: 1px solid #8c949f;
  border-radius: 6px;
  background: #fff;
  color: #202329;
  font-size: 16px; /* Avoid iOS focus zoom while keeping text comfortably readable. */
  line-height: 24px;
  caret-color: var(--accent);
}
input::placeholder { color: #707681; opacity: 1; font-size: 14px; }
input:focus { border-color: #a74416; }
input[aria-invalid="true"] { border-color: #b42318; }
input:read-only { color: #545a64; background-color: #fafafa; }
/* Keep saved credentials readable in Chromium and Safari autofill (WCAG 1.4.3). */
input:-webkit-autofill { -webkit-text-fill-color: #202329; caret-color: #202329; box-shadow: 0 0 0 1000px #fffaf5 inset; }
.password-field { position: relative; }
.password-field input { padding-right: 77px; }
.password-toggle { position: absolute; top: 1px; right: 1px; min-width: 66px; height: 44px; border: 0; border-radius: 5px; padding: 0 11px; background: transparent; color: #5c626c; font-size: 12px; font-weight: 600; cursor: pointer; }
.password-toggle:focus-visible { outline-offset: -4px; }
.form-message { min-height: 43px; margin: 12px 0 8px; font-size: 12px; line-height: 19px; color: #a4261e; overflow-wrap: anywhere; }
.submit-button {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 11px 16px;
  border: 1px solid #b8440b;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 1px 1px #481f0814;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 120ms var(--ease-out);
}
.submit-button[aria-disabled="true"] { cursor: wait; background: #a44111; }
.submit-button[aria-disabled="true"] .submit-arrow { display: none; }
/* Native focus remains on the button during requests; the JS busy guard prevents duplicates. */
.submit-button:active:not([aria-disabled="true"]):not(:focus-visible) { transform: scale(.985); }
.submit-button:focus-visible { transition: none; }
.site-footer { padding: 20px 24px max(26px, env(safe-area-inset-bottom)); text-align: center; color: #6c727d; font-size: 12px; line-height: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.no-script { font-size: 13px; line-height: 20px; color: #a4261e; }

@media (hover: hover) and (pointer: fine) {
  .submit-button:hover:not([aria-disabled="true"]) { background: var(--accent-hover); }
  .password-toggle:hover { color: #252932; background: #f5f6f8; }
}
@media (max-width: 480px) {
  .site-header { min-height: 69px; padding: 18px max(24px, env(safe-area-inset-right)) 18px max(24px, env(safe-area-inset-left)); }
  main { padding: 36px 20px 40px; }
  .login-card { padding: 28px 24px; }
  h1 { font-size: 26px; }
}
@media (max-width: 350px) {
  main { padding-right: 16px; padding-left: 16px; }
  .login-card { padding: 26px 20px; }
}
@media (max-height: 620px) {
  main { place-items: start center; padding-top: 28px; padding-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .submit-button { transition: none; }
  .submit-button:active:not([aria-disabled="true"]):not(:focus-visible) { transform: none; }
}
@media (forced-colors: active) {
  .login-card, input, .submit-button { border-color: CanvasText; }
  button:focus-visible, input:focus-visible { outline-color: Highlight; }
}