.auth-page { display:flex; flex-direction:column; background:#fff; }
.auth-screen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; width:100%; max-width:1120px; margin:auto; padding:48px 24px; flex:1; }
.auth-introduction { text-align:center; }
.auth-introduction img { display:block; width:100%; max-width:340px; height:auto; margin:0 auto 24px; }
.auth-introduction h2 { font-size:30px; margin-bottom:12px; }
.auth-introduction p { max-width:360px; margin:0 auto 20px; color:var(--folio-muted); }
.auth-explore { display:flex; justify-content:center; flex-wrap:wrap; gap:24px; }
.auth-form-panel { min-width:0; }
.auth-screen .auth-card { border-radius:var(--folio-radius-panel); }
@media(max-width:767px) {
    .auth-screen { grid-template-columns:1fr; gap:28px; padding:28px 20px; }
    .auth-introduction img { max-width:180px; margin-bottom:16px; }
    .auth-introduction h2 { font-size:24px; }
    .auth-form-panel { width:100%; max-width:500px; margin:auto; }
}
.auth-card { width:100%; max-width:500px; padding:32px 24px; border:1px solid var(--folio-line); border-radius:16px; text-align:center; }
.auth-logo { display:block; width:48px; height:48px; margin:0 auto 16px; border-radius:8px; }
.folio .auth-title { margin:0; font-size:28px; line-height:1.2; }
.auth-description { margin:12px 0 24px; color:var(--folio-muted); }
.auth-form { text-align:left; }
.auth-form .form-control { font:inherit; }
.auth-form .folio-field { margin-bottom:16px; }
.auth-error { margin:0 0 16px; color:#a32626; }

/* The modal supplies the panel; reuse the form without a second card border. */
.login-modal .auth-card { max-width:none; border:0; border-radius:0; padding:8px; }
.login-modal { --bs-border-radius-lg:.5rem; }