:root{
    --navy:#161A3D;
    --navy-soft:#1E2350;
    --accent:#5B4CDB;
    --accent-hover:#4C3EC7;
    --bg:#F4F5FA;
    --text:#1F2138;
    --muted:#8A8DA6;
    --border:#E4E5F1;
    --danger:#E03B3B;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family:'Inter',sans-serif;
    background:var(--bg);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--text);
}

.login-page{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}

.wrap{
    display:flex;
    width:920px;
    max-width:95%;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(22,26,61,0.12);
}

.brand{
    flex:0 0 42%;
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy-soft) 100%);
    color:#fff;
    padding:48px 36px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}
.brand::after{
    content:"";
    position:absolute;
    width:260px;height:260px;
    background:radial-gradient(circle, rgba(91,76,219,0.35), transparent 70%);
    bottom:-80px; right:-80px;
}
.brand-top{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative;z-index:1;}
.login-store-logo{width:80%;height:auto;border-radius:14px;object-fit:cover;}
.login-store-name{font-size:17px;font-weight:800;color:#fff;margin-top:4px;}
.brand-icon{
    width:64px;height:64px;
    background:var(--accent);
    border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:28px;
}
.brand-title{font-size:16px;font-weight:700;line-height:1.2;}
.brand-sub{font-size:12px;color:#AEB1D6;font-weight:500;}

.brand-mid{position:relative;z-index:1;}
.brand-mid h1{font-size:24px;font-weight:800;line-height:1.35;margin-bottom:12px;}
.brand-mid p{font-size:13.5px;color:#B9BBDD;line-height:1.6;}

.brand-foot{font-size:11px;color:#7C7FA8;position:relative;z-index:1;}

.form-panel{
    flex:1;
    padding:52px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.system-name-heading{
    font-size:30px;
    font-weight:800;
    color:var(--text);
    margin-bottom: 60px;
    text-align:center;
}


.page-footer{
    margin-top: 30px;
    font-size:16px;
    font-weight: 500;
    color: #434343;
    text-align:center;
}


.form-panel h2{font-size:24px;font-weight:800;margin-bottom:6px;}
.form-panel .subtitle{font-size:13.5px;color:var(--muted);margin-bottom:32px;}

.field{margin-bottom:20px;}
.field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:7px;
    color:var(--text);
}
.field input{
    width:100%;
    padding:12px 14px;
    border:1.5px solid var(--border);
    border-radius:10px;
    font-size:14px;
    font-family:inherit;
    outline:none;
    transition:border-color .15s;
    background:#FBFBFE;
}
.field input:focus{border-color:var(--accent);background:#fff;}

.error-box{
    background:#FDEDED;
    color:var(--danger);
    border:1px solid #F5C6C6;
    padding:10px 14px;
    border-radius:10px;
    font-size:13px;
    margin-bottom:20px;
}

.login-btn{
    width:100%;
    padding:13px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:14.5px;
    font-weight:700;
    font-family:inherit;
    cursor:pointer;
    transition:background .15s;
    margin-top:6px;
}
.login-btn:hover{background:var(--accent-hover);}

.forgot-link{
    margin-top:16px;
    font-size:12.5px;
    font-weight:600;
    color:var(--accent);
    text-align:center;
    cursor:pointer;
}
.forgot-link:hover{text-decoration:underline;}

.form-foot{
    margin-top:24px;
    font-size:12px;
    color:var(--muted);
    text-align:center;
}

@media (max-width:720px){
    .wrap{flex-direction:column;width:420px;}
    .brand{padding:32px 28px;}
    .brand-mid h1{font-size:20px;}
    .form-panel{padding:36px 32px;}
}