:root{font-family:var(--font-family);color:var(--color-ink);background:var(--color-cream)}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;display:grid;place-items:center;align-content:center;padding:var(--space-5) var(--space-3);background:var(--color-cream);color:var(--color-ink);font:var(--type-body)/1.5 var(--font-family)}
.auth-card{width:min(520px,100%);min-width:0;padding:clamp(var(--space-5),5vw,var(--space-7));border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-paper);box-shadow:var(--shadow-card)}
.auth-brand{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-5);color:var(--color-ink);font-size:var(--type-title);font-weight:700;letter-spacing:-.04em;line-height:1.2}
.auth-brand-mark{width:28px;height:28px;flex:none;display:grid;place-content:center;gap:2px;border-radius:50%;background:var(--color-brick)}
.auth-brand-mark i{display:block;width:12px;height:2px;background:var(--color-paper)}
.auth-intro{margin:0 0 var(--space-5);color:var(--color-muted);font-size:var(--type-body);line-height:1.55}
.auth-widget{width:100%;max-width:100%;min-width:0}
.auth-card .crate-clerk-root,.auth-card .crate-clerk-card,.auth-card .cl-rootBox,.auth-card .cl-cardBox,.auth-card .cl-card{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.auth-card .crate-clerk-card{box-shadow:none}
.auth-error{margin:0;color:var(--color-brick-dark);font-size:var(--type-meta)}
.auth-error:not(:empty){margin-top:var(--space-2)}
.auth-retry{min-height:48px;margin-top:var(--space-3);padding:0 var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink);font:inherit;font-weight:600;cursor:pointer}
.setup-card h1{margin:0 0 var(--space-2);font-size:var(--type-page);letter-spacing:-.04em;line-height:1.1}
.setup-card p{max-width:52ch;margin:0 0 var(--space-4);color:var(--color-muted)}
.setup-card form{display:grid;gap:var(--space-3);margin-top:var(--space-5)}
.setup-card label{font-size:var(--type-ui);font-weight:600}
.setup-card input,.setup-card button{width:100%;min-height:48px;padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-paper);color:var(--color-ink);font:inherit}
.setup-card button{border-color:var(--color-brick);background:var(--color-brick);color:#fff;font-weight:700;cursor:pointer}
.setup-card button:hover{background:var(--color-brick-dark)}
.setup-card #message{min-height:1.5em;color:var(--color-brick-dark);font-size:var(--type-meta)}
.setup-card #message:empty{display:none}
.setup-card #signOut{display:inline-flex;min-height:48px;align-items:center;margin-top:var(--space-2);color:var(--color-brick);text-underline-offset:3px}
.login-card h1{margin:0 0 var(--space-2);font-size:var(--type-page);letter-spacing:-.04em;line-height:1.1}
.login-card .auth-intro{margin:0 0 var(--space-5);color:var(--color-muted);font-size:var(--type-body);line-height:1.55}
.login-card form{display:grid;gap:var(--space-3);margin:0}
.login-card label{display:grid;gap:var(--space-2);font-size:var(--type-ui);font-weight:600}
.login-card input,.login-card button{width:100%;min-width:0;min-height:48px;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-paper);color:var(--color-ink);font:inherit}
.login-card input{font-size:var(--type-body)}
.login-card button{border-color:var(--color-brick);border-radius:var(--radius-pill);background:var(--color-brick);color:#fff;font-weight:700;cursor:pointer}
.login-card button:hover{background:var(--color-brick-dark)}
:focus-visible{outline:3px solid var(--color-brick);outline-offset:3px}
@media(max-width:420px){body{padding:var(--space-4) var(--space-3)}.auth-card{padding:var(--space-5)}}