:root {
  color-scheme: light;
  --canvas: #f7f7fc;
  --card: #ffffffed;
  --field: #fafafd;
  --ink: #181824;
  --muted: #777787;
  --line: #e7e7ef;
  --field-border: #e1e1ed;
  --purple: #585bef;
  --accent: #5359e8;
  --hover: #474bdc;
  --tint: #eeedff;
  --error: #b74255;
  --error-bg: #fff2f4;
  --shadow: #24224a0c;
  --halo: #d9d6ff;
  --duration: 440ms;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --canvas: #101014;
    --card: #1b1b24ee;
    --field: #15151e;
    --ink: #f1f1f7;
    --muted: #a6a6b7;
    --line: #30303e;
    --field-border: #383849;
    --accent: #adb0ff;
    --hover: #7376ff;
    --tint: #29293e;
    --error: #ff9caa;
    --error-bg: #36232d;
    --shadow: #00000040;
    --halo: #35315e;
  }
}
* { box-sizing: border-box; }
html { min-width: 0; min-height: 100%; background: var(--canvas); }
body { min-height: 100vh; min-height: 100dvh; margin: 0; display: grid; grid-template-rows: auto 1fr auto; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
body, .login-card, input, button, a, .language-switch, .login-status { transition: background-color var(--duration) ease, color var(--duration) ease, border-color var(--duration) ease, box-shadow var(--duration) ease; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex="-1"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
svg { width: 20px; height: 20px; fill: currentColor; stroke: none; flex-shrink: 0; }
.login-background { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.background-halo { position: absolute; width: min(1000px, 120vw); aspect-ratio: 1; left: 50%; top: 30%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, var(--halo), transparent 66%); opacity: .38; transition: background-color var(--duration); }
.wave { position: absolute; left: -40%; bottom: -84%; width: 180%; height: 125%; border: 1px solid var(--accent); border-radius: 50%; transform: rotate(-13deg); opacity: .07; animation: wave-drift 22s ease-in-out infinite alternate; }
.wave-two { bottom: -79%; left: -31%; width: 166%; opacity: .05; animation-delay: -7s; }
.wave-three { bottom: -74%; left: -28%; width: 164%; opacity: .04; animation-delay: -13s; }
.background-gem { position: absolute; width: 180px; height: 180px; border: 1px solid var(--accent); border-radius: 34px; transform: rotate(45deg); opacity: .055; }
.gem-one { left: calc(50% - 420px); top: 20%; }
.gem-two { right: calc(50% - 445px); bottom: 23%; width: 112px; height: 112px; border-radius: 23px; }
.page-header, main, .page-footer { position: relative; z-index: 1; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 36px; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--muted); }
.back-link:hover { color: var(--accent); }
.back-link svg { width: 17px; height: 17px; }
.language-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.language-switch button { min-width: 43px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; }
.language-switch button[aria-pressed="true"] { color: var(--ink); background: var(--card); box-shadow: 0 1px 5px var(--shadow); }
.language-switch button:hover { color: var(--accent); }
main { display: grid; place-items: center; padding: 20px 24px 46px; }
.login-shell { width: min(100%, 440px); text-align: center; animation: entrance 750ms cubic-bezier(.22,.61,.36,1) both; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; min-height: 44px; font-size: 29px; font-weight: 720; letter-spacing: -1.3px; }
.brand-gem { width: 30px; height: 34px; display: inline-block; position: relative; flex-shrink: 0; filter: drop-shadow(0 3px 3px #696bf024); }
.brand-gem i { position: absolute; inset: 0; display: block; background: var(--purple); clip-path: polygon(22% 12%,78% 12%,100% 40%,50% 100%,0 40%); }
.brand-gem i:nth-child(2) { clip-path: polygon(22% 12%,50% 40%,0 40%); background: #9c91ff; }
.brand-gem i:nth-child(3) { clip-path: polygon(50% 40%,100% 40%,50% 100%); background: #393bd3; }
.login-card { padding: 35px 36px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 23px; box-shadow: 0 18px 70px var(--shadow); backdrop-filter: blur(18px); }
.card-heading { margin-bottom: 31px; }
h1 { font-size: 29px; line-height: 1.25; font-weight: 650; letter-spacing: -1px; margin: 12px 0 11px; }
.card-heading p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
.field-group { text-align: left; }
.field-group + .field-group { margin-top: 20px; }
label { display: block; margin: 0 0 9px; font-size: 12px; line-height: 1.5; font-weight: 600; }
input { width: 100%; min-width: 0; height: 49px; border: 1px solid var(--field-border); border-radius: 10px; padding: 0 14px; background: var(--field); color: var(--ink); font-size: 14px; line-height: 1.5; }
input::placeholder { color: var(--muted); opacity: .7; }
input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--field-border), var(--accent) 30%); }
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
input[aria-invalid="true"] { border-color: var(--error); }
input:disabled { opacity: .65; }
.password-field { position: relative; }
.password-field input { padding-right: 87px; }
.password-toggle { position: absolute; right: 5px; top: 3px; min-width: 73px; min-height: 43px; border: 0; padding: 0 9px; background: transparent; border-radius: 7px; color: var(--muted); font-size: 11px; font-weight: 550; }
.password-toggle:hover:not(:disabled) { color: var(--accent); }
.field-error, .caps-lock { font-size: 11px; line-height: 1.5; margin: 7px 0 0; }
.field-error { color: var(--error); }
.caps-lock { color: var(--muted); }
.form-links { margin: 14px 0 22px; text-align: right; font-size: 11px; }
.form-links a { display: inline-flex; align-items: center; min-height: 24px; color: var(--accent); }
.form-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.submit-button, .passkey-button { width: 100%; min-height: 49px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.submit-button { border: 1px solid transparent; color: #fff; background: var(--purple); box-shadow: 0 3px 8px #585bef12; }
.submit-button:hover:not(:disabled) { background: var(--hover); }
.submit-button:disabled { background: var(--tint); color: var(--muted); box-shadow: none; }
.submit-arrow { width: 17px; height: 17px; }
.button-spinner { display: none; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.submit-button[data-loading="true"] .button-spinner { display: block; }
.submit-button[data-loading="true"] .submit-arrow { display: none; }
.divider { display: flex; align-items: center; gap: 13px; margin: 23px 0; color: var(--muted); font-size: 10px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.passkey-button { border: 1px solid var(--field-border); color: var(--ink); background: transparent; }
.passkey-button:hover:not(:disabled) { background: var(--field); border-color: var(--accent); }
.passkey-button:disabled { opacity: .6; }
.login-status { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; padding: 13px 14px; text-align: left; border: 1px solid var(--field-border); border-radius: 10px; background: var(--field); color: var(--muted); }
.login-status svg { width: 17px; height: 17px; margin-top: 1px; color: var(--accent); }
.login-status p { margin: 0; font-size: 12px; line-height: 1.65; }
.no-script { margin: 20px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.help-line { margin: 23px 0 7px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.help-line a { color: var(--accent); white-space: nowrap; }
.support-email { display: inline-block; padding: 3px 5px; color: var(--muted); font-size: 11px; }
.help-line a:hover, .support-email:hover, .page-footer a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.page-footer { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 0 24px 24px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.page-footer nav { display: flex; gap: 13px; align-items: center; }
.page-footer nav a { padding-block: 6px; }
@keyframes entrance { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wave-drift { from { transform: rotate(-13deg) translateY(0); } to { transform: rotate(-9deg) translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .page-header { padding: 13px 19px; }
  .language-switch button { min-height: 38px; }
  main { padding: 19px 18px 34px; }
  .brand { margin-bottom: 24px; font-size: 27px; }
  .login-card { padding: 29px 24px 26px; border-radius: 20px; }
  .card-heading { margin-bottom: 27px; }
  h1 { font-size: 27px; }
  input { font-size: 16px; }
  .page-footer { gap: 11px; flex-wrap: wrap; padding: 0 18px 20px; font-size: 9px; }
}
@media (max-width: 360px) {
  .login-card { padding-inline: 20px; }
  .card-heading p { font-size: 11px; }
  h1 { font-size: 25px; }
  .help-line { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Keep the complete form comfortably reachable on shorter screens. */
@media (max-height: 820px) {
  .page-header { padding-top: 10px; padding-bottom: 10px; }
  main { padding-top: 10px; padding-bottom: 24px; }
  .brand { margin-bottom: 18px; }
  .login-card { padding-top: 26px; padding-bottom: 24px; }
  .card-heading { margin-bottom: 22px; }
  .field-group + .field-group { margin-top: 16px; }
  .form-links { margin-top: 10px; margin-bottom: 16px; }
  .divider { margin-block: 18px; }
  .help-line { margin-top: 17px; }
  .page-footer { padding-bottom: 14px; }
}