*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
}

body{
background:#faf8f3;
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:14px;
}

.login-container{
width:100%;
max-width:1450px;
margin:0 auto;
display:flex;
justify-content:center;
align-items:center;
}

.login-card{
width:100%;
max-width:470px;
background:#fff;
border:1px solid #edf0f5;
border-radius:16px;
padding:34px 28px;
box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.login-header{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
margin-bottom:28px;
}

.login-logo{
width:105px;
height:105px;
object-fit:contain;
margin-bottom:18px;

}

.login-header h1{
color:#18469B;
font-size:2rem;
font-weight:700;
margin-bottom:8px;
}

.login-header p{
color:#666;
font-size:.95rem;
margin-bottom:18px;
line-height:1.6;
}

.login-header h2{
color:#18469B;
font-size:1.35rem;
font-weight:700;
}

.login-form{
width:100%;
}

.input-group{
display:flex;
flex-direction:column;
margin-bottom:20px;
}

.input-group label{
font-size:.92rem;
font-weight:600;
color:#374151;
margin-bottom:8px;
}

.input-group input{
width:100%;
height:52px;
padding:0 16px;
border:1px solid #dfe4ec;
border-radius:10px;
font-size:.95rem;
outline:none;
transition:.3s;
background:#fff;
}

.input-group input:focus{
border-color:#18469B;
box-shadow:0 0 0 3px rgba(24,70,155,.08);
}

.login-btn{
width:100%;
height:52px;
border:none;
border-radius:10px;
background:#18469B;
color:#fff;
font-size:1rem;
font-weight:600;
cursor:pointer;
transition:.3s;
margin-top:8px;
}

.login-btn:hover{
background:#123c82;
transform:translateY(-2px);
}

.login-footer{
margin-top:24px;
text-align:center;
font-size:.88rem;
color:#666;
}

.login-btn:active{
transform:scale(.98);
}

.input-group input::placeholder{
color:#9ca3af;
}

.login-card:hover{
box-shadow:0 8px 22px rgba(0,0,0,.08);
transition:.3s;
}

.login-header img{
display:block;
}

.login-form button i{
margin-right:8px;
}

.login-card hr{
border:none;
border-top:1px solid #edf0f5;
margin:20px 0;
}

.login-header h1,
.login-header h2{
letter-spacing:.3px;
}

.input-group input:hover{
border-color:#cfd8e3;
}
.login-error{
background:#fdecec;
color:#c62828;
border:1px solid #ef9a9a;
padding:12px;
border-radius:10px;
font-size:.9rem;
font-weight:600;
text-align:center;
margin-bottom:18px;
}

.login-success{
background:#e9f7ef;
color:#0b8f63;
border:1px solid #b7e4c7;
padding:12px;
border-radius:10px;
font-size:.9rem;
font-weight:600;
text-align:center;
margin-bottom:18px;
}

@media (min-width:768px) and (max-width:1059px){

body{
padding:12px;
}

.login-container{
max-width:100%;
}

.login-card{
max-width:430px;
padding:30px 24px;
}

.login-logo{
width:88px;
height:88px;
margin-bottom:16px;
}

.login-header{
margin-bottom:24px;
}

.login-header h1{
font-size:1.7rem;
margin-bottom:6px;
}

.login-header p{
font-size:.9rem;
margin-bottom:14px;
}

.login-header h2{
font-size:1.2rem;
}

.input-group{
margin-bottom:18px;
}

.input-group label{
font-size:.88rem;
}

.input-group input{
height:50px;
font-size:.9rem;
padding:0 14px;
}

.login-btn{
height:50px;
font-size:.95rem;
}

.login-footer{
margin-top:20px;
font-size:.84rem;
}

}

@media (max-width:767px){

body{
padding:8px;
}

.login-container{
max-width:100%;
}

.login-card{
max-width:100%;
padding:22px 16px;
border-radius:14px;
}

.login-header{
margin-bottom:20px;
}

.login-logo{
width:72px;
height:72px;
margin-bottom:14px;
}

.login-header h1{
font-size:1.45rem;
margin-bottom:6px;
line-height:1.3;
}

.login-header p{
font-size:.82rem;
margin-bottom:12px;
line-height:1.5;
}

.login-header h2{
font-size:1.05rem;
}

.input-group{
margin-bottom:16px;
}

.input-group label{
font-size:.84rem;
margin-bottom:6px;
}

.input-group input{
height:46px;
padding:0 12px;
font-size:.86rem;
border-radius:8px;
}

.login-btn{
height:46px;
font-size:.9rem;
border-radius:8px;
margin-top:4px;
}

.login-footer{
margin-top:18px;
font-size:.8rem;
line-height:1.5;
}

}