.social-signin-btns {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
}

.sky-google-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    border-radius: 12px;
    background: var(--fivem-surface-2, #23253d);
    border: 1px solid var(--fivem-line, rgba(109, 131, 159, .22));
    color: var(--fivem-text, #f5f7fb);
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.sky-google-btn:hover,
.sky-google-btn:focus-within {
    background: #2d3050;
    border-color: rgba(158, 179, 204, .45);
    transform: translateY(-1px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
}

.sky-google-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sky-google-btn > span {
    pointer-events: none;
}

.sky-google-btn .g_id_signin,
.sky-google-btn .g_id_signin.btn {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    opacity: .001;
    transform-origin: 0 0;
    overflow: visible;
    z-index: 2;
}

.fivem-auth-form .card-body .social-signin-btns,
.fivem-auth-form .card-body .providerPreLinking {
    margin-top: .75rem;
}

.fivem-signup-card .providerPreLinking {
    margin-bottom: .75rem;
}

.fivem-signup-card .sub-heading {
    display: none;
}

.discord-signin .btn-discord.btn-lg {
    min-height: 48px;
    font-size: 1rem;
}

.fivem-auth-form .discord-signin,
.fivem-signup-card .discord-signin {
    margin-top: 0;
}

.sky-auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 1rem;
    color: var(--fivem-muted, #a7afbf);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sky-auth-divider::before,
.sky-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fivem-line, rgba(109, 131, 159, .22));
}

.card .providerPreLinking[data-link-context="clientsecurity"] .sky-google-btn {
    max-width: 320px;
}

.sky-connected-intro {
    margin-bottom: 1.25rem;
}

.sky-connected-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sky-connected-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--fivem-line, rgba(109, 131, 159, .22));
}

.sky-connected-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 1.35rem;
}

.sky-connected-icon.is-discord {
    background: rgba(88, 101, 242, .15);
    color: #5865f2;
}

.sky-connected-icon.is-google {
    background: rgba(255, 255, 255, .06);
}

.sky-connected-icon svg {
    width: 22px;
    height: 22px;
}

.sky-connected-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sky-connected-info strong {
    color: var(--fivem-text, inherit);
}

.sky-connected-status {
    font-size: .875rem;
    color: var(--fivem-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sky-connected-status.is-on {
    color: var(--fivem-success, #68c5a1);
}

.sky-connected-action form {
    margin: 0;
}

.sky-connected-action .btn {
    white-space: nowrap;
}

@media (max-width: 575px) {
    .sky-connected-row {
        flex-wrap: wrap;
    }

    .sky-connected-action {
        width: 100%;
    }

    .sky-connected-action .btn {
        width: 100%;
    }
}