:root{
    --primary:#7c3aed;
    --primary-hover:#6d28d9;

    --bg:#ebe7ff;
    --card:#f5f3ff;

    --border:#a78bfa;

    --text:#1e1b4b;
    --text-soft:#4338ca;

    --shadow:0 12px 30px rgba(76,29,149,.12);
}

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

body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    background:var(--bg);

    font-family:Inter,"Segoe UI",sans-serif;
    color:var(--text);
}

.main-content{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.login-container{
    background:var(--card);

    padding:2rem 2.2rem;

    width:300px;

    border-radius:16px;

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

    box-shadow:var(--shadow);

    text-align:center;
}

.title{
    font-size:1.8rem;
    font-weight:700;

    color:var(--primary);

    margin-bottom:1.5rem;

    letter-spacing:-0.5px;
}

.login-form{
    display:flex;
    flex-direction:column;
    gap:1.2rem;
}

.form-group{
    text-align:left;
}

label{
    font-size:.9rem;
    color:var(--text);
    font-weight:600;
}

input{
    width:100%;

    padding:.65rem;
    font-size:.95rem;

    margin-top:.35rem;

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

    border-radius:10px;

    background:white;

    transition:.2s;
}

input:focus{
    outline:none;

    border-color:var(--primary);

    box-shadow:
        0 0 0 3px rgba(124,58,237,.15);
}

.btn{
    background:var(--primary);

    color:white;

    padding:.7rem;

    border:none;

    border-radius:10px;

    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}

.btn:hover{
    background:var(--primary-hover);

    transform:translateY(-1px);
}

.error{
    color:#dc2626;
    font-size:.9rem;
    margin-top:.5rem;
}

footer{
    margin-top:2rem;

    color:var(--text-soft);

    font-size:.85rem;
}

.login-container{
    position:relative;
    overflow:hidden;
}

.login-container::before{
    content:"";

    position:absolute;
    top:0;
    left:0;
    right:0;

    height:6px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6 0%,
            #7c3aed 100%
        );
}