:root {
    --color-primary: #FF5733; 
    --color-tertiary: #1E90FF; 
    --color-dark: #333333; 
    --color-light: #FFFDE7; 
}
body { 
    font-family: 'Fredoka', sans-serif; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100vh; 
    background-color: var(--color-tertiary); 
    margin: 0; 
}
.login-container { 
    background: white; 
    padding: 40px 30px; 
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    width: 90%; 
    max-width: 380px; 
    text-align: center; 
}
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--color-dark); }
.form-group input { width: 100%; padding: 12px; border: 2px solid #ddd; border-radius: 8px; box-sizing: border-box; font-family: 'Fredoka', sans-serif; font-size: 1rem;}
.form-group input:focus { outline: none; border-color: var(--color-primary); }
.btn { width: 100%; padding: 12px; background-color: var(--color-primary); color: white; border: none; border-radius: 30px; font-weight: bold; font-size: 1.1rem; cursor: pointer; text-transform: uppercase; transition: background-color 0.3s; }
.btn:hover { background-color: #FF7043; }
.alert { padding: 12px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9em; font-weight: bold; }
.alert-error { background-color: #fde8e8; color: #d32f2f; border-left: 4px solid #d32f2f; }