body{ font-family:'DM Sans',sans-serif; background:var(--gray-100); min-height:100vh; display:flex; }
.auth-shell{ display:flex; width:100%; min-height:100vh; }
.auth-brand{
    flex:1; background:var(--ink-dark); color:#fff; display:flex; flex-direction:column;
    justify-content:space-between; padding:48px; position:relative; overflow:hidden;
}
.auth-brand::before{
    content:''; position:absolute; inset:0; background:radial-gradient(600px 400px at 20% 100%, rgba(139,0,0,0.35), transparent 60%);
}
.auth-brand-top{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.auth-logo-icon{ width:40px; height:40px; border-radius:12px; background:var(--primary); display:flex; align-items:center; justify-content:center; font-family:'DM Sans',sans-serif; font-weight:700; font-size:18px; }
.auth-logo-image{ max-height:44px; max-width:220px; object-fit:contain; }
.auth-logo-text{ font-family:'DM Sans',sans-serif; font-weight:700; font-size:21px; }
.auth-logo-text span{ color:var(--accent-light); }
.auth-brand-quote{ position:relative; z-index:1; max-width:380px; }
.auth-brand-quote h2{ font-family:'DM Sans',sans-serif; font-size:28px; line-height:1.3; margin-bottom:14px; }
.auth-brand-quote p{ font-size:13.5px; color:rgba(255,255,255,.6); line-height:1.7; }
.auth-brand-foot{ position:relative; z-index:1; font-size:12px; color:rgba(255,255,255,.4); }
.auth-form-side{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:380px; }
.auth-card h1{ font-size:23px; font-weight:800; margin-bottom:6px; }
.auth-card p.sub{ font-size:13.5px; color:var(--gray-500); margin-bottom:28px; }
.auth-card .btn-admin{ width:100%; justify-content:center; padding:12px; font-size:13.5px; margin-top:6px; }
.auth-links{ display:flex; justify-content:space-between; margin-top:18px; font-size:12.5px; }
.auth-links a{ color:var(--primary); text-decoration:none; font-weight:600; }
.auth-mobile-brand{ display:none; }

/* ≤860px: single column, locked to one screen height, no scrolling. Sizes
   and spacing below are deliberately compact — this has to fit everything
   (logo, heading, two fields, button, links) inside one mobile viewport. */
@media (max-width:860px){
    html, body{ height:100%; }
    body{ overflow:hidden; }
    .auth-shell{ height:100vh; height:100dvh; min-height:0; overflow:hidden; }
    .auth-brand{ display:none; }
    .auth-form-side{ width:100%; padding:20px 24px; }
    .auth-card{ max-width:340px; }
    .auth-card h1{ font-size:20px; margin-bottom:4px; }
    .auth-card p.sub{ font-size:13px; margin-bottom:20px; }
    .auth-mobile-brand{
        display:flex; flex-direction:column; align-items:center; gap:8px;
        margin-bottom:14px; text-align:center;
    }
    .auth-mobile-logo-image{ max-height:84px; max-width:330px; object-fit:contain; }
    .auth-mobile-logo-icon{
        width:52px; height:52px; border-radius:14px; background:var(--primary); color:#fff;
        display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px;
        font-family:'DM Sans',sans-serif;
    }
    .auth-mobile-logo-text{ font-size:17px; font-weight:800; color:var(--ink); font-family:'DM Sans',sans-serif; }
    .form-field{ margin-bottom:12px; }
}