* { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { color-scheme: light dark; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--background); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: var(--body-large-size); line-height: var(--body-large-line); -webkit-font-smoothing: antialiased; }
.brand { padding: var(--space-2xl) var(--space-xl); }
.brand a { display: block; width: 220px; max-width: 100%; }
.brand img { display: block; max-width: 100%; object-fit: contain; }
main { width: 100%; max-width: 480px; padding: var(--space-3xl) var(--space-xl); margin: auto; outline: none; }
.eyebrow { display: flex; align-items: center; gap: var(--space-xs); color: var(--accent-text); font-size: var(--metadata-size); line-height: var(--metadata-line); font-weight: var(--metadata-weight); margin-bottom: var(--space-md); }
h1 { margin: 0 0 var(--space-sm); font-size: var(--display-size); line-height: var(--display-line); font-weight: var(--display-weight); letter-spacing: -.6px; }
p { margin: 0; }
.description { color: var(--text-muted); margin-bottom: var(--space-2xl); overflow-wrap: anywhere; }
form { display: grid; gap: var(--space-xl); }
.field { display: grid; gap: var(--space-xs); }
label { font-size: var(--form-label-size); line-height: var(--form-label-line); font-weight: var(--form-label-weight); }
input,button,a { -webkit-tap-highlight-color: transparent; }
input { display: block; width: 100%; min-width: 0; min-height: 48px; padding: var(--space-sm) var(--space-md); color: var(--text); background: var(--input-background); border: 1px solid var(--input-border); border-radius: var(--field-radius); font: inherit; font-size: max(16px, var(--body-large-size)); }
input::placeholder { color: var(--text-muted); }
.password-control { position: relative; }
.password-control input { padding-inline-end: 80px; }
.reveal { position: absolute; inset-inline-end: var(--space-xxs); top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 64px; border: 0; background: transparent; color: var(--accent-text); border-radius: var(--field-radius); font: inherit; font-size: var(--body-size); font-weight: var(--button-weight); cursor: pointer; }
.hint,.security-note { font-size: var(--body-small-size); line-height: var(--body-small-line); color: var(--text-muted); }
.hint { margin-top: var(--space-xxs); }
.security-note { padding-top: var(--space-xl); margin-top: var(--space-2xl); border-top: 1px solid var(--border); }
.primary { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); background: var(--accent-fill); color: var(--text-on-accent); border: 1px solid var(--accent-fill); border-radius: var(--control-radius); font: inherit; font-size: var(--button-size); line-height: var(--button-line); font-weight: var(--button-weight); text-align: center; text-decoration: none; cursor: pointer; }
.primary:hover:not(:disabled) { filter: brightness(.94); }
:is(input,button,a):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
input[aria-invalid=true] { border-color: var(--danger); }
button:disabled,input:disabled { opacity: .55; cursor: default; }
.error { color: var(--danger); background: var(--danger-soft); padding: var(--space-md); border-radius: var(--control-radius); margin-bottom: var(--space-xl); font-size: var(--body-size); line-height: var(--body-line); }
.status:empty { display: none; }
.status { color: var(--text-muted); margin-bottom: var(--space-xl); }
.success { display: grid; gap: var(--space-xl); }
.success>svg { color: var(--success); }
footer { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); padding: var(--space-xl); color: var(--text-muted); font-size: var(--metadata-size); line-height: var(--metadata-line); }
footer a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-color-scheme: dark) { .brand img { background: #fff; border-radius: var(--control-radius); padding: var(--space-xs); } }
@media (max-width: 480px) { .brand { padding: var(--space-xl); } main { padding-top: var(--space-xl); padding-bottom: var(--space-3xl); } }
@media (prefers-reduced-motion: no-preference) { button,a,input { transition: background-color .15s, border-color .15s; } }