*{
    box-sizing: border-box;
}

body{
    margin:0;
    font-family:'Segoe UI',sans-serif;
    background:#f5f6fa;
}

.login-wrap{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:
        linear-gradient(135deg,#ff4d6d 0%,#ff8fab 100%);
}

.login-card{
    width:100%;
    max-width:360px;
    background:#fff;
    border-radius:22px;
    padding:35px 28px;
    box-shadow:
        0 15px 40px rgba(0,0,0,.18);
    animation:fadeIn .4s ease;
}

.login-brand{
    text-align:center;
    margin-bottom:28px;
}

.logo{
    font-size:58px;
    margin-bottom:10px;
}

#login-title{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#222;
}

.login-brand p{
    margin-top:8px;
    color:#777;
    font-size:14px;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    font-weight:600;
    color:#444;
}

.field input{
    width:100%;
    padding:13px 14px;
    border-radius:12px;
    border:1px solid #e2e2e2;
    outline:none;
    font-size:15px;
    transition:.2s;
    background:#fafafa;
}

.field input:focus{
    border-color:#ff4d6d;
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,77,109,.15);
}

.btn-primary{
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#ff4d6d,#ff758f);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
    margin-top:8px;
}

.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(255,77,109,.35);
}

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

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}