body.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1.25rem;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: system-ui, sans-serif;
}

.auth-card {
    width: min(100%, 28rem);
    padding: 2rem;
    border: 1px solid var(--ui-border);
    border-radius: 1rem;
    background: var(--ui-surface);
    box-shadow: 0 1rem 2rem rgb(15 23 42 / 10%);
}

.auth-card h1 { margin-top: 0; }
.auth-field { margin-block: 1rem; }
.auth-field label { display: block; margin-bottom: .4rem; font-weight: 600; }
.auth-field input { width: 100%; box-sizing: border-box; padding: .75rem; border: 1px solid var(--ui-border); border-radius: .5rem; background: var(--ui-input-bg); color: var(--ui-input-text); }
.auth-field input:focus { border-color: var(--ui-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 25%, transparent); outline: none; }
.auth-button { width: 100%; padding: .8rem; border: 0; border-radius: .5rem; background: var(--ui-primary); color: var(--ui-surface); font-weight: 700; cursor: pointer; }
.auth-button:hover { background: var(--ui-primary-hover); }
.auth-message { padding: .8rem; border: 1px solid var(--ui-border); border-radius: .5rem; background: var(--ui-surface); color: var(--ui-text); }
.auth-links { margin-top: 1rem; text-align: center; color: var(--ui-muted); }
.auth-links a { color: var(--ui-primary); }