/* Layout: center the auth stack and make panels equal width */
.page-grid {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    box-sizing: border-box;
}

/* Primary container when used (keeps previous grid-compatible markup working) */
.auth-container {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
}

    /* Backwards-compat: if signin-panels are direct children of .page-grid (no .auth-container),
   make them centered and equal width */
    .page-grid > .signin-panel,
    .auth-container > .signin-panel {
        width: 100%;
        max-width: 560px;
        box-sizing: border-box;
    }

/* Branding panel (keeps original visual style) */
.branding-panel {
    border-radius: 10px;
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(180deg, #0f172a 0%, #1e40af 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: start;
}

    .branding-panel .brand-logo-wrap {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

.brand-logo {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(2,6,23,0.35);
    border: 1px solid rgba(255,255,255,0.08);
}

.brand-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.brand-sub {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
}

.brand-desc {
    margin-top: 0.5rem;
    color: rgba(255,255,255,0.75);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Sign-in panel (card) */
.signin-panel {
    background: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid #e6e6e6;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);
}

    /* Ensure buttons/inputs stretch to the panel width */
    .signin-panel .form-control,
    .signin-panel .btn,
    .signin-panel .social-btn {
        width: 100%;
    }

/* Social button */
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border: 1px solid #dfe1e5;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

    .social-btn:hover {
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

.google-mark {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

/* Divider */
.divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

    .divider hr {
        flex: 1;
        border: none;
        height: 1px;
        background: #e6e6e6;
    }

.or {
    font-size: 0.9rem;
    font-weight: bolder;
}

/* Form layout */
.form-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
}

/* Small tweaks */
h3 {
    margin: 0 0 0.75rem 0;
}

/* Responsive: keep centered on narrow screens */
@media (max-width: 760px) {
    .page-grid {
        padding: 1.25rem;
    }

        .page-grid > .signin-panel,
        .auth-container > .signin-panel {
            max-width: 100%;
        }
}