*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter', sans-serif;

background:var(--background);
    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    color:#111827;
}

.login-card{

background:var(--surface);
    width:400px;
    width:90%;

    padding:32px 40px;

    border-radius:14px;

    box-shadow:0 10px 30px rgba(15,23,42,.08);
}

.logo{

    font-size:48px;

    text-align:center;

    margin-bottom:8px;
}

h1{

    text-align:center;

    margin-bottom:8px;

color:var(--primary);}

.subtitle{

    text-align:center;

    color:#6b7280;

    margin-bottom:32px;
}

label{

    display:block;
    
    margin-bottom:8px;

    font-size: 15px;
    font-weight:600;
    cursor:pointer;
}

input{

    width:100%;

    padding:14px;

border:1px solid var(--border);
    border-radius:10px;

    margin-bottom:24px;

    font-size:16px;

    transition: border-color .2s, box-shadow .2s;

    cursor:text;

}

input:focus{

    outline:none;

background:var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

input:hover{

    border-color:#9ca3af;
}

button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:#2563eb;

    color:white;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition: background .2s, transform .2s;
}

button:hover{

background:var(--primary-hover);
    transform:translateY(-2px);
}

button:active{

    transform:translateY(0);
}


::placeholder{

    color:#9ca3af;
}