.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: var(--ca-space-5);
    background:
        radial-gradient(circle at top left, rgba(47,111,181,.12), transparent 32%),
        var(--ca-bg);
}

.auth-card {
    width: min(100%, 480px);
    background: var(--ca-surface);
    border: 1px solid var(--ca-border);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-md);
    padding: var(--ca-space-8);
}

.auth-card h1 {
    margin: 0 0 var(--ca-space-2);
    font-size: 1.85rem;
}

.auth-card p {
    margin-top: 0;
    color: var(--ca-text-soft);
}

.auth-brand {
    margin-bottom: var(--ca-space-8);
}

.form-grid {
    display: grid;
    gap: var(--ca-space-4);
    margin-top: var(--ca-space-6);
}

.form-field {
    display: grid;
    gap: var(--ca-space-2);
}

.form-field label {
    font-size: .88rem;
    font-weight: 700;
}

.form-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    border: 1px solid var(--ca-border);
    border-radius: 10px;
    background: var(--ca-surface);
    color: var(--ca-text);
}

.form-error {
    margin-top: var(--ca-space-4);
    padding: var(--ca-space-3) var(--ca-space-4);
    border: 1px solid rgba(182,59,59,.2);
    border-radius: var(--ca-radius-sm);
    background: rgba(182,59,59,.08);
    color: var(--ca-danger);
}

.auth-actions {
    margin-top: var(--ca-space-6);
}

.auth-actions .button {
    width: 100%;
}

.auth-meta {
    margin-top: var(--ca-space-5);
    color: var(--ca-text-soft);
    font-size: .82rem;
    text-align: center;
}

@media (max-width: 640px) {
    .auth-card {
        padding: var(--ca-space-5);
    }
}