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

body {
    background: linear-gradient(135deg, #add8e6 0%, #87ceeb 100%);
    font-family: 'Segoe UI', sans-serif;
    display: flex; 
    align-items: center; 
    justify-content: center;
    min-height: 100vh; 
    width: 100%;
    padding: 20px; /* Mobilon ne érjen a szélekhez */
}

.login-box {
    background: lightblue; 
    border-radius: 15px; 
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); 
    width: 100%; 
    max-width: 450px;
    animation: slideIn 0.6s ease-out;
}

@keyframes slideIn { 
    from { opacity: 0; transform: translateY(-30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.logo-container { 
    text-align: center; 
    margin-bottom: 25px; 
}

.login-box img { 
    width: 180px; 
    height: 180px; 
    border-radius: 15px; 
    object-fit: cover; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    max-width: 100%; /* Mobilon ne lógjon ki */
}

.login-box h2 { 
    text-align: center; 
    color: #333; 
    margin-top: 15px; 
    font-size: 26px; 
}

.login-box p { 
    text-align: center; 
    color: #666; 
    margin-bottom: 25px; 
    font-size: 14px; 
}

.error-message { 
    color: #d32f2f; 
    background-color: #ffebee; 
    border-left: 4px solid #d32f2f; 
    padding: 12px; 
    margin-bottom: 20px; 
    border-radius: 4px; 
    font-size: 14px; 
}

.form-group { 
    margin-bottom: 15px; 
}

.login-box input { 
    width: 100%; 
    padding: 13px 15px; 
    border: 2px solid #ddd; 
    border-radius: 8px; 
    font-size: 15px; 
    transition: all 0.3s; 
}

.login-box input:focus { 
    outline: none; 
    border-color: #1d4ed8; 
    box-shadow: 0 0 10px rgba(29,78,216,0.2); 
}

.login-box button { 
    width: 100%; 
    padding: 13px; 
    margin-top: 25px; 
    border: none; 
    border-radius: 8px; 
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%); 
    color: white; 
    font-size: 16px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: all 0.3s; 
}

.login-box button:hover:not(:disabled) { 
    transform: translateY(-2px); 
    box-shadow: 0 5px 15px rgba(29,78,216,0.4); 
}

.login-box button:disabled { 
    opacity: 0.6; 
    cursor: not-allowed; 
}

.footer-text { 
    text-align: center; 
    color: #999; 
    font-size: 12px; 
    margin-top: 25px; 
    padding-top: 20px; 
    border-top: 1px solid #eee; 
}

/* --- MOBIL OPTIMALIZÁCIÓ --- */
@media (max-width: 480px) {
    .login-box {
        padding: 30px 20px;
    }

    .login-box img {
        width: 150px;
        height: 150px;
    }

    .login-box h2 {
        font-size: 22px;
    }
}