.center-bg {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.center-card {
    background: var(--surface);
    color: var(--on-surface);
    border-radius: var(--radius-xl);
    padding: var(--dimen-xxl);
    min-width: 220px;
    max-width: 420px;
    min-height: 360px;
    width: 100%;
    margin: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.card-logo {
    background: var(--surface-20);
    border-radius: var(--radius-xxxxl);
    padding: var(--dimen-sr) var(--dimen-l) var(--dimen-sr) var(--dimen-m);
    display: flex;
    align-items: center;
    gap: var(--dimen-sr);
}

.card-logo svg {
    width: auto;
    height: auto;
}

/* Developer-console brand lockup: the "Sanas Console" wordmark
   swapped in via the card_logo block. Sized to sit comfortably in the same logo
   pill as the default Sanas mark. */
.card-logo-wordmark {
    height: 28px;
    width: auto;
    max-width: 100%;
    display: block;
}

.card-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--dimen-xxxl);
    flex: 1;
}

.card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dimen-xs);
    width: 100%;
}

.card-header h1 {
    font-size: var(--font-size-xxxl);
    font-weight: var(--font-weight-medium);
    color: var(--on-surface);
    margin: 0;
}

.card-header p {
    color: var(--on-surface);
}