.login-page{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:1rem;
    background:
        linear-gradient(135deg, rgba(0,0,0,.28), rgba(255,255,255,.08)),
        radial-gradient(circle at 20% 20%, rgba(255,138,0,.22), transparent 32%),
        var(--color-menu,#06285f);
}

.login-shell{
    display:grid;
    grid-template-columns:minmax(280px, 1fr) 390px;
    width:min(920px, 100%);
    min-height:520px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:8px;
    background:#fff;
    box-shadow:0 18px 42px rgba(6,40,95,.28);
}

.login-brand-panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:2rem;
    background:#f8fafc;
}

.login-brand-card{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:300px;
    padding:1.25rem;
    border:1px solid #dbe5ef;
    border-radius:8px;
    background:#fff;
}

.login-brand-card img{
    max-width:100%;
    max-height:310px;
    object-fit:contain;
}

.login-brand-copy{
    margin-top:1.25rem;
}

.login-brand-copy h1{
    margin:0;
    color:#17324d;
    font-size:1.2rem;
    font-weight:700;
}

.login-brand-copy p{
    margin:.35rem 0 0;
    color:#6b7f93;
    font-size:.78rem;
}

.login-box{
    display:flex;
    align-items:center;
    width:100%;
    padding:2rem;
    background:#fff;
}

.login-card{
    width:100%;
}

.login-card-header{
    display:flex;
    align-items:center;
    margin-bottom:1.4rem;
}

.login-card-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-right:.75rem;
    border-radius:6px;
    background:#e7f2fb;
    color:#0b72c5;
    font-size:1.15rem;
}

.login-card-header h2{
    margin:0;
    color:#17324d;
    font-size:1.15rem;
    font-weight:700;
}

.login-card-header p{
    margin:.25rem 0 0;
    color:#6b7f93;
    font-size:.75rem;
}

.login-card-body{
    color:#334e68;
}

.login-field{
    margin-bottom:1rem;
}

.login-field label{
    display:block;
    margin-bottom:.35rem;
    color:#52697f;
    font-size:.72rem;
    font-weight:700;
}

.login-input-icon{
    min-width:42px;
    border-color:#cbd8e6;
    background:#f7f9fc;
    color:#6b7f93;
}

.login-input{
    height:42px;
    border-color:#cbd8e6;
    color:#334e68;
    font-size:.8rem;
}

.login-input:focus{
    border-color:#0b72c5;
    box-shadow:0 0 0 .15rem rgba(11,114,197,.12);
}

.login-error{
    padding:.55rem .7rem;
    border-radius:4px;
    font-size:.76rem;
}

.login-button{
    height:42px;
    margin-top:.25rem;
    border-color:#0b72c5;
    border-radius:5px;
    background:#0b72c5;
    font-size:.8rem;
    font-weight:700;
}

.login-button:hover,.login-button:focus{
    border-color:#075fa8;
    background:#075fa8;
    box-shadow:0 0 0 .15rem rgba(11,114,197,.16);
}

@media (max-width:767.98px){
    .login-page{align-items:flex-start;padding:.75rem;background:#f4f7fb}
    .login-shell{grid-template-columns:1fr;min-height:0;border-radius:6px}
    .login-brand-panel{padding:1rem}
    .login-brand-card{min-height:150px;padding:.8rem}
    .login-brand-card img{max-height:150px}
    .login-brand-copy{display:none}
    .login-box{padding:1.25rem}
}