.register-page {
    --register-page-bg: var(--ui-register-page-bg, var(--color-bg));
    --register-card-max-width: var(--ui-register-card-max-width, 28rem);
    --register-card-padding: var(--ui-register-card-padding, calc(var(--spacing) * 4));
    --register-button-height: var(--ui-register-button-height, 3.25rem);
    --register-message-size: var(--ui-register-message-size, 1rem);
    --register-gap: var(--ui-register-gap, calc(var(--spacing) * 3));

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--spacing) * 6) calc(var(--spacing) * 3);
    font-family: var(--font-sans-base);
    background: var(--register-page-bg);
}

.register-layout {
    width: 100%;
    max-width: var(--register-card-max-width);
    margin-inline: auto;
}

.register-card {
    width: 100%;
    padding: var(--register-card-padding);
}

.register-section {
    display: flex;
    flex-direction: column;
    gap: var(--register-gap);
}

.register-message {
    margin: 0;
    text-align: center;
    font-size: var(--register-message-size);
    font-weight: 600;
    color: var(--color-text);
}

.register-action {
    min-height: var(--register-button-height);
}