.login-container{
    width:400px;
    margin:80px auto;
    background: linear-gradient(180deg, var(--surface-bg), var(--surface-muted));
    padding:40px;
    border-radius:12px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, 0.18);
}

.login-container h3{
    text-align:center;
    margin-bottom:30px;
    font-size:24px;
    color:var(--title-text);
}

.form-group{
    margin-bottom:20px;
    position: relative;
}

.form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:var(--soft-text);
    transition: color 0.3s ease;
}

.form-group input{
    width:100%;
    padding:12px 15px;
    border:1px solid var(--field-border);
    border-radius:8px;
    background: var(--field-bg);
    color: var(--body-text);
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus{
    border-color: var(--accent);
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
    outline:none;
}

.login-btn{
    width:100%;
    padding:12px;
    border:none;
    border-radius:8px;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent));
    color:white;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.login-btn:hover{
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
    transform: scale(1.05);
}

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