* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #f5f6f7; font: 16px/1.5 'Source Sans Pro', system-ui, sans-serif; }
button, input { font: inherit; }
.auth-shell { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 430px; padding: 38px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 45px #1d1d1b06; }
.auth-brand { margin-bottom: 38px; }
.auth-brand img { display: block; max-width: 100%; height: auto; }
.auth-brand span { display: block; margin-top: 12px; color: var(--muted); font-size: 11px; letter-spacing: 3px; }
h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.2; letter-spacing: -.6px; }
.auth-intro { margin: 0 0 27px; color: var(--muted); font-size: 15px; }
.auth-form { display: flex; flex-direction: column; }
.auth-form label { margin-bottom: 7px; font-size: 14px; font-weight: 700; }
.auth-form input { min-width: 0; width: 100%; min-height: 46px; border: 1px solid #d9dcdf; border-radius: 7px; padding: 10px 12px; margin-bottom: 20px; color: var(--ink); background: #fff; }
input:focus-visible, button:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.auth-submit { display: flex; justify-content: space-between; align-items: center; min-height: 46px; margin-top: 5px; border: 0; border-radius: 7px; padding: 11px 15px; background: var(--brand); color: white; font-weight: 700; cursor: pointer; }
.auth-submit:hover { background: var(--brand-hover); }
.auth-note { margin: 24px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.auth-error { margin-bottom: 24px; padding: 12px 14px; border: 1px solid #efc6d1; border-radius: 7px; background: var(--brand-soft); color: #8d1034; font-size: 14px; }
.auth-error p { margin: 0; }
.auth-error p + p { margin-top: 5px; }
.auth-account { margin: 0 0 25px; padding: 12px 14px; background: #f5f6f7; border-radius: 7px; font-weight: 700; }
.auth-account span { display: block; color: var(--muted); font-size: 13px; font-weight: 400; }
.auth-footer { color: var(--muted); font-size: 12px; margin: 23px 0 0; }
.auth-logout { margin-top: 22px; text-align: center; }
.auth-logout button { background: none; border: 0; color: var(--muted); padding: 8px 15px; cursor: pointer; }
@media (max-width: 480px) { .auth-shell { padding: 20px 16px; } .auth-card { padding: 28px 23px; } h1 { font-size: 26px; } }