:root {
  color-scheme: light;
  --font-body: -apple-system, system-ui, Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  --text-small: 12px;
  --text-label: 13px;
  --text-body: 14px;
  --text-title: 20px;
  --color-text: rgba(24, 39, 57, 0.94);
  --color-label: rgba(27, 43, 65, 0.69);
  --color-muted: #666;
  --color-background: #f5f5f5;
  --color-card: #edeff2;
  --color-border: #c9cfd7;
  --color-link: #6a1b9a;
  --color-focus: #006bff;
  --color-error: #ca150c;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  font-family: var(--font-body);
  color: var(--color-text);
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, p { margin: 0; }
body {
  font-size: var(--text-body);
  line-height: 1.625;
  background: var(--color-background) radial-gradient(#a1a9b3 1px, transparent 0) 3px 3px / 22px 22px;
}
[hidden] { display: none !important; }
main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.auth-card {
  width: 420px;
  max-width: 100%;
  padding: var(--space-7);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .06);
}
.brand { display: block; width: 280px; max-width: 100%; height: auto; margin: 0 auto var(--space-4); }
h1 { font-size: var(--text-title); font-weight: 700; line-height: 1.175; text-align: center; color: #000; }
.subtitle { margin-top: var(--space-4); text-align: center; color: var(--color-muted); }
form { margin: 0; }
.field { padding-top: var(--space-8); padding-bottom: var(--space-1); }
.field + .field { margin-top: var(--space-4); padding-top: var(--space-4); }
.field label { display: block; font-size: var(--text-label); font-weight: 500; line-height: 19.5px; color: var(--color-label); }
.required { color: var(--color-focus); }
.input-wrap { display: flex; align-items: center; height: 38px; border: 1px solid var(--color-border); border-radius: 5px; background: #fff; }
input, button { font: inherit; }
.input-wrap input { width: 100%; min-width: 0; height: 36px; border: 0; outline: none; padding: 0 var(--space-2); border-radius: inherit; background: transparent; color: #000; }
input::placeholder { color: #65758b; opacity: 1; }
.input-wrap:focus-within { box-shadow: 0 0 0 2px #408bff; }
.field:focus-within label { color: var(--color-focus); }
.field:has([aria-invalid="true"]) .input-wrap { background: #fff4f3; border-color: var(--color-error); }
.field:has([aria-invalid="true"]) label { color: var(--color-error); }
.field-error { color: var(--color-error); font-size: var(--text-small); line-height: 15px; padding-top: var(--space-1); }
button, a, input[type="checkbox"] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .65; }
.reveal-password { display: grid; place-items: center; flex: 0 0 30px; padding: 0; height: 34px; border: 0; background: transparent; border-radius: 4px; }
.reveal-password img { width: 20px; height: 20px; }
.reveal-password[aria-pressed="true"] { background: #edf1f8; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); height: 28px; }
.remember { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; white-space: nowrap; }
.remember input { width: 20px; height: 20px; margin: var(--space-1); accent-color: var(--color-focus); }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
.primary-button { display: block; width: 100%; height: 36px; padding: 0 var(--space-4); color: #fff; font-weight: 500; border: 1px solid transparent; border-radius: 50px; background: linear-gradient(90deg, #6a1b9a 0%, #283593 50%, #01579b 100%); }
#login-form > .primary-button { margin-top: var(--space-7); }
.primary-button:hover { filter: brightness(1.08); }
.divider { display: flex; align-items: center; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-label); line-height: 21px; margin-top: var(--space-5); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #d5dce5; }
.divider span { white-space: nowrap; padding-inline: var(--space-2); }
.social-buttons { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-5); padding-bottom: var(--space-1); }
.social-button { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; height: 36px; border: 1px solid var(--color-border); border-radius: 5px; color: #000; background: #fff; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(28, 55, 90, .16); }
.social-button img { display: block; width: 20px; height: 20px; }
.social-button:hover { background: #f8f9fb; }
.login-error { position: relative; margin: var(--space-8) 10px var(--space-2); padding: var(--space-4) var(--space-4) var(--space-4) 36px; background: rgba(231, 29, 19, .1); border-radius: 3.5px; color: var(--color-error); }
.login-error h2 { font-size: var(--text-body); font-weight: 600; line-height: 17.5px; margin-bottom: 3.5px; }
.login-error p { font-size: var(--text-label); line-height: 17.875px; }
.error-icon { position: absolute; left: var(--space-3); top: var(--space-4); width: 16px; height: 16px; border-radius: 50%; background: var(--color-error); color: #fff; font-weight: 700; text-align: center; line-height: 16px; }
#reset-form > .primary-button { margin-top: var(--space-5); }
.back-link { display: block; margin-top: var(--space-7); }
.back-link span { margin-right: var(--space-1); }
dialog { width: 460px; max-width: calc(100% - 32px); padding: var(--space-6); color: var(--color-text); background: #fff; border: 1px solid var(--color-border); border-radius: 8px; box-shadow: 0 8px 30px #0003; }
dialog::backdrop { background: #17253655; }
dialog h2 { font-size: var(--text-title); line-height: 1.3; margin-bottom: var(--space-4); }
dialog .primary-button { width: auto; min-width: 80px; margin: var(--space-6) 0 0 auto; }
.noscript-message { color: var(--color-error); margin-top: var(--space-4); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.input-wrap input:focus-visible { outline: none; }
@media (max-width: 450px) {
  .auth-card { padding: var(--space-6) var(--space-5); }
  .login-options { font-size: var(--text-label); }
  .remember { gap: var(--space-1); }
}
@media (prefers-reduced-motion: no-preference) {
  button, a { transition: background-color 120ms, box-shadow 120ms; }
}