body { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; font-family: var(--font-ui); color: var(--color-navy); background: var(--color-surface-soft); }
.account-access { width: min(440px, 100%); padding: clamp(24px, 5vw, 40px); box-sizing: border-box; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); }
.account-access-brand img { width: 130px; height: auto; display: block; margin-bottom: 32px; }
.account-access h1 { font: 600 30px/1.15 var(--font-heading); letter-spacing: -.04em; margin: 0 0 16px; }
.account-access p { font-size: 13px; line-height: 1.65; color: var(--color-muted); }
.account-access form { display: grid; gap: 18px; margin: 24px 0 16px; }
.account-access form[hidden], .account-access label[hidden] { display: none; }
.account-access label { display: grid; gap: 8px; font-size: 13px; }
.account-access input { min-width: 0; width: 100%; box-sizing: border-box; min-height: 46px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-navy); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; }
.account-access button { min-height: 46px; border: 0; border-radius: 10px; padding: 12px 18px; font: 600 13px var(--font-ui); color: white; background: var(--color-primary); cursor: pointer; }
.account-access button:disabled { opacity: .6; cursor: not-allowed; }
.account-access-link { display: block; color: var(--color-primary); font-size: 12px; margin-top: 16px; }
.account-access :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
#account-access-status { overflow-wrap: anywhere; }