:root { font: 100%/1.5 var(--aui-font-family); font-optical-sizing: auto; color: var(--aui-text-primary); background: var(--aui-bg-app); }
:root[data-aui-theme="light"] { color-scheme: light; }
:root[data-aui-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 2rem 1.5rem; }
main { width: min(100%, 22rem); }
header { margin-bottom: 2rem; }
.brand-mark { display: block; width: 2.8125rem; height: 2.5rem; margin-bottom: 1.25rem; }
h1 { margin: 0; font-size: 1.75rem; line-height: 1.25; letter-spacing: -.025em; font-weight: 650; }
label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; color: var(--aui-text-primary); }
input { width: 100%; min-height: 2.75rem; padding: .6875rem .75rem; border: 1px solid var(--aui-control-border-hover); border-radius: var(--aui-radius-sm); color: var(--aui-text-primary); background: var(--aui-control-bg); font: inherit; outline: none; transition: border-color var(--aui-motion-fast), background var(--aui-motion-fast), box-shadow var(--aui-motion-fast); }
input::placeholder { color: var(--aui-text-secondary); }
input:hover { border-color: var(--aui-control-border-active); }
input:focus { border-color: var(--aui-control-border-active); background: var(--aui-control-bg-active); }
input:focus-visible { box-shadow: var(--aui-control-keyboard-ring); }
input[aria-invalid="true"] { border-color: var(--aui-danger); background: var(--aui-control-bg-danger); }
input[aria-invalid="true"]:focus-visible { box-shadow: var(--aui-control-danger-ring); }
.hint { margin: .625rem 0 1.5rem; color: var(--aui-text-secondary); font-size: .8125rem; line-height: 1.6; }
button { display: block; width: 100%; min-height: 2.75rem; padding: .6875rem 1rem; border: 1px solid transparent; border-radius: var(--aui-radius-sm); background: var(--aui-accent); color: var(--aui-text-inverse); font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; transition: background var(--aui-motion-fast), opacity var(--aui-motion-fast), transform var(--aui-motion-fast) var(--aui-ease-standard); }
button:hover:not(:disabled) { background: var(--aui-accent-strong); }
button:active:not(:disabled) { transform: translateY(1px); opacity: .9; transition-duration: 0s; }
button:focus-visible { outline: 2px solid var(--aui-accent); outline-offset: 3px; }
button:disabled { opacity: .65; cursor: wait; }
#status { min-height: 3em; margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--aui-text-secondary); }
#status[data-kind="error"] { color: var(--aui-danger); }
@media (prefers-reduced-motion: reduce) { input, button { transition: none; } button:active:not(:disabled) { transform: none; } }
@media (prefers-contrast: more) { input { border-color: var(--aui-text-secondary); } }