/* auth.css — the signed-out screen: sign in.
   Every colour is a token, so both palettes follow without a dark block of
   its own. The wash behind the card is built from the accent's own soft tint
   fading to transparent, which keeps it a token too. */

.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);background-image:radial-gradient(1100px 520px at 50% -12%,var(--accent-soft),transparent)}
.auth-wrap{width:100%;max-width:380px;display:flex;flex-direction:column;align-items:center;gap:22px}

/* --- the mark above the card -------------------------------------------- */
.auth-brand{display:flex;align-items:center;gap:11px}
.auth-brand .mark{width:34px;height:34px;border-radius:var(--r-md);background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;box-shadow:var(--btn-glow)}
.auth-brand .name{font-size:18px;font-weight:600;letter-spacing:-.025em}

/* --- the card ------------------------------------------------------------ */
.auth-card{width:100%;padding:28px;border-radius:var(--r-2xl);box-shadow:var(--shadow-sm)}
.auth-title{font-size:20px;font-weight:600;margin:0;letter-spacing:-.028em}
.auth-sub{font-size:13.5px;color:var(--muted);margin-top:7px;line-height:1.45;overflow-wrap:anywhere}
.auth-form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.auth-submit{width:100%;margin-top:4px;height:44px;font-size:15px;border-radius:var(--r-md)}