.login-page-shell{
    position:relative;
    min-height:auto;
    padding:10px 14px 18px;
    background:linear-gradient(180deg,#f7f9fc 0%,#f2f5f9 100%);
}

.login-page-shell::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:140px;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 100%);
}

.login-page-container{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

.login-page-grid,
.login-page-grid.is-single{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) minmax(300px,.82fr);
    gap:14px;
    align-items:start;
}

.login-page-bar{
    position:relative;
    padding:18px 22px 18px;
    margin-bottom:12px;
    border:1px solid #e3e9f1;
    border-radius:24px;
    background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);
    box-shadow:0 14px 28px rgba(16,24,40,.04);
    overflow:hidden;
}

.login-page-bar::after{
    content:"";
    position:absolute;
    left:24px;
    top:0;
    width:84px;
    height:4px;
    border-radius:0 0 10px 10px;
    background:linear-gradient(90deg,#cfd9e6 0%,#9db0c9 100%);
}

.login-page-kicker{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:0 12px;
    margin-bottom:10px;
    border:1px solid #dbe3ec;
    border-radius:999px;
    background:#f8fafc;
    color:#60728c;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.login-page-title{
    margin:0;
    color:#182338;
    font-size:30px;
    line-height:1.02;
    font-weight:800;
    letter-spacing:-.03em;
}

.login-page-subtitle{
    max-width:760px;
    margin:8px 0 0;
    color:#66768a;
    font-size:13px;
    line-height:1.65;
}

.login-card,
.login-side-card{
    background:linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
    border:1px solid #e5ebf2;
    border-radius:24px;
    box-shadow:0 14px 28px rgba(16,24,40,.04);
}

.login-card{
    padding:20px 22px 20px;
}

.login-side-card{
    padding:18px 20px 18px;
}

.login-card-head,
.login-side-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px solid #edf2f6;
}

.login-card-kicker,
.login-side-kicker{
    display:block;
    margin-bottom:5px;
    color:#637590;
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.login-card-title,
.login-side-title{
    margin:0;
    color:#182338;
    font-size:22px;
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.02em;
}

.login-card-subtitle,
.login-side-subtitle{
    margin:8px 0 0;
    color:#6b7b8f;
    font-size:13px;
    line-height:1.58;
}

.login-form-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:10px 14px;
}

.login-col-12{grid-column:span 12;}
.login-field{min-width:0;}

.login-field label{
    display:block;
    margin-bottom:6px;
    color:#223149;
    font-size:12px;
    font-weight:800;
    letter-spacing:.015em;
}

.login-field-control,
.login-submit-btn,
.login-inline-link,
.login-ghost-link,
.login-side-register-btn{
    transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease,transform .16s ease,opacity .2s ease;
}

.login-field-control{
    width:100%;
    height:46px;
    padding:0 14px;
    border:1px solid #d4deea;
    border-radius:14px;
    background:#ffffff;
    color:#182338;
    font-size:14px;
    box-shadow:none;
}

.login-field-control:hover{border-color:#c4d0de;}

.login-field-control:focus{
    border-color:#99aec7;
    box-shadow:0 0 0 4px rgba(99,124,160,.11);
    outline:none;
}

.login-password-wrap{position:relative;}
.login-password-wrap .login-field-control{padding-right:44px;}

.login-password-toggle{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    color:#6d7d92;
    cursor:pointer;
    font-size:14px;
    line-height:1;
}

.login-note-line,
.login-security-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    min-height:42px;
    padding:10px 12px;
    border-radius:14px;
}

.login-note-line{
    border:1px solid #e6ecf3;
    background:linear-gradient(180deg,#fbfcfe 0%,#f7f9fc 100%);
}

.login-note-line-text,
.login-security-note-text{
    color:#627389;
    font-size:11.5px;
    font-weight:700;
    line-height:1.55;
}

.login-note-line-dot{
    width:6px;
    height:6px;
    margin-top:6px;
    border-radius:50%;
    background:#6b809e;
    flex:0 0 auto;
}

.login-security-note{
    border:1px dashed #d5e0ec;
    background:linear-gradient(180deg,#fcfdff 0%,#f8fafc 100%);
}

.login-security-note-icon{
    color:#6a7f9a;
    font-size:13px;
    line-height:1;
    margin-top:1px;
}

.login-action-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:nowrap;
}

.login-ghost-link,
.login-inline-link{
    color:#1f2b44;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.login-ghost-link:hover,
.login-inline-link:hover,
.login-side-register-btn:hover{
    color:#1f2b44;
    text-decoration:none;
    opacity:.86;
}

.login-submit-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:156px;
    min-height:46px;
    padding:0 18px;
    border:1px solid #1f2b44;
    border-radius:14px;
    background:#1f2b44;
    color:#ffffff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.015em;
    box-shadow:0 8px 16px rgba(31,43,68,.1);
}

.login-submit-btn:hover,
.login-submit-btn:focus{
    color:#ffffff;
    text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(31,43,68,.14);
    outline:none;
}

.login-register-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding-top:12px;
    border-top:1px solid #edf2f6;
}

.login-register-cta-text{
    color:#627389;
    font-size:12px;
    font-weight:700;
    line-height:1.55;
}

.login-register-cta-text a{
    color:#1f2b44;
    font-weight:800;
    text-decoration:none;
}

.login-side-card{
    height:100%;
    display:flex;
    flex-direction:column;
}

.login-side-body{
    color:#43536a;
    font-size:13px;
    line-height:1.68;
}

.login-side-body h1,
.login-side-body h2,
.login-side-body h3,
.login-side-body h4,
.login-side-body h5,
.login-side-body h6{
    color:#182338;
    font-weight:800;
    line-height:1.2;
    margin:0 0 10px;
}

.login-side-body p,
.login-side-body ul,
.login-side-body ol{
    margin:0 0 10px;
}

.login-side-body p:last-child,
.login-side-body ul:last-child,
.login-side-body ol:last-child{margin-bottom:0;}

.login-side-body a{
    color:#1f2b44;
    font-weight:700;
    text-decoration:none;
}

.login-side-footer{
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid #edf2f6;
}

.login-side-register-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    border:1px solid #d0dae6;
    border-radius:14px;
    background:#ffffff;
    color:#1f2b44;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.login-side-fallback{
    display:grid;
    gap:10px;
    flex:1 1 auto;
}

.login-side-fallback-item{
    padding:12px 13px;
    border:1px solid #e5ebf3;
    border-radius:14px;
    background:#ffffff;
}

.login-side-fallback-title{
    margin:0 0 4px;
    color:#182338;
    font-size:13px;
    font-weight:800;
}

.login-side-fallback-text{
    margin:0;
    color:#6a7a8f;
    font-size:12px;
    line-height:1.55;
}

.login-status-modal-content{
    border:1px solid #e5ebf2;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 24px 46px rgba(16,24,40,.16);
}

.login-status-modal-content.is-info .login-status-modal-icon,
.login-status-modal-content.is-info .login-status-modal-title{color:#5f7aa2;}
.login-status-modal-content.is-success .login-status-modal-icon,
.login-status-modal-content.is-success .login-status-modal-title{color:#4f9c72;}

.login-status-close{
    position:absolute;
    top:10px;
    right:12px;
    z-index:2;
    color:#6d7d92;
    opacity:1;
}

.login-status-modal-body{
    padding:24px 20px 16px;
    text-align:center;
}

.login-status-modal-icon{display:block;line-height:1;margin-bottom:10px;}

.login-status-modal-title{
    margin-bottom:10px;
    font-size:20px;
    font-weight:800;
    line-height:1.2;
}

.login-status-modal-text{
    color:#5f6f85;
    font-size:14px;
    line-height:1.7;
}

.login-status-modal-footer{padding:0 18px 18px;}

.login-status-modal-btn{
    width:100%;
    min-height:46px;
    border:1px solid #1f2b44;
    border-radius:14px;
    background:#1f2b44;
    color:#ffffff;
    font-size:13px;
    font-weight:800;
}

.login-status-modal-btn:hover,
.login-status-modal-btn:focus{outline:none;opacity:.95;}

@media (max-width: 1199px){
    .login-page-grid,
    .login-page-grid.is-single{grid-template-columns:minmax(0,1fr);}
}

@media (max-width: 767px){
    .login-page-shell{padding:10px 8px 18px;}
    .login-page-bar,
    .login-card,
    .login-side-card{padding:16px 14px 16px;border-radius:18px;}
    .login-page-title{font-size:24px;}
    .login-card-title,
    .login-side-title{font-size:20px;}
    .login-action-row,
    .login-register-cta{align-items:stretch;flex-wrap:wrap;}
    .login-submit-btn,
    .login-side-register-btn{width:100%;min-width:0;}
}