:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; background: Canvas; color: CanvasText; }
.auth-shell { width: min(460px, calc(100% - 40px)); margin: 8vh auto; padding: 28px; border: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-radius: 18px; }
.brand { color: inherit; font-weight: 700; text-decoration: none; }
h1 { margin: 28px 0 8px; font-size: 1.8rem; }
p { line-height: 1.5; }
form { display: grid; gap: 10px; margin-top: 24px; }
label { font-weight: 600; }
input:not([type=checkbox]) { width: 100%; min-height: 46px; border: 1px solid color-mix(in srgb, CanvasText 35%, transparent); border-radius: 8px; padding: 10px; background: Canvas; color: inherit; font: inherit; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
button { min-height: 46px; padding: 12px; margin-top: 8px; background: CanvasText; color: Canvas; font: inherit; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
.toggle { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .9rem; }
.hint { font-size: .85rem; margin: 0 0 8px; opacity: .8; }
#auth-status { margin: 0; overflow-wrap: anywhere; }
#auth-status.error { color: light-dark(#a51b1b, #ffacac); }
a { color: LinkText; text-underline-offset: 3px; }
@media(max-width: 480px) { .auth-shell { padding: 20px; margin-top: 5vh; } }