@use '../abstracts/variables' as *;

.auth-page {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 $space-4;
    background: var(--color-page-bg);
}

.auth-page__glow {
    pointer-events: none;
    position: absolute;
    top: -8rem;
    left: 50%;
    transform: translateX(-50%);
    height: 20rem;
    width: 36rem;
    border-radius: $radius-full;
    background: var(--gradient-glow);
    filter: blur(64px);
}

.auth-card {
    position: relative;
    width: 100%;
    max-width: $auth-card-width;
    border-radius: $radius-2xl;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: $space-8;
    box-shadow: var(--shadow-elevated);
}

.auth-card--wide {
    max-width: 28rem;
}

.auth-card__logo {
    height: 2.25rem;
    width: auto;
    object-fit: contain;
}

.auth-card__title {
    margin-top: $space-4;
    font-size: $font-xl;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.auth-card__subtitle {
    margin-top: $space-1;
    font-size: $font-sm;
    color: var(--color-text-secondary);
}

.auth-card__form {
    margin-top: $space-6;
    display: flex;
    flex-direction: column;
    gap: $space-4;
}

.auth-card__footer {
    margin-top: $space-5;
    text-align: center;
    font-size: $font-sm;
    color: var(--color-text-secondary);
}

.auth-card__banner {
    margin-top: $space-4;
    border-radius: $radius-xl;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    padding: $space-3;
    font-size: $font-sm;
    color: var(--color-text-secondary);
}

.auth-card__hint {
    margin-top: $space-2;
    text-align: center;
    font-size: $font-xs;
    color: var(--color-text-muted);
}

.auth-card__scopes {
    margin-top: $space-4;
    display: flex;
    flex-direction: column;
    gap: $space-2;
    border-radius: $radius-xl;
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    padding: $space-3;
}

.auth-card__scope {
    display: flex;
    gap: $space-2;
    font-size: $font-sm;
    color: var(--color-text-secondary);
}

.auth-card__scope-check {
    color: var(--color-accent-strong);
}

.auth-card__actions {
    margin-top: $space-6;
    display: flex;
    gap: $space-3;

    form {
        flex: 1;
    }
}