.pro-auth {
    min-width: 280px;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--pro-v2-color-text-primary);
    background: var(--pro-v2-color-app-background);
}

.pro-auth *,
.pro-auth *::before,
.pro-auth *::after {
    box-sizing: border-box;
}

.pro-auth__shell {
    display: grid;
    min-height: 100dvh;
    padding: max(var(--pro-v2-space-6), var(--pro-v2-safe-top))
        max(var(--pro-v2-space-4), var(--pro-v2-safe-right))
        max(var(--pro-v2-space-6), var(--pro-v2-safe-bottom))
        max(var(--pro-v2-space-4), var(--pro-v2-safe-left));
    place-items: center;
}

.pro-auth__content {
    display: grid;
    width: min(100%, 440px);
    gap: var(--pro-v2-space-4);
}

.pro-auth__brand {
    display: inline-flex;
    width: fit-content;
    min-height: var(--pro-v2-touch-min);
    gap: var(--pro-v2-space-1);
    color: var(--pro-v2-color-text-primary);
    font-size: var(--pro-v2-font-label-size);
    font-weight: 700;
    text-decoration: none;
    align-items: center;
}

.pro-auth__brand-mark {
    display: block;
    width: 60px;
    height: 30px;
    flex: 0 0 auto;
    object-fit: contain;
}

.pro-auth__card {
    display: grid;
    gap: var(--pro-v2-space-5);
    padding: clamp(var(--pro-v2-space-6), 7vw, 36px);
}

.pro-auth__header {
    display: grid;
    gap: var(--pro-v2-space-2);
}

.pro-auth__eyebrow {
    margin: 0;
    color: var(--pro-v2-color-accent);
    font-size: var(--pro-v2-font-caption-line);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pro-auth__lead {
    max-width: 38ch;
    margin: 0;
    color: var(--pro-v2-color-text-secondary);
    font-size: var(--pro-v2-font-body-size);
    line-height: var(--pro-v2-font-body-line);
}

.pro-auth__form {
    display: grid;
    gap: var(--pro-v2-space-4);
}

.pro-auth__form .pro-ui-v2__button {
    width: 100%;
}

.pro-auth__choice {
    min-height: var(--pro-v2-touch-min);
    cursor: pointer;
}

.pro-auth__choice input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--pro-v2-color-accent);
}

.pro-auth__submit {
    margin-top: var(--pro-v2-space-1);
}

.pro-auth__secondary {
    margin: 0;
    text-align: center;
}

.pro-auth__secondary .pro-ui-v2__button {
    display: inline-flex;
    width: 100%;
    text-decoration: none;
}

.pro-auth__error {
    display: grid;
    gap: var(--pro-v2-space-1);
    line-height: var(--pro-v2-font-body-line);
}

.pro-auth__identity {
    display: grid;
    gap: var(--pro-v2-space-3);
    margin: 0;
}

.pro-auth__identity div {
    padding: var(--pro-v2-space-3) var(--pro-v2-space-4);
    border: 1px solid var(--pro-v2-color-border);
    border-radius: var(--pro-v2-radius-md);
    background: var(--pro-v2-color-surface-secondary);
}

.pro-auth__identity dt {
    color: var(--pro-v2-color-text-secondary);
    font-size: var(--pro-v2-font-caption-size);
    font-weight: 600;
}

.pro-auth__identity dd {
    margin: var(--pro-v2-space-1) 0 0;
    overflow-wrap: anywhere;
}

.pro-auth :where(a, button, input):focus-visible {
    outline: var(--pro-v2-focus-ring);
    outline-offset: 2px;
}

@media (min-width: 600px) {
    .pro-auth__content {
        gap: var(--pro-v2-space-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pro-auth,
    .pro-auth * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}