.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:linear-gradient(135deg,#eef5ff,#f7f9fc);
}

.login-card{
    width:100%;
    max-width:430px;
    padding:22px;
}

.logo{
    text-align:center;
    margin-bottom:18px;
}

.logo img{
    max-width:240px;
    width:100%;
    height:auto;
}

.login-title{
    text-align:center;
    margin-bottom:22px;
}

.login-title h1{
    font-size:24px;
    margin:0;
}

.login-title p{
    color:var(--fluent-muted);
    margin:6px 0 0;
}

.form-group{
    margin-bottom:14px;
}

.form-group label{
    display:block;
    font-weight:700;
    margin-bottom:6px;
}

.form-group input{
    width:100%;
    padding:13px;
    font-size:16px;
    border:1px solid var(--fluent-border);
    border-radius:8px;
    background:#fff;
}

.login-actions{
    display:grid;
    gap:10px;
    margin-top:18px;
}

.login-actions .btn{
    width:100%;
    text-align:center;
    justify-content:center;
}

.info-box{
    margin-top:18px;
    padding:14px;
    border-radius:10px;
    background:#f3f6fa;
    color:var(--fluent-text);
    font-size:14px;
    line-height:1.45;
}

.info-box p{
    margin:0 0 12px;
}

.info-box p:last-child{
    margin-bottom:0;
}

.error{
    padding:12px;
    border-radius:8px;
    background:#fde7e9;
    color:#a80000;
    font-weight:700;
    text-align:center;
    margin-bottom:14px;
}

@media(max-width:480px){
    .login-page{
        align-items:flex-start;
        padding:14px;
    }

    .login-card{
        margin-top:16px;
        padding:18px;
    }

    .login-title h1{
        font-size:22px;
    }

    .logo img{
        max-width:210px;
    }

    .form-group input,
    .login-actions .btn{
        min-height:48px;
    }
}